[CSS] Resizeable lay-out met behulp van CSS

[Verwijderd]

Nu heb ik een stretched lay-out gemaakt met behulp van CSS. Ik heb hierbij blocks links, blocks rechts en een gecentreerd deel.

Als HTML heb ik nu:

HTML:

<div id="blocksLeft">

</div>

<div id="contentContainer">
    <div id="content">

    </div>
</div>

<div id="blocksRight">

</div>

en als CSS heb ik:

Cascading Stylesheet:

div#blocksLeft {
    float: left;
    width: 200px;
    padding-top: 5px;
    background-color: #FF0000;
}

div#contentContainer {
    float: left;
    width: 100%;
    margin: 0px -200px 0px -200px;
}
div#content {
    margin: 5px 205px 0px 205px;
    background-color: #000000;
}

div#blocksRight {
    float: right;
    width: 200px;
    padding-top: 5px;
    background-color: #FF0000;
}

Nu werkt het design wel helemaal, alleen doordat de contentcontainer boven blocksLeft staat willen de links in blocksLeft niet werken (zie voorbeeld: http://82.171.22.30/_albert/vvdts/design/index.html )

Ook door de z-index te verhogen van de blocksLeft werkt het niet. Het probleem doet zich overigens voor in Firefox 1.5 en Opera 8.5 (niet in Opera 9.0 en IE 6).

Heeft iemand een andere (betere) oplossing hiervoor? (Zonder er een fixed layout van te maken of tabellen te gebruiken)

[ Voor 28% gewijzigd door Verwijderd op 21-06-2006 13:51 ]

[Rowanov]

Het is imho makkelijker om het met een kleine dosis absolute positioning op te lossen. Daar ben ik normaal absoluut geen fan van, maar in dit geval werkt het het meest practisch.

Cascading Stylesheet:

body {
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
}
#left-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}   
#right-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}
#content {
    margin: 0 200px;
}

HTML:

<div id="left-bar">Linker ding</div>
<div id="container">
  <div id="content">Midden ding</div>
</div>
<div id="right-bar">Rechter ding</div>

Een online voorbeeld kan je hier vinden: http://www.bwzweden.nl/got/liquid.html

[Zoefff]

Waarom heb je in div#contentcontainer margin: 0px -200px 0px -200px; staan? Volgens mij moet je daar juist margin:0px 200px 0px 200px; van maken, de content begint immers pas 200 pixels rechts naast #blockLeft, toch? Of zie ik nu iets over het hoofd.

[Rowanov]

Ik denk dat de TS marges heeft gegeven om de content container te laten uitspreiden over de gehele pagina breedte, maar aangezien die floats in de weg zitten heeft hij het zo opgelost. Dat dat het punt is waar het in de soep loopt lijkt me vrij duidelijk; de div staat over de sidebars heen.

Het is met floats zowieso vrij onhandig werken, aangezien je heel idiote constructies moet bedenken om het content gedeelte goed te krijgen. Absolute positionering is hiervoor ideaal omdat je de sidebars gewoon uit de flow sleurt, waardoor het content gedeelte makkelijke schaalbaar te krijgen.

Edit: dus de marges positief maken gaat ook niet helpen Zoefff TS heeft 3 blokjes floaten op rij.

[ Voor 9% gewijzigd door Rowanov op 21-06-2006 15:09 ]

[Boelie-Boelie]

TS wil een layout met fluid middenkolom en sidebars met fixed width, toch? Kan gewoon met floats, zonder absolute positionering: negative margins.
www.tjkdesign.com/articles/3cols.asp (basic voorbeeld) (overigens gebaseerd op ALA 'Negative margins')
www.pixy.cz/blogg/clanky/css-3col-layout/

Als het voorbeeld van TJKdesign hier wordt toegepast (lijkt er het meest op), zou TS de linkerkolom en de content in één div moeten stoppen i.p.v. een div om de content alleen. En dan spelen met (negatieve) margins (vergeet de twee wrappers om het geheel niet).

[Rowanov]

Er is hier nooit gezegd dat het niet met floats kan, ik gaf alleen aan dat het niet altijd even handig is. Absolute positionering vind ik netter dan negatieve margins.

[Verwijderd]

Die negatieve margins staan er zodat de 100% die die krijgt toegewezen hij er wel een ruimte van 200 bij 200 tussen laat voor de linker en rechter kolommen.

Dit gaat dus in een aantal browsers goed, maar niet in alle, vandaar dat ik een andere oplossing zocht. Position absolute is helemaal geen oplossing, aangezien je de footer er in dit geval nooit meer onder krijgt. Zelf had ik wel al als oplossing het volgende gevonden:

<div id=left></div><div id=right></div><div id=center>

waarbij je left, left laat floaten, right right laat floaten en center gewoon met rust laat. Het is alleen helemaal een rommel (kan je net zo goed tabellen gebruiken).

In ieder geval Boelie-Boelie, tnx voor de links, kan ik weer verder zie dat dat eerste voorbeeld het probleem niet kent. (en de rest natuurlijk ook bedankt voor alle reacties).

EDIT:
Overigens gebruik ik nu dus ook al die negatieve margins (zie mn voorbeeld die nu wel werkt m.b.v. oplossing van boelie) maar de links in het linker menutje werken in firefox niet! (dankzei contentContainer die er overheen staat).

EDIT (over hieronder):
Zal er volgende keer aan denken (weet van te voren ook niet met welke oplossingen jullie komen), probeerde het ook niet af te kraken ofzo...

[ Voor 42% gewijzigd door Verwijderd op 21-06-2006 17:39 ]

[Rowanov]

Verwijderd schreef op woensdag 21 juni 2006 @ 16:59:
Dit gaat dus in een aantal browsers goed, maar niet in alle, vandaar dat ik een andere oplossing zocht. Position absolute is helemaal geen oplossing, aangezien je de footer er in dit geval nooit meer onder krijgt. Zelf had ik wel al als oplossing het volgende gevonden:

Dan moet je dat duidelijk in je TS aangeven.