Wrapper, container, header en footer
We gaan nu het meest gebruikte model in mekaar knutselen: wrapper, container, header en footer.
Teken de divs (in de juiste volgorde!) en geef deze een naam
(klik hiervoor op
de rand van de divs).
De juiste volgorde: 1: wrapper, 2:
hoofding, 3: container, 4: links, 5: rechts, 6: footer.
In het CSS-paneel verschijnen de id’s van de divs.
Typ “abc” in de divs hoofding, links, rechts en footer. Anders verdwijnen ze, wanneer je zo dadelijk de hoogte verwijdert.
Ga naar de HTML-code en verplaats twee keer </div>
Resultaat:
<div id="wrapper">
<div id="hoofding">abc</div>
<div id="container">
<div id="links">abc</div>
<div id="rechts">abc</div>
</div>
<div id="footer">abc</div>
</div>
Zo! Het model is klaar! Nu gaan we de CSS wat schikken.
LET OP: het is eigenlijk nog beter wanneer je de divs in HTML zou intypen. Op die manier kan je later niet vergeten CSS-code op te kuisen en je bent zelfs nog sneller klaar, wanneer je de tags kopieert en plakt. Hoe voeg je dan de CSS-codes toe? Klikt steeds in de naam van de div (bv wrapper, container, …) en klik op + in het CSS-paneel.
<div id="wrapper">
<div id="hoofding">hoofding</div>
<div id="container">
<div id="links">links</div>
<div id="rechts">rechts</div>
</div>
<div id="footer">footer</div>
</div>
Maak de bodytag aan en sla het CSS-bestand op als css/template.css
Maak een nieuwe css-tag. Klik op +.
Kies voor Tag – Body – Nieuw stijlpaginabestand.
Sla op als style.css. Kies een opmaak (lettertype, achtergrondkleur, marges, …)
We hebben de body-tag gemaakt omdat we deze altijd nodig hebben, voor de algemene opmaak van de pagina maar ook als truc: we hebben nu namelijk een apart CSS-bestand kunnen maken en zullen alle id’s van de divs erbij zetten!
Hoe doe je dit?
We hebben nu een css-bestand en stijlen (css in de broncode van index.html). We gaan alle css-code in style.css plaatsen.
Resultaat: