Pagina layout | Webdesign

Pagina layout

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’.

In de html-pagina staat bijvoorbeeld:
<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

Tekst als leidraad
Ga, voor de leesbaarheid, uit van vier tot twaalf woorden per regel. Volgen we onze spellingsregels dan gebruiken we steeds vaker samengestelde woorden. Lange woorden zoals ‘regellengte’ mag je als twee woorden tellen.
Wie tekst over twee kolommen wil verdelen kan als volgt te werk gaan.
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;’

Vragen, opmerkingen?

* = verplicht veld


This website stores some user agent data. These data are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to opt-out of any future tracking, a cookie will be set up in your browser to remember this choice for one year. I Agree, Deny
596