[css] Basic Layout.

[Kwartjuh]

Hallo mensen,
Ik probeer een goed XHTML ontwerp te maken met nette divs, in plaats van het geklooi met tables.
Daarvoor heb ik wat code gejat van een tutorial site voor mijn basic layout.
css:

code:

body{
                        margin: 0;
                        text-align: center;
                        }
                        
                        div#main_container{
                        margin: 0 auto 0 auto;
                        width: 750px;
                        height: 100%px;
                        text-align: left;
                        }
                        
                        div#box1{
                        background-color: black;
                        width: 100%;
                        height: 75px;
                        }
                        
                        div#box2{
                        background-color: red;
                        float: left;
                        width: 15%;
                        height: 200px;
                        }
                        
                        div#box3{
                        background-color: green;
                        float: left;
                        width: 70%;
                        height: 200px;
                        }
                        
                        div#box4{
                        background-color: silver;
                        float: left;
                        width: 15%;
                        height: 200px;
                        }
                        
                        div#box5{
                        background-color: black;
                        width: 100%;
                        height: 75px;
                        }

HTML:

code:

<div id="main_container">
                <div id="box1">box 1</div>
                <div id="box2">box 2</div>
                <div id="box3">box 3</div>
                <div id="box4">box 4</div>
                <div id="box5">box 5</div>
</div>

Al met al niet erg moeilijk zou je zeggen. De originele code had alleen Box 5 niet! Die heb ik er zelf bijgezet omdat ik een footer nodig heb. Alleen laatie die helemaal niet zien? Er gebeurt gewoon niks!
Ik ben echt ontzettend gefrustreerd omdat zoiets simpels gewoon niet wil werken? Wat zie ik over het hoofd?

Alvast bedankt!

[Verwijderd]

div#box5{ clear: both; }

Zo 1, 2, 3 uit m'n hoofd.

[Rowanov]

Alles bij elkaar opgeteld zijn box 2 tot en met 5 200%, hoe zie jij dat voor je?

Als je hem er onder wilt hebben is het nodig om te clearen (en te floaten uiteraard) idd en dan is het handig om direct op je container een overflow:auto; te zetten voordat je hier aankomt met die vraag.

[ Voor 4% gewijzigd door Rowanov op 04-12-2006 17:35 ]

[Raynman]

Kwartjuh schreef op maandag 04 december 2006 @ 17:01:
Ik probeer een goed XHTML ontwerp te maken met nette divs, in plaats van het geklooi met tables.

XHTML heeft weinig met (visueel) ontwerp te maken. De layout regel je met CSS, (semantische) HTML gebruik je voor de structuur.

Het is dus niet zo dat je ipv elke td nu een div neerzet. Je bedenkt gewoon wat op je pagina wilt hebben (header, menu, content, footer bijv.) en dan ga je die structuur in een HTML-bestandje zetten (hier bijv. respectievelijk h1, een list (ul), je content (kan in een divje om goed de opmaak te kunnen regelen) en nog een footer div of een list met copyright, sitemap en evt. nog iets).
Daarna ga je met CSS dit alles zo opmaken als je wilt. Misschien moet je dan nog hier en daar een extra div (container is vaak handig), span of class toevoegen, maar het is beter als je eerst de hele structuur opzet en dan pas aan de opmaak begint (vind ik iig veel fijner werken).

Ik beweer niet dat je het exact zo moet doen, ik wil alleen zeggen dat je niet alleen maar divjes moet gaan gebruiken omdat je iedereen hoort roepen dat het moet. Als je het netjes wil doen, doe het dan ook maar meteen goed (semantiek). Niet <span class="emphasis">tekst</span>, maar <em>tekst</em> en niet <div id="header">Tweakers.net</div>, maar <h1>Tweakers.net</h1>.

En i.p.v. div#box2 kun je ook wel #box2 gebruiken, scheelt typewerk en bytes.

[Kwartjuh]

Rowanov schreef op maandag 04 december 2006 @ 17:34:
Alles bij elkaar opgeteld zijn box 2 tot en met 5 200%, hoe zie jij dat voor je?

maar dit gaat toch om de breedte? Hij zet alles toch niet naast elkaar, maar onder elkaar?
Dan moet je dat toch niet optellen? Of zie ik nu iets totaal over het hoofd?

edit:

de clear: both; tag heeft geholpen! ik weet alleen nog niet wáárom ik die moet gebruiken, maar dat probeer ik wel ff op te zoeken! Bedankt

[ Voor 17% gewijzigd door Kwartjuh op 04-12-2006 18:06 ]