[xhtml/css2] Twee kolom layout

dinsdag 26 oktober 2010 11:26

Acties:

0 Henk 'm!

Topicstarter

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:

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:

<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).

dinsdag 26 oktober 2010 11:30

Acties:

0 Henk 'm!

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.

K54/R1250RS | K48/K1600GT | E61/550i

dinsdag 26 oktober 2010 11:38

Acties:

0 Henk 'm!

SvMp

Topicstarter

@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..

dinsdag 26 oktober 2010 11:43

Acties:

0 Henk 'm!

Flowmo

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 ]

dinsdag 26 oktober 2010 12:30

Acties:

0 Henk 'm!

SvMp

Topicstarter

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 ]

dinsdag 26 oktober 2010 12:47

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

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.

dinsdag 26 oktober 2010 13:16

Acties:

0 Henk 'm!

X-Lars

Just GoT it.

Dit?

woensdag 27 oktober 2010 17:16

Acties:

0 Henk 'm!

SvMp

Topicstarter

X-Lars schreef op dinsdag 26 oktober 2010 @ 13:16:
Dit?

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.

woensdag 27 oktober 2010 17:35

Acties:

0 Henk 'm!

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.

Onderwerpen