[css/xhtml] background-color van divs (faux columns)

[shades]

Ben mezelf maar eens aan het verdiepen in css/xhtml en ben lekker opweg. Een aantal grappen zijn me al duidelijk maar over het verticaal uitlijnen van divs moet iemand me toch iets uitleggen. Inmiddels ben ik erachter gekomen dat wanneer je een container-div wilt verticaal wilt stretchen je een <br clear=all /> moet doen maar waarom is me niet duidelijk.

Verder schijnt het onmogelijk te zijn om de achtergrond kleur van een div te bepalen. Ja gewoon met background-color maar heel je kolom opvullen ho maar. Wat met de "good-old" tabellen zou eenvoudig was lijkt met divs nauwelijks mogelijk.

Door te zoeken heb ik wel de "faux columns" gevonden en toegepast in mijn ontwerp maar ik krijg het niet functionerend.

Ik zal zo het pagina op het internet zetten. Dan wordt het duidelijker

[ Voor 3% gewijzigd door shades op 05-01-2008 14:46 ]

[Bozozo]

Als je een niet-floatend element hebt met daarin floatende elementen, dan zal de container dv niet oprekken. Als je een element (maakt niet uit wat voor, het kan ook een div zijn) achter al je content zet met 'float: none; clear: both' als stijl, dan zal dat object onder alle floatende elementen terecht komen (wegens clear: both... google) én je container oprekken (omdat hij niet float). Vandaar.

[shades]

Hier staat de pagina (css en html is in 1 pagina)

div probeer

De hele linker kolom moet dus van dat lichte blauw worden maar krijg het niet voor elkaar. De faux zou in regel 142 en 143 staan maar krijg het dus niet werkend. Krijg de hele kolom niet eens volledig

[ Voor 6% gewijzigd door shades op 05-01-2008 14:45 ]

[Herko_ter_Horst]

Deze aanpak lijkt goed te werken: http://www.pixy.cz/blogg/clanky/css-3col-layout/

[shades]

dat ziet er inderdaad veelbelovend uit - ga eens even kijken want daar gedaan wordt...

enige verschil wat ik zo snel zie is dat hier een hele breedte van de browser wordt gebruikt. Ik heb hier een extra div omheen gezet om maximaal 1000px te krijgen. Ga deze pagina wel ombouwen en kijken wat er van komt

[ Voor 56% gewijzigd door shades op 05-01-2008 16:31 ]

[shades]

Top het werkt. Zien hier de nieuwe versie. Aanpassing viel mee.

Heb gelijk even gekeken wat er nu precies gebeurt. Twee div worden over elkaar heer geplaatst. Door de clear nemen ze allebei de grote (hoogte) aan van de hoofdcontainer. De divs voor left, center en right hebben hier op dit moment helemaal niets meer mee te maken. Wat er daarna wordt gedaan is eigenlijk simpel. Er worden twee plaatjes als achtergrond ingesteld en herhaald in de verticale richting (Y) alleen wordt bij de ene div deze links geplaatst en de andere richts

De divs moet direct in de columnscontrainer gemikt worden. Derest komt eigenlijk weer daarin

Cascading Stylesheet:

#fauxLeft
{
    margin:0;
    padding:0; 
    background:url("leftcolumncolor.gif") top left repeat-y;
}

#fauxRight
{
    margin:0;
    padding:0; 
    background:url("rightcolumncolor.gif") top right repeat-y;
}

HTML:

<div id="columnsContainer"><div id="fauxLeft"><div id="fauxRight">
    <div id="columnLeft">               
    </div>

    <div id="columnCenter">
    </div>

    <div id="columnRight">
    </div>

    <br clear="all" />
</div></div></div>

Voor de <br clear="all" /> moet ik alleen nog een div maken met een .clear class anders komt ie niet door de validatie heen geloof ik.. Maar het werkt dus. Het enige nadeel is dat je linker er rechter kolom fixed breedte moeten hebben er ff een kleur veranderen is er dus ook niet bij. Je moet ook nog een de plaatjes wijzigen ipv alleen een hex rgb code in je css

edit: mmm werkt niet helemaal in ie7. FF2 en ie6 werkt wel - op die site werkt het wel in ie7 dus ik heb iets niet goed gedaan

[ Voor 10% gewijzigd door shades op 07-01-2008 21:07 ]