Relatief Gepositioneerde Divs
Inleiding
Tegenwoordig is dé standaard dat websites gemaakt worden in divs. Frames en tabellen zijn voorbij gestreefd. Frames omdat ze slechter scoren in Google en designbeperkingen hebben en tabellen omdat ze teveel code genereren en daardoor voor trage sites zorgen.
Er zijn twee mogelijkheden: relatief en absoluut gepositioneerde divs. Beiden zijn goed. Het verschil is dat je bij relatief gepositioneerde divs de lay-out kan centreren.
Een div is niet meer dan een soort van rechthoekig tekstvak, dat tekst, figuren, hyperlinks en nog vanalles kan bevatten. Het kan een achtergrondkleur of –afbeelding krijgen. Je kan tenslotte ook divs in divs steken en ze zo in mekaar embedden.
Dit zijn de meest gebruikte modellen:
Een div maken in Dreamweaver
Ga naar Dreamweaver, maak een nieuwe html-pagina en sla deze op.
Ga naar het tabblad Lay-out in de invoegbalk.
We tekenen nu een div met de knop “AP div tekenen”.
Wanneer je op een div klikt, krijgt deze een dikke blauwe rand. Maar in de browser zie je deze rand niet. Je kan nu vanalles intypen in de div. Je kan ook objecten als figuren invoegen.
Geef een div steeds een naam!
Dit kan linksonder het eigenschappenvenster.
Nu komen we bij de hoofdzaak: automatisch maakt Dreamweaver een CSS-id aan voor onze div.
Dit met de naam die we de div gegeven hebben. Wil je nu de opmaak van de div aanpassen, dan dubbelklik je op deze div.
Belangrijk: wij werken steeds met relatief gepositioneerde divs!
We gaan dus ALTIJD bij de categorie
Positioneren alles opkuisen. We verwijderen ALTIJD alles behalve de breedte en
hoogte. Soms mag je zelfs hoogte leeg laten.
We hebben reeds het verschil tussen marge en opvulling besproken. Dit is het box-model. Je kan dit bij Kader ingeven.
1: Opvulling: de ruimte IN een div
2: Marge: de ruimte BUITEN een div.
We zullen steeds onze divs positioneren mbv Marges.
Benieuwd naar de code?
Een div maak je met deze HTML-code:
<div id="links"></div>
Tussen de <div>-tags komt de inhoud van de div te staan.
De CSS-code is deze:
#links {
width:500px;
height:250px;
}
Conclusie: zeer weinig code, wat een snelle site garandeert!