Skip links en inhoudsopgave

Laatst aangepast: .

Korte omschrijving

Driekoloms lay-out met header. Deze lay-out vult altijd het hele venster van de browser, zowel in de hoogte als in de breedte. Bij voldoende inhoud kan de middelste kolom worden gescrold.

Header (geel)

Staat altijd bovenaan het venster, scrolt niet mee. Hoogte afhankelijk van lettergrootte. Vult altijd de ruimte tussen linker- en rechterkolom.

Linkerkolom (groen)

Staat altijd aan de linkerkant van het venster, scrolt niet mee. Breedte past zich aan lettergrootte aan. De hoogte past zich automatisch aan het venster aan: de kolom vult altijd de ruimte tussen boven- en onderkant van het venster. Geschikt voor bijvoorbeeld links, knoppen of 'n menu.

Rechterkolom (roze)

Staat altijd aan de rechterkant van het venster, scrolt niet mee. Breedte past zich aan lettergrootte aan. De hoogte past zich automatisch aan het venster aan: de kolom vult altijd de ruimte tussen boven- en onderkant van het venster. Geschikt voor bijvoorbeeld links, knoppen of 'n menu.

Middelste kolom (oranje)

Staat altijd op dezelfde positie tussen de linker- en rechterkolom. De hoogte past zich automatisch aan het venster aan: de kolom vult altijd de ruimte tussen header en onderkant van het venster. Bij voldoende inhoud verschijnt een verticale scrollbar, waarmee de inhoud van de middelste kolom gescrold kan worden.

De breedte past zich automatisch aan het venster aan, de ruimte tussen linker- en rechterkolom wordt altijd volledig gevuld.

Deze kolom is bedoeld voor de echte inhoud van de pagina.

Rechterkolom (oranje)

Staat altijd op dezelfde positie aan de rechterkant van het venster. De hoogte past zich automatisch aan het venster aan: de kolom vult altijd de ruimte tussen header en onderkant van het venster. Bij voldoende inhoud verschijnt een verticale scrollbar, waarmee de inhoud van de rechterkolom gescrold kan worden.

De breedte past zich automatisch aan het venster aan, de ruimte tussen linkerkolom en rechterkant van het venster wordt volledig gevuld.

Deze kolom is bedoeld voor de echte inhoud van de pagina.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Opmerkingen

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Nu Internet Explorer 6 minder wordt ondersteund, is zo'n lay-out als deze eigenlijk heel simpel te maken.

De hele pagina staat in een wrapper-div, die met behulp van position: fixed vast in het venster van de browser wordt neergezet. Deze wrapper-div krijgt een breedte en hoogte van 100%, zodat hij altijd het volledige venster van de browser vult, ongeacht de grootte van het venster.

De linker- en rechterkolom en de header worden absoluut gepositioneerd. Omdat ze binnen de wrapper-div staan, worden ze gepositioneerd ten opzichte van die wrapper-div. En omdat de wrapper-div vast in het browservenster is gezet, niet meescrolt, staan header en linker- en rechterkolom ook vast in het venster.

De middelste kolom wordt ook absoluut gepositioneerd ten opzichte van de wrapper-div, en staat dus ook stil in het venster. Door overflow op auto te zetten verschijnt aan de linkerkant van de middelste kolom een scrollbar, als de inhoud niet meer in het venster past.

Internet Explorer 6 kent geen position: fixed. Daarom negeert deze browser dat gewoon. Daardoor scrolt dus gewoon de hele pagina. Met behulp van wat margin en padding en zo worden header en kolommen op hun plaats gezet.

Er verdwijnt dus niets in Internet Explorer 6, het enige verschil met andere browsers is dat de hele pagina gewoon meescrolt.

Als het al mogelijk zou zijn dit voorbeeld werkend te krijgen in dit onding, zou dat echt heel ingewikkeld gaan worden en allerlei ongewenste bijwerkingen hebben. Steeds minder sites ondersteunen Internet Explorer 6 (volledig). En terecht. Ook in de voorbeelden op deze site wordt de ondersteuning voor deze browser afgebouwd. Het is allang tijd dat mensen ophouden deze verouderde, onveilige browser nog te gebruiken.

Beschrijving van code en css

De code die te maken heeft met de basis van dit voorbeeld is rood gekleurd. Alle voor dit voorbeeld niet-essentiële code is bruin.

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreken bijvoorbeeld de witte vlakken met de links. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n h1 uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.

Gebruik het volledige doctype, inclusief de url, anders werkt het niet goed.

De toevoeging achter <html hierboven hoort bij het gekozen doctype.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven. Als je als doctype html hebt gekozen, moet je niet eindigen op />, maar op > (dit geldt voor alles in de head wat eindigt op />).

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css" /> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Dit stukje code heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand.

De bedoeling is dat je bovenstaande regels aanpast voor je eigen bestand. De hele style, die onder deze regels in de <head> staat, wordt dan in het externe bestand geplaatst waar de href naar verwijst. In dat bestand komt de style precies zo te staan zoals die nu in de <head> staat. Het bestand moet eindigen op .css.

Voordeel van een externe stylesheet is onder andere, dat deze geldig is voor alle pagina's waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar op één enkele centrale plek te aan te brengen.

In die externe stylesheet zet je alles wat in dit voorbeeld tussen <style type="text/css"> en </style> staat (zonder deze begin- en eindregel).

De bovenste regel is voor de algemene stylesheet, geldig voor alle browsers. Dit is gewoon 'n link die naar 'n bestand elders verwijst, waar de css in staat. Op de plaats van "../../css/naam-van-stylesheet.css" moet je pad naar en naam van jouw stylesheet invullen.

Het eigenaardige stukje code daaronder heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden. Op deze manier kun je 'n stylesheet alleen voor Internet Explorer opnemen.

Dit stukje geldt voor alle versies van Internet Explorer, maar je kunt het ook per versie aangeven.

De link verwijst naar een aparte stylesheet voor Internet Explorer, waarin je css speciaal voor die browser zet. Op de plaats van "../../css-naam-van-ie-stylesheet.css" moet je pad naar en naam van je stylesheet voor Internet Explorer invullen.

De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer dan over die uit het algemene stylesheet heen gaan.

<style type="text/css">

Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In die stylesheet komt alles wat tussen bovenstaande regel en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out als die ik in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen omdat het volstrekt onoverzichtelijk is. Ik gebruik alleen deze lay-out omdat het anders veel te veel regels worden.

Voorbeeld van 'n goede lay-out in je css:


	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de kinderen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

margin: 0; padding: 0;

Slim om te doen, is soms wat afwijkend in verschillende browsers.

font-family: Arial, Helvetica, sans-serif;

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

color: black;

Zwarte voorgrondkleur, waaronder de tekstkleur.

div#wrapper

De div met id="wrapper". De div waar de hele pagina in staat.

position: fixed;

Zet de div op 'n vaste positie ten opzichte van het venster van de browser. Hierdoor zal de div ook niet scrollen als er meer inhoud is dan in het venster van de browser past. Ik hoef geen top of zo op te geven, want omdat dit het eerste element is, wordt het automatisch linksboven neergezet.

Dit geeft 'n soort raamwerk waarbinnen de andere onderdelen van de pagina neergezet kunnen worden. Door die onderdelen te positioneren ten opzichte van deze div, zullen ze ook niet meescrollen en dus op een vaste positie in het venster blijven staan, ook als de pagina hoger is dan het venster van de browser.

width: 100%;

Een div is een blok-element en wordt daardoor automatisch even breed als zijn ouder of, als die er zoals hier niet is, het venster van de browser. Maar dat geldt niet bij een fixed positie, dan wordt de div niet breder dan nodig is om de inhoud van de div weer te kunnen geven.

Die inhoud bestaat hier uit divs die zelf ook weer allemaal absoluut zijn gepositioneerd ten opzichte van deze div. En in dat geval tellen die ook niet meer voor de breedte van hun ouder. Oftewel: div#wrapper heeft helemaal geen breedte.

Dit wordt 'n beetje de-kip-en-het-ei: div#wrapper heeft geen breedte, maar de inhoud van div#wrapper wordt gepositioneerd ten opzichte van div#wrapper.

Bij de kip en het ei zullen we nooit weten wie er het eerst was, maar hier wel. Maak div#wrapper gewoon even breed als het venster van de browser. In dit geval is de kip er dus het eerst, waarna de eieren er keurig in gestopt kunnen worden.

(Wacht even. Eieren in de kip stoppen? Goed, morgenochtend maar verder, kennelijk bedtijd.)

height: 100%;

Even hoog maken als het venster van de browser.

Een div wordt automatisch even hoog als nodig is om de inhoud weer te geven. Maar in dit geval niet, omdat die inhoud bestaat uit absoluut gepositioneerde divs.

Een aantal van die divs wordt ook gepositioneerd ten opzichte van de onderkant van div#wrapper. Dat kan niet als div#wrapper geen hoogte heeft. Daarom maak ik hem met de hand even hoog als het venster van de browser.

a#skipper

De link met id="skipper". Deze link staat bovenaan de pagina. Hij is voor 'n gewone browser niet zichtbaar, maar wel voor spraakbrowsers en dergelijke. Deze kunnen hierdoor in één keer menu, header, en dergelijke passeren, zodat die niet op elke pagina opnieuw worden voorgelezen.

position: absolute;

Om de link buiten het scherm te kunnen parkeren. Door de link absoluut te positioneren stoort hij ook de rest van de pagina niet, omdat absoluut gepositioneerde elementen genegeerd worden door de rest van de pagina.

left: -2000px;

Link links buiten het scherm zetten, zodat hij normaal genomen onzichtbaar is. Maar voor bijvoorbeeld 'n spraakbrowser is de link gewoon zichtbaar.

Ik gebruik dit liever dan display: none;, omdat veel spraakbrowsers en dergelijke dat ook negeren, en dan zou de link dus geen enkel nut hebben.

div#header

De div met id="header". De div waar de gele header in staat.

position: absolute;

Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n relatieve, absolute of fixed positie heeft. Dat is hier div#wrapper. En omdat die is vastgezet in het venster van de browser, niet meescrolt, zal deze div dus ook niet meescrollen, maar bovenaan het venster blijven staan. Ook als er meer inhoud is dan in het venster past.

left: 12em;

Aan de linkerkant komt een kolom van 12 em breed. Dus moet de header ook pas daar beginnen.

Als eenheid neem ik em, zodat de breedte mee verandert met de lettergrootte. Bij een grotere letter wordt de linkerkolom breder. Dus moet de header dan ook verder vanaf de linkerkant beginnen.

right: 12em;

Aan de rechterkant komt een kolom van 12 em breed. Dus moet de header aan de rechterkant ook niet verder dan tot daar komen.

Als eenheid neem ik em, zodat de breedte mee verandert met de lettergrootte. Bij een grotere letter wordt de rechterkolom breder. Dus moet de header dan ook minder ver naar rechts eindigen.

height: 8.5em;

Hoogte. Als eenheid neem ik em. Daardoor groeit de hoogte mee met de lettergrootte.

Alles wat niet in de header past, verdwijnt aan de onderkant van de header. Het wordt gewoon onzichtbaar. Door als eenheid em te nemen wordt de kans dat dat gebeurt kleiner, omdat bij een grotere letter de header hoger wordt.

Als je toch bang bent dat dit zou kunnen gebeuren, omdat de header bijvoorbeeld erg vol staat, kun je aan de css voor de header overflow: auto; toevoegen. Nu zal er in de header een scrollbar verschijnen als de inhoud er niet meer in past. Niet erg fraai, maar beter dan dat er tekst of zo echt verdwijnt.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

background: yellow;

Geel kleurtje om de header herkenbaar te maken.

text-align: center;

Inline-elementen als tekst en afbeeldingen horizontaal centreren.

h1

De belangrijkste kopregel. Hij mag eigenlijk maar één keer op de pagina voorkomen.

Het is altijd aan te raden 'n <h1> te gebruiken. Zoekmachines hechten meer waarde aan tekst die in de <h1> staat en ook voor spraakbrowsers en dergelijke is hij van belang.

Maar maak hem niet te lang. Als je denkt slim te zijn door je hele tekst in 'n <h1> te zetten: die truc kennen ze allang bij zoekmachines. Dat leidt tot 'n lagere plaats in de zoekindex of tot volledige verwijdering. Gewoon net zo gebruiken als de kop boven 'n krantenartikel: de belangrijkste inhoud kort samenvatten.

Als het uiterlijk van de <h1> niet bevalt, kun je hem nog steeds gewoon gebruiken. Het uiterlijk kun je aanpassen met behulp van css, zoals ik hieronder ook doe.

margin: 0;

Een <h1> heeft van zichzelf aan boven- en onderkant een marge. Die kan ik hier niet gebruiken, dus weg ermee.

font-size: 1.6em;

De normale grootte van 'n <h1> vind ik hier wat te groot, dus ik maak hem iets kleiner. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

h2

'n Iets minder belangrijke kopregel. Deze mag vaker worden gebruikt. Hij is te vergelijken met 'n onderkop zoals je ook in 'n krantenartikel ziet. Ik gebruik ze hier voor 'header', 'linkerkolom', en dergelijke.

margin: 0; padding-top: 10px;

'n <h2> heeft van zichzelf aan boven- en onderkant 'n marge. De marge aan de bovenkant wordt door Internet Explorer 6 en 7 echter ten onrechte weggehaald als het element bovenaan de pagina staat. Om het in alle browsers hetzelfde te krijgen, haal ik daarom gewoon de marge voor allemaal weg.

Aan de bovenkant wil ik echter toch wel wat ruimte hebben. 'n padding aan de bovenkant werkt in alle browsers. Nu ziet het er in alle browsers toch hetzelfde uit.

Ik had ook 'n margin van 10 px aan de bovenkant van de <h2> kunnen opgeven, want dan die blijft vreemd genoeg wel staan. Maar in dit geval komt dit toevallig makkelijker uit.

(Wat de diepere beweegredenen van Microsoft waren om dit zo vreemd te implementeren, is mij een volslagen raadsel. En eigenlijk denk ik dat 't voor Microsoft zelf ook 'n raadsel is.)

text-align: center;

Tekst in de kopregel horizontaal in het midden zetten.

font-size: 1.2em;

De normale grootte van 'n <h2> vind ik hier wat te groot, dus ik maak hem iets kleiner. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

div#header h2

De <h2>'s binnen de div met id="header". Het kopje met 'Header'.

padding: 0;

Hier gelijk boven heb ik alle <h2>'s 'n padding aan de bovenkant gegeven. Die komt hier slecht uit, dus haal ik hem weer weg.

div#header p

De paragrafen binnen de div met id="header".

margin-top: 0;

Een paragraaf heeft van zichzelf een marge aan boven- en onderkant. Dat komt hier slecht uit, dus weg ermee.

div#links p, div#rechts p

De paragrafen binnen de divs met id="links" en id="rechts".

padding: 0 10px;

Omdat voor onder en links geen waarde is ingevuld, krijgen deze automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 10px 0 10px in de volgorde boven - rechts - onder - links. Rechts en links kleine afstand tussen de buitenkant van de div en de inhoud daarvan, de tekst.

div#rechts

De div met id="rechts". De rechterkolom.

position: absolute;

Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n relatieve, absolute of fixed positie heeft. Dat is hier div#wrapper. En omdat die is vastgezet in het venster van de browser, niet meescrolt, zal deze div dus ook niet meescrollen, maar bovenaan het venster blijven staan. Ook als er meer inhoud is dan in het venster past.

top: 0; right: 0; bottom: 0;

Een div wordt van zichzelf niet hoger dan nodig is om de inhoud erin weer te kunnen geven. Dat komt hier niet goed uit, want ik wil de achtergrond 'n kleurtje geven en aan de linkerkant 'n lijntje neerzetten.

Daarom zet ik de bovenkant helemaal aan de bovenkant van div#wrapper en de onderkant helemaal aan de onderkant daarvan. En omdat div#wrapper even hoog is als het venster van de browser, is de rechterkolom nu ook even hoog als dat venster.

Omdat dit de rechterkolom is, moet hij natuurlijk aan de rechterkant van het venster worden neergezet. Daar zorgt right: 0; voor.

z-index: 10;

Naast deze div met de rechterkolom komt div#midden met de middelste kolom te staan. Die staat in de html na deze div. Daardoor wordt hij daaroverheen gezet.

De rechterkolom is 12 em breed. De middelste kolom wordt op 12 em van rechts gezet. Dus keurig naast elkaar. Maar naast de rechterkolom komt nog 'n border van 1 px, en die verdwijnt net onder de middelste kolom.

Door de z-index van de div#rechts te verhogen, wordt deze toch boven div#midden gezet, waardoor de border links toch zichtbaar is.

width: 12em;

Breedte van de rechterkolom. Als eenheid neem ik em, zodat de breedte meegroeit met de lettergrootte.

Als er te veel in de rechterkolom staat, verdwijnt dat gewoon aan de onderkant van het venster van de browser. De scrollbalk naast de middelste kolom is er alleen voor de middelste kolom. Wat niet in de rechterkolom past, is gewoon onzichtbaar.

Om de kans dat de inhoud niet past zo klein mogelijk te maken, laat ik de breedte van de rechterkolom meegroeien met 'n eventuele grotere lettergrootte.

Als je toch bang bent dat er dingen aan de onderkant kunnen verdwijnen, bijvoorbeeld omdat de rechterkolom erg vol staat, kun je aan de css voor de rechterkolom overflow: auto; toevoegen. Nu zal er in de rechterkolom een scrollbar verschijnen als de inhoud er niet meer in past. Niet erg fraai, maar beter dan dat er tekst of zo echt verdwijnt.

border-left: black solid 1px;

Zwart lijntje aan de linkerkant.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

background: #fcc;

Roze achtergrond om de rechterkolom herkenbaar te maken.

div#midden

De div met id="midden". De div waarbinnen de middelste kolom staat.

position: absolute;

Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n relatieve, absolute of fixed positie heeft. Dat is hier div#wrapper. En omdat die is vastgezet in het venster van de browser, niet meescrolt, zal deze div dus ook niet meescrollen, maar op een vaste plaats op het venster blijven staan. Ook als er meer inhoud is dan in het venster past.

top: 8.5em;

Boven deze div met de middelste kolom staat div#header met de header. Deze is 8.5 em hoog. Daarom moet deze div op 8.5 em vanaf de bovenkant worden neergezet.

Omdat de hoogte bij de header is opgegeven in em en dus mee verandert met de lettergrootte, moet ik hier bij de afstand tot de bovenkant dezelfde eenheid nemen. Anders zou bij een grotere lettergrootte wel de header hoger worden, maar deze div op dezelfde afstand vanaf boven blijven staan. De onderkant van de header zou dan verdwijnen onder de middelste kolom.

right: 12em;

Rechts van deze div met de middelste kolom staat div#rechts met de rechterkolom. Deze is 12 em breed. Daarom moet deze div op 12 em afstand van de rechterkant van het venster van de browser blijven.

Omdat de breedte bij de rechterkolom is opgegeven in em en dus mee verandert met de lettergrootte, moet ik hier bij de afstand tot de rechterkant dezelfde eenheid nemen. Anders zou bij een grotere lettergrootte wel de rechterkolom breder worden, maar deze div op dezelfde afstand vanaf rechts blijven staan. De linkerkant van de rechterkolom zou dan verdwijnen onder de middelste kolom.

bottom: 0;

Een div wordt van zichzelf niet hoger dan nodig is om de inhoud weer te kunnen geven. Dat komt hier niet goed uit, want de div heeft 'n achtergrondkleur. En die zou dan alleen achter de tekst komen te staan, zodat onderaan 'n 'gat' overblijft.

Dus laat ik de div doorlopen tot de onderkant van div#wrapper. En omdat div#wrapper doorloopt tot de onderkant van het venster van de browser, loopt deze div nu ook door tot de onderkant van het venster.

left: 12em;

Links van deze div met de middelste kolom staat div#links met de linkerkolom. Deze is 12 em breed. Daarom moet deze div op 12 em afstand van de linkerkant van het venster van de browser blijven.

Omdat de breedte bij de linkerkolom is opgegeven in em en dus mee verandert met de lettergrootte, moet ik hier bij de afstand tot de linkerkant dezelfde eenheid nemen. Anders zou bij een grotere lettergrootte wel de linkerkolom breder worden, maar deze div op dezelfde afstand vanaf links blijven staan. De rechterkant van de linkerkolom zou dan verdwijnen onder de middelste kolom.

overflow: auto;

De div met de middelste kolom staat vast in het venster van de browser, en heeft ook 'n vaste hoogte. Als er dus meer inhoud is dan in deze div past, verdwijnt dat aan de onderkant van het venster. Dat is misschien handig als het om 'n vervolgverhaaltje voor het slapengaan gaat, maar normaal genomen is dat niet wat je wilt.

Daarom zet ik overflow op auto. Nu zal er in deze div, en dus in de middelste kolom, een scrollbalk verschijnen als er meer inhoud is dan in de div past.

border-top: black solid 1px;

Lijntje aan de bovenkant.

Dit kan ik beter hier neerzetten dan aan de onderkant van de header. De header is 8.5 em hoog, en op die hoogte begint ook de middelste kolom. 'n Border van 1 px aan de onderkant van de header zou dus net onder deze div komen te staan en onzichtbaar worden.

padding: 0 1.5em;

Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 1.5em 0 1.5em in de volgorde boven - rechts - onder - links. Links en rechts 'n kleine afstand tussen de buitenkant van de div en de inhoud van de div.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

background: orange;

Oranje achtergrond om de middelste kolom herkenbaar te maken.

div#midden p

De paragrafen in de div met id="midden".

text-indent: 20px;

De bovenste regel van elke paragraaf 20 px laten inspringen.

.tussenkop

De elementen met class="tussenkop". Hierin staan begin en einde van de opvultekst aangegeven. Ik had misschien ook 'n <h4> kunnen nemen, maar ik vind dit geen kopje waard. Ook had ik <strong> kunnen gebruiken, maar ook daar vind ik het niet belangrijk genoeg voor. Hoewel je daar prima anders over kunt denken.

font-weight: bold;

Vette letter.

font-size: 1.2em;

Iets grotere letter dan normaal. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#wrapper {position: static;} div#header {position: static; padding: 0 12em;} div#links, div#rechts {padding: 0 0 2500px;} div#midden {position: relative; top: 0; left: 12em; margin-right: 24em; padding-bottom: 500px;} </style> <![endif]-->

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 6, maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 6 in. De css voor Internet Explorer 6 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if IE 6]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

div#header

De div met id="header". De div waar de header in staat.

position: static;

In de algemene css voor alle browsers heeft deze div 'n absolute positie gekregen. Dat verander ik hier weer terug naar de standaardinstelling: statisch. Als ik dat niet doe, wordt de div die hieronder staat (div#midden met de middelste kolom) over de header heen gezet, omdat 'n absoluut gepositioneerd element genegeerd wordt door de rest van de pagina.

padding: 0 12em;

Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 12em 0 12em in de volgorde boven - rechts - onder - links.

Boven en onder geen padding, links en rechts 12 em. Dat is evenveel als de breedte van de linker- en rechterkolom. Als deze van breedte veranderen door 'n andere lettergrootte, verandert de padding mee. De inhoud van de header komt dus nooit binnen de linker- of rechterkolom te staan.

De achtergrond van de header is geel. Van zichzelf wordt een div even breed als z'n ouder, dat is hier div#wrapper. En die is even breed als het venster van de browser. Dus de achtergrondkleur van de header bestrijkt ook de volle breedte van het venster. Maar omdat div#links en div#rechts in de html na div#header komen, worden deze over de header heen gezet en zie je dus niet dat de gele achtergrond daarvan onder linker- en rechterkolom doorloopt.

div#links, div#rechts

De divs met id="links" en id="rechts". De divs met de rechter- en linkerkolom.

padding: 0 0 2500px;

Omdat voor links geen waarde is opgegeven, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 0 0 2500px 0 in de volgorde boven - rechts - onder - links.

Deze divs hebben in de algemene css voor alle browsers 'n absolute positie gekregen met top: 0; en bottom: 0;. Maar bij Internet Explorer 6 kun je alleen maar top óf bottom opgeven, niet beide. Dus linker- en rechterkolom vullen niet de volle hoogte van het venster van de browser, en dus de achtergrondkleur ook niet.

Daarom geef ik naar onder toe 'n onwijs grote waarde bij padding, zodat de achtergrondkleur ver naar beneden doorloopt. Hierdoor blijven linker- en rechterkolom ook ver naar onder toe groen en roze gekleurd.

div#midden

De div met id="midden". De div met de middelste kolom.

padding-bottom: 500px;

De middelste kolom heeft 'n oranje achtergrond. Door aan de onderkant 'n padding te geven, loopt deze nog 'n eind onder de inhoud van de kolom door.

Dit is niet echt nodig, maar het staat wat netter. De linker- en rechterkolom zijn langer dan de middelste kolom, dus als je verder naar beneden scrolt zou je anders in het midden geen achtergrondkleur meer hebben, en links en rechts wel.

Dit zou allemaal netter te krijgen zijn door voor Internet Explorer 6 'n heel eigen lay-out te maken met floaten en zo, maar dat doe ik dus niet meer voor deze verouderde browser.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> html {overflow: hidden;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 7. Uitleg zie bij Speciaal voor Internet Explorer 6.

html {overflow: hidden;}

Dit voorkomt 'n overbodige tweede verticale scrollbar rechts.

Als je 'n externe stylesheet gebruikt, loop je tegen 'n apart probleem aan bij html. Als je zonder meer html {overflow: hidden;} in je stylesheet zet, geldt dit voor élke pagina van je site. Terwijl het vrijwel zeker is dat er ook pagina's zullen zijn waar deze instelling niet moet worden gebruikt.

Normaal genomen is dit geen probleem, omdat je bijvoorbeeld de body 'n id kunt geven. Maar <html valt buiten de body. Om dit op te lossen kun je op de pagina's waar html {overflow: hidden;} moet worden gebruikt html 'n id geven, bijvoorbeeld "ie-overflow-hidden". In je html wordt de regel dan iets als <html id="ie-overflow-hidden" xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">. De precieze regel hangt af van het doctype wat je gebruikt.

In de stylesheet gebruik je dan gewoon html#ie-overflow-hidden {...}. Nu is dit alleen geldig voor de pagina's die bij html de juiste id hebben staan.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Specifiek voor dit voorbeeld

Zonder css wordt de site in de volgorde van de html op het scherm gezet: header, linkerkolom, rechterkolom, middelste kolom (met de content). Dit is ook zoals de meeste spraakbrowsers en dergelijke het zullen zien. Daarom kan het goed zijn boven bijvoorbeeld een menu een zogenaamde skip-link te zetten, zodat gebruikers van spraakbrowsers en dergelijke in één keer het menu kunnen passeren en snel naar de content kunnen gaan.

In dit voorbeeld staat helemaal bovenin de html een skip-link met id="skipper". Door op deze link te klikken ga je in één keer naar de middelste kolom.

Getest in

Laatst gecontroleerd op 26 maart 2012.

(Internet Explorer 6 is voor het laatst gecontroleerd op 11 maart 2010. Op deze browser test ik niet meer. Maar omdat de code nauwelijks is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in Internet Explorer 6.)

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 6, 7, 8 en 9 in de resoluties 800x600, 1024x768, 1280x1024 en 1440x900. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768, 1280x1024 en 1440x900 is ook in- en uitzoomen en een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Eventuele problemen met betrekking tot zoomen en lettergrootte staan bij Bekende problemen.

Er is getest met behulp van muis en toetsenbord.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. NVDA is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox, die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld mobiele systemen als iOS of Android, en ook niet op apparaten als smartphones, iPad, enz. De kans is heel erg groot dat dit voorbeeld niet (volledig) werkt op dat soort systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

:

Nieuw opgenomen.

26 maart 2012:

Op aantal plaatsen color: black; toegevoegd vanwege toegankelijkheid.

Bekende problemen

Internet Explorer 7, 8 en 9, Firefox en Opera

Normaal genomen kun je op een pagina heen en weer gaan met de toetscombinaties alt+→ en alt+← (of soortgelijke combinaties, afhankelijk van de gebruikte browser en dergelijke). Als je bijvoorbeeld bovenaan de pagina op een link klikt naar een plaats verderop in dezelfde pagina ('n anker), kun je normaal genomen met alt+← weer terug, naar waar je geklikt hebt.

Omdat in dit geval alleen de middelste kolom, bij genoeg inhoud, wordt gescrold, zullen dit soort ankers alleen binnen de middelste kolom voorkomen. Deze middelste kolom is absoluut gepositioneerd, en daarom werken die toetsen hier niet.

Bij een relatieve of statische positie werken de toetsen wel, maar daarmee kun je deze lay-out weer niet maken.

Deze lay-out is dus minder geschikt voor teksten, waarbinnen je veel heen en weer moet gaan, bijvoorbeeld om voetnoten onderaan de pagina te bekijken.

In Safari en Google Chrome werken deze navigatietoetsen sinds 'n paar jaar wel op de normale manier, ook binnen de middelste kolom. Er is dus hoop dat ze ooit in alle browsers goed werken.

En om misverstanden te voorkomen: het gaat hier alleen om links binnen de middelste kolom. Links vanuit header, rechter- of linkerkolom naar de middelste kolom werken volledig normaal. Ook links naar en van andere pagina's werken op de normale manier, inclusief de genoemde toetscombinaties.

Overigens speelt ditzelfde probleem in de linker- en rechterkolom, want ook die zijn absoluut gepositioneerd, maar die zullen normaal genomen niet hoger zijn dan er ruimte is, en er zullen al helemaal geen ankers in voorkomen.

Internet Explorer 7, 8 en 9, Firefox, Opera, Safari en Google Chrome

Als er meer inhoud is dan in de linkerkolom, rechterkolom of header past, dan wordt dit niet weergegeven: het verdwijnt gewoon en is op geen enkele manier te zien.

Ook als de inhoud goed lijkt te passen kan zich dit voordoen, omdat mensen bijvoorbeeld de lettergrootte kunnen vergroten.

Als linkerkolom, rechterkolom en header zo vol staan dat dit zich zou kunnen voordoen, kun je overflow: auto; toevoegen aan de css voor div#links, div#rechts of div#header. Nu zal er een scrollbalk verschijnen als de inhoud niet meer past. Niet de fraaiste oplossing, maar beter dan dat er inhoud onzichtbaar wordt.

In Internet Explorer 6 speelt dit probleem niet, omdat daarin de hele pagina scrolt.

Internet Explorer 7

Door een bug in Internet Explorer 7 verdwijnt rechts van het venster van de browser inhoud, als je inzoomt (vergroot). Dat komt door het gebruik van position: fixed;. In versie 8 is dit verholpen. Als je alleen de letters vergroot, gaat het wel goed.

Internet Explorer 6

De hele pagina scrolt mee, ook header, linker- en rechterkolom. Dit is geen probleem, dit is boosaardige opzet, zie Internet Explorer 6...