[CSS] 100% height voor 3 DIVjes naast elkaar (3 kolomen) - Softwareontwikkeling

maandag 27 augustus 2007 23:04

Acties:

Topicstarter

Ik ben bezig met een website en ik vond het een goed idee om het voor het eerst DIVjes op te gaan bouwen. Nu wil ik dat het content (3 kolommen) gedeelte zich uitstrekt over het gedeelte van de pagina wat niet gebruikt wordt, uiteraard met de footer daaronder. Maar ze strekken zich verder uit en er komt onnodig een scrollbar enz. Ik weet dat het een veel voorkomend probleem is en ik heb er al heel de avond op gezeten, maar ik kom er maar niet uit.

Ik gebruik zelf IE 6 en FF 1.5.

Hier is mijn CSS code:
[plain]

Cascading Stylesheet:

html, body {
height:100%;

background-color: #262626;
}



#container {
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
text-align: center;
width: 1018px;
margin: 0 auto;
height: auto;
}

#header {
width: 1018;
height: 61;
background-image: url('../images/banner.gif');
}

#bannerdown {
float: left;
width: 103;
height: 26;
background-image: url('../images/bannerdown.gif');
}
#menu {
float: left;
height: 26; 
width: 906;
background-color: #000000;
}

#menurechts {
float: right;
width: 9;
height: 26;
background-image: url('../images/navbgright.gif');
}
#links {
float: left;
height: 100%;
width: 6;
background-image: url('../images/left.gif');
}

#leftcontent {
background-image: url('../images/reviewzone3_10.gif');
background-position: 
 top; 
background-color: #FFFFFF;
background-repeat: 
repeat-x;
height: 100%;
float: left;
width: 215;
}
#content {
background-image: url('../images/reviewzone3_10.gif');
background-position: 
 top; 
background-color: #FFFFFF;
background-repeat: 
repeat-x;
height: 100%;
float: left;
width: 551;
}
#rightcontent {
background-image: url('../images/reviewzone3_10.gif');
background-position: 
 top; 
background-color: #FFFFFF;
background-repeat: 
repeat-x;
height: 100%;
float: left;
width: 240;
}
#rechts {
float: right;
height: 100%;
width: 6;
background-image: url('../images/right.gif');
}

#footer {
 position: absolute;
bottom: 0; /* heel belangrijk */
background-color: #F5F5F5;
background-image: url('../images/reviewzone3_26.gif');
background-position:bottom center;
background-repeat: repeat-x;
width: 1018;
height: 46;
}

[/]

Hier is mijn html code:
[plain]

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="stylesheets/layout.css" />



</head>
<body>

<div id=container>



<div id=header>


</div>

<div id=bannerdown>
</div>
<div id=menu>
</div>


<div id=menurechts>
</div>


<div id=links>
</div>


<div id=leftcontent>

</div>

<div id=content>
</div>


<div id=rightcontent>

</div>







<div id=rechts>

</div>




<div id=footer>

</div>



</div>




















</body>

</html>

[/]

Daarnaast heb ik nog een linkje naar de site om het probleem duidelijker te maken: http://80.61.214.73/reviewzone3/index2.html

Het liefst geen links meer naar tutorials hoe je dit moet doen, tenzij je mij via zo'n linkje kunt laten zien wat er fout is, want ik ben al heel de avond bezig geweest.

Alvast bedankt!

Edit: Ps, vandaag en morgen ben ik wat minder thuis en kan ik daardoor ook niet direct reageren.

maandag 27 augustus 2007 23:52

Acties:

Rowanov

Kop eens wat anders...

Als alles een vaste breedte heeft kan je faux-collumns toepassen, wat in feite niet anders is dan een achtergrond die zich in de lengte heerhaalt en die de kolommen simuleert. 3 kolommen op echt dezelfde hoogte krijg je op dit moment niet met alleen css voor elkaar.

Daarnaast nog een tip: geef eenheden mee bij width en height; het kunnen net zo goed 6 koeien ipv 6 pixels zijn. "Px" toevoegen is lijkt me gewenst

Edit: Oh ja, problemen met je container kan je vaak oplossen door overflow: hidden er op te zetten, omdat dan je floats netjes cleared worden. Als je hier geen problemen mee had weet je het voor de volgende keer

[ Voor 16% gewijzigd door Rowanov op 27-08-2007 23:54 ]

dinsdag 28 augustus 2007 07:54

Acties:

danielkraak

Topicstarter

Rowanov schreef op maandag 27 augustus 2007 @ 23:52:
Als alles een vaste breedte heeft kan je faux-collumns toepassen, wat in feite niet anders is dan een achtergrond die zich in de lengte heerhaalt en die de kolommen simuleert. 3 kolommen op echt dezelfde hoogte krijg je op dit moment niet met alleen css voor elkaar.

Daarnaast nog een tip: geef eenheden mee bij width en height; het kunnen net zo goed 6 koeien ipv 6 pixels zijn. "Px" toevoegen is lijkt me gewenst

Edit: Oh ja, problemen met je container kan je vaak oplossen door overflow: hidden er op te zetten, omdat dan je floats netjes cleared worden. Als je hier geen problemen mee had weet je het voor de volgende keer

Ik heb nu overflow op hidden gedaan en nu is de site gewoon het gewenste layout, maar nog steeds met een ongewenste scrollbar. Fauxcolumns heb ik nog niet toegepast, maar daar zal ik ook nog naar kijken.

dinsdag 28 augustus 2007 15:59

Acties:

danielkraak

Topicstarter

Ik heb ook nog een andere mogelijke oplossing bedacht. Als ik nou eens het stuk dat ik 100% wil hebben als body bg doe en dan naar beneden laat loopen en de footer naar beneden zet, dan wek je ook de illusie op van 100%.

Rekt de content div trouwens mee als er veel tekst in komt?

dinsdag 28 augustus 2007 16:30

Acties:

BikkelZ

CMD+Z

Lees deze site eens goed door, eigenlijk alles maar begin met het kopje 'Layout demos'.

http://www.positioniseverything.net/

Je zult zien dat je erg close kunt komen maar de heilige graal gewoon onmogelijk is. Je hebt twee keuzes:

- Gebruik een 1 row 3 cellen table maar dat is heel foei
- Leer leven of laat je klant leren leven met de beperkingen van CSS / div layouts.

[ Voor 4% gewijzigd door BikkelZ op 28-08-2007 16:30 ]

iOS developer

dinsdag 28 augustus 2007 16:33

Acties:

danielkraak

Topicstarter

BikkelZ schreef op dinsdag 28 augustus 2007 @ 16:30:
Lees deze site eens goed door, eigenlijk alles maar begin met het kopje 'Layout demos'.

http://www.positioniseverything.net/

Je zult zien dat je erg close kunt komen maar de heilige graal gewoon onmogelijk is. Je hebt twee keuzes:

- Gebruik een 1 row 3 cellen table maar dat is heel foei
- Leer leven of laat je klant leren leven met de beperkingen van CSS / div layouts.

Ik heb het probleem opgelost door een background in te stellen en alles wat 100% height moest hebben heb ik naar auto veranderd, behalve container, body en html. Nu werkt hij wel gewoon goed in FF maar in IE nog niet. Weet iemand wat daar aan de hand is?

dinsdag 28 augustus 2007 16:44

Acties:

BikkelZ

CMD+Z

Gooi eens wat Lorum in je body, op zo'n manier dat er een scrollbar zou moeten ontstaan.

iOS developer

dinsdag 28 augustus 2007 16:59

Acties:

danielkraak

Topicstarter

BikkelZ schreef op dinsdag 28 augustus 2007 @ 16:44:
Gooi eens wat Lorum in je body, op zo'n manier dat er een scrollbar zou moeten ontstaan.

Maar als er dan geen content in staat dan zou hij weer niet kloppen, dus dat is gewoon geen oplossing.

woensdag 29 augustus 2007 02:44

Acties:

Rowanov

Kop eens wat anders...

danielkraak schreef op dinsdag 28 augustus 2007 @ 15:59:
Ik heb ook nog een andere mogelijke oplossing bedacht. Als ik nou eens het stuk dat ik 100% wil hebben als body bg doe en dan naar beneden laat loopen en de footer naar beneden zet, dan wek je ook de illusie op van 100%.

Rekt de content div trouwens mee als er veel tekst in komt?

Die achtergrond, dat is dus gewoon faux-collumns

woensdag 29 augustus 2007 18:11

Acties:

danielkraak

Topicstarter

Rowanov schreef op woensdag 29 augustus 2007 @ 02:44:
[...]

Die achtergrond, dat is dus gewoon faux-collumns

Lol, kom ik ook net achter. Ik heb het nu opgelost. Nu stuit ik op een volgend probleem: Ik wil bijvoorbeeld bij het navigatiegedeelte left-padding hebben en als ik dat doe, dan moet ik in FF wat van de width afhalen, maar in IE juist niet. Iemand misschien een oplossing?

Ps: Zie de link die ik in het begin geef.

woensdag 29 augustus 2007 19:31

Acties:

Boelie-Boelie

Met een doctype kun je ervoor zorgen dat er minder weergaveverschillen ontstaan tusen moderne browsers enerzijds en IE anderzijds.

Cogito ergo dubito

woensdag 29 augustus 2007 20:06

Acties:

danielkraak

Topicstarter

Alles is zojuist werkend bevonden. Bedankt voor jullie tijd en moeite. $_/-\o_$