Pagina layout
· Bijgewerkt op 18 april 2021 ·
Vroeger was de tabel het geijkte middel om inhoud over een pagina te verdelen. Deze methode is vrijwel geheel vervangen door css.
Een <div> is een html blok-element, dat als vrij plaatsbaar vlak gedefinieerd kan worden.
De stijldefinities komen meestal in een ‘class’, soms in een ‘identity’.
<div class=”voorbeeld”>platte tekst van deze alinea.</div>
In de stylesheet staat:
.voorbeeld { background-color: #fea; }.
Veel gebruikte eigenschappen:
· font = voor een alternatief lettertype [bv: streamer]
· color = idem
· background-color = is makkelijk bij het bepalen van de positie
· padding = de ruimte tussen de buitenrand en de inhoud
· border: dikte vorm kleur = is makkelijk bij het bepalen van de positie
· margin = ruimte tussen de buitenrand en andere elementen
· float = ‘left’ of ‘right’ laat de rest van de inhoud passeren
· width = breedte van het vlak
1 – maak een <div> voor de opmaak van alle inhoud
2 – maak daarbinnen een <div> die links float en een <div> die rechts float.
Absolute postie
Een <div> gedefinieerd met ‘position: absolute’ krijgt een vaste postitie op een pagina. Daarbij horen de definities voor
· top = afstand van bovenrand div tot bovenkant pagina
· left = afstand van linkerrand div tot linkerkant van pagina
· height = hoogte van de div
· width = breedte van de div
Alle afstanden zijn in pixels.
Voor- en achtergrond
Aan een <div> is een z-index meet te geven. Hoe hoger het meegegeven getal, des te verder naar voren komt de <div>.
Dus een <div> met ‘z-index:1;’ komt achter een <div> met ‘z-index: 2;’