Toon posts:

[xhtml/css2] Twee kolom layout

Pagina: 1
Acties:

Onderwerpen


  • SvMp
  • Registratie: september 2000
  • Niet online
Ik probeer de volgende twee kolommen-layout te maken:
1. Website bestaat uit header bovenin (vaste hoogte), twee kolommen (variabele hoogte) en footer onder (vaste hoogte)
2. Header, footer en de kolommen samen nemen de volle breedte van het scherm.
3. Linker kolom heeft vaste breedte, rechter kolom vult de rest van de ruimte
4. Footer staat altijd helemaal onderaan en scrollt mee, header staat helemaal bovenaan en scrollt ook mee
5. Hoogte van de twee kolommen past zich aan aan kolom met meeste inhoud. Ze zijn beide altijd even hoog
6. Het lastigste: Als er weinig inhoud is in de kolommen, dus geen scroll, dan staat de footer altijd helemaal onderaan.

Van alles heb ik geprobeerd! Dan weer komt de tekst onder de footer uit, dan heb ik weer geen scroll mogelijkheid.

Hier mijn laatste poging:

test.css
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
body {
    padding:0;
    margin:0;
}


#header {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   height: 50px;
   display: block;
   padding: 10px;
   background-color: #D0D0F0;
   width: 100%;   
}

#footer {
   position: absolute;
   height: 20px;
   padding: 10px;
   background-color: #F0D000;
   width: 100%;   
   text-align: center;
   bottom: 0px;
}

#content {
   position: absolute;
   margin-top: 70px;
   padding-bottom: 40px;
   top:  0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   width: 100%;
   overflow: hidden;
}

#menu {
   background-color: #400000;
   width: 300px;
   position: absolute;
   margin-bottom: 40px;
   bottom: 0px;
   top: 0px;
   left: 0px;
   padding: 10px;
}

#main {
   background-color: #D0F0D0;
   position: absolute;
   margin-bottom: 40px;
   bottom: 0px;
   top: 0px;
   left: 320px;
   right: 0px;
   padding: 10px;
}

}


test.html
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header">
Titel
</div>

<div id="content">

<div id="menu">
Test links
</div>

<div id="main">
Test midden<br />
Test midden<br />
Test midden<br />
Test midden<br />
Test midden<br />
Test midden<br />
Test midden<br />
Test midden<br />
Test midden<br />
Test midden<br />

</div>

</div>

<div id="footer">
(c)2010 Footer
</div>

</body>
</html>


Wat doe ik toch fout? Ik wil het zonder truucjes met JavaScript of plaatjes!

(een 'height: 100%' in de content lost problemen op, maar creëert ook nieuwe ellende).

  • noes
  • Registratie: augustus 2006
  • Niet online

noes

gek op benzine.

Deze link heeft goede info wbt multiple column layouts, ook de 2 column layout. CSS kan je pakken door even in de source te kijken. Het aanpassen is relatief eenvoudig en werkt goed cross-browser.

http://matthewjamestaylor...t-2-column-right-menu.htm

Als je echter je eigen stijl aan wilt houden: position: absolute schaalt zn parent niet mee. Floats hebben ditzelfde probleem.

2020 R1250RS, K26/R1200RT, E61/550i


  • SvMp
  • Registratie: september 2000
  • Niet online
@noes: Probleem is dat de footer niet onderaan het browservenster komt als de inhoud beperkt is. Een twocolumn-layout maken is het probleem niet, voorbeelden genoeg, maar die footer..

  • Flowmo
  • Registratie: november 2002
  • Laatst online: 24-09 15:28

Flowmo

iframe is my middle name

HTML & BODY geef je width en height 100%.

#content geef je dan height ook 100% en een margin boven en onder die even hoog is als de #header en #footer divs.

#header en #footer positioneer je dan met position:absolute. #header krijgt top:0 en #footer krijgt bottom:0. Breedte geef je voor deze divs dan ook 100%.

Zo zorg je ervoor dat je kan scrollen door je #content div en zorgt ervoor dat de header en footer constant in scherm blijven staan. Dat is toch wat je wilde als ik je goed begrijp?

Edit: dit werkt niet in IE6 trouwens, hou daar rekening mee. Als dat wel nodig is, dan moet je iets anders zoeken.

[Voor 10% gewijzigd door Flowmo op 26-10-2010 11:44]


  • SvMp
  • Registratie: september 2000
  • Niet online
Flowmo schreef op dinsdag 26 oktober 2010 @ 11:43:


Zo zorg je ervoor dat je kan scrollen door je #content div en zorgt ervoor dat de header en footer constant in scherm blijven staan. Dat is toch wat je wilde als ik je goed begrijp?
Nee. Header en footer moeten mee scrollen.
Als er geen sprake is van scrollbalk (weinig content), dan moet de footer helemaal onderaan komen. Kolommen moeten dan ook volledige hoogte krijgen.

[Voor 5% gewijzigd door SvMp op 26-10-2010 12:35]


  • MueR
  • Registratie: januari 2004
  • Laatst online: 24-09 17:44

MueR

Moderator Devschuur®

is niet lief

Je wil dus een een fixed header en footer? Die twee kolommen boeien niet zo, dat kan je met faux columns wel doen, dus laat die even buiten beschouwing. Dat is niet zo heel moeilijk

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!


  • X-Lars
  • Registratie: januari 2004
  • Niet online

X-Lars

Just GoT it.


  • SvMp
  • Registratie: september 2000
  • Niet online
Deze oplossing heb ik bestudeerd. Probleem is nu nog het op maximale hoogte krijgen van de #main-div.
Een background-color toevoegen aan de div laat zien dat de div niet tot aan de footer komt. Dat heb ik wel nodig.
Een height: 100% doet wat het moet doen, maar zorgt er voor dat er altijd een scrollbar komt. "padding-bottom: -30px;" om dat te corrigeren, werkt, maar als de content langer wordt, dan komt de footer niet onderaan de content maar blijft altijd in beeld.

  • X-Lars
  • Registratie: januari 2004
  • Niet online

X-Lars

Just GoT it.

SvMp schreef op woensdag 27 oktober 2010 @ 17:16:
[...]

Een background-color toevoegen aan de div laat zien dat de div niet tot aan de footer komt.
Wel? Zet maar eens wat bg-images uit. De div#main zit, op 3px na ofzo, tegen de div#footer aan (disclaimer: ik kijk alleen met FF3.6). En als je het over die gap van 3px hebt, dat ligt aan een line-height ergens.
Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee