Volledige versie bekijken : css boxmodel



dano
30 October 2008, 21:40
Hoi iedereen,

Ik had een opdracht gemaakt voor school met css, maar ik moet de lay-out nu maken met behulp van het css boxmodel. Ik heb geen flauw idee hoe dit moet, zou iemand me kunnen helpen? Ik heb dus inprincipe de lay-out gemaakt, maar dan in frames/tabellen ipv het css boxmodel. :wall:


Dano

Dexter
31 October 2008, 00:32
geef anders een de lay-out die je wilt bekomen..

Adri

dano
31 October 2008, 00:46
geef anders een de lay-out die je wilt bekomen..


Adri

Sorry wat bedoel je? :rolleyes:

Dexter
31 October 2008, 14:05
Zoiets:
http://www.minatica.be/attachment.php?attachmentid=2620&stc=1&thumb=1&d=1225454740 (http://www.minatica.be/attachment.php?attachmentid=2620&d=1225454740)

Ik denk trouwens dat dit een boxmodel is...
Daarna moet je het gewoon nog coderen.

Snakey
1 November 2008, 12:19
Dit wil gewoon zeggen dat je het in css moet maken.

Zorg er best voor dat je html goed is. Hou in het begin geen rekening met de visuele weergave.
In de body zet je bv. een titel in een h1, tekst in p (paragrafen), h2 (tot h6) voor tussentitels.
Als je een menu wilt, dan gebruik je een opsommingslijst ervoor.

Dan kan je div en span gebruiken om blokken te maken die anders gepositioneerd moet zijn of een ander uiterlijk moet hebben.

Bijna alle items zijn standaard van het type block. Items zoals span, strong, a, ... zijn standaard inline. Je kan dit herkennen doordat na de block, je standaard op een nieuwe regel zal komen. Je kan het type nog steeds veranderen via de css, zoals voor het menu, zal men vaak de li naar inline veranderen.
Dit is het boxmodel:
http://www.w3.org/TR/CSS2/images/boxdim.gif

Voorzie de div en span en eventuele andere items van classes en ids zodat je deze kan aanspreken in je css. En vanuit css kan je properties toekennen aan die items, bv. een breedte. Bij breedtes, hoogtes, margins en paddings, zal je rekening moeten houden met het boxmodel. Let er ook bij op dat IE6 het boxmodel niet juist hanteert. IE6 rekent de margins niet bij de totale breedte van de box, dit terwijl IE7 en alle andere recente browsers de volledige breedte (width+padding+margin) als volledige breedte van de box beschouwen. Hou hier rekening mee als je een paar blokken naast elkaar zal zetten.