Skip links en inhoudsopgave

Laatst aangepast: 1 november 2011

Venstervullende lay-out met header, footer en drie kolommen met verschillend gekleurde achtergrond

Korte omschrijving

Driekoloms lay-out met header en footer. Deze lay-out vult in de breedte altijd het hele venster. Bij voldoende inhoud kan de hele pagina worden gescrold.

Header (geel)

Staat altijd bovenaan de pagina en scrolt mee. Hoogte afhankelijk van lettergrootte. Automatisch even breed als het venster.

Linkerkolom (groen)

Staat altijd aan de linkerkant van het venster en scrolt mee. Vaste breedte. De achtergrondkleur en de verticale rand zijn altijd even hoog als de langste kolom: van header tot footer. Geschikt voor bijvoorbeeld links, knoppen of 'n menu.

Middelste kolom (oranje)

Vult altijd de ruimte tussen linker- en rechterkolom. De breedte past zich automatisch aan de breedte van het venster aan. Achtergrondkleur en verticale randen zijn altijd even hoog als de langste kolom: van header tot footer. Deze kolom is bedoeld voor de echte inhoud van de pagina.

Rechterkolom (roze)

Staat altijd aan de rechterkant van het venster en scrolt mee. Vaste breedte. De achtergrondkleur en de verticale rand zijn altijd even hoog als de langste kolom: van header tot footer. Geschikt voor bijvoorbeeld links, knoppen of 'n menu.

Footer (blauw)

Staat altijd onderaan de pagina en scrolt mee. Hoogte afhankelijk van lettergrootte. Automatisch even breed als het venster.

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

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

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

Een regelmatig terugkerende vraag op allerlei forums is hoe je meerdere kolommen van ongelijke lengte 'n verschillend gekleurde achtergrond kunt geven. Als de kolommen 'n vaste breedte hebben, valt dat nog wel mee. Maar als de breedte zich moet aanpassen aan de breedte van het venster van de browser, wordt het 'n stuk ingewikkelder. Dit geldt nog sterker als het om drie kolommen gaat.

Normaal genomen zal in de middelste kolom de echte inhoud van de pagina staan, met in de linker- en rechterkolom links of zoiets. De middelste kolom zal dan het breedste zijn. Normaal genomen zullen die linker- en rechterkolom een vaste breedte moeten hebben, omdat ze anders op in 'n smal venster al snel te smal worden, en in 'n breed venster te breed. Alleen de middelste kolom past zich dan aan de breedte van het venster aan.

Bij twee kolommen kun je 'n achtergrond-afbeelding in twee kleuren gebruiken. Bij drie kolommen werkt dat niet, want de breedte van de middelste kolom is onbekend.

De hele handel floaten werkt ook niet goed, omdat niet elke browser dat op dezelfde manier hanteert en de gekleurde achtergrond niet altijd doorloopt tot aan de onderkant. Om het nog maar niet te hebben over de regimenten afwijkingen en bugs in Internet Explorer 6 als 't om floaten gaat.

Het zou leuk zijn als je de achtergrondkleuren los zou kunnen koppelen van de feitelijke inhoud. Dan kun je gewoon float en zo gebruiken zonder dat dat de kleuren stoort.

Met een aantal trucs blijkt dat mogelijk te zijn, en het werkt nog in alle browsers ook. En eigenlijk is het nog niet eens zo heel ingewikkeld. Er worden drie standaardeigenschappen van divs gebruikt, die in elke browser goed werken.

Een div wordt vanzelf altijd even hoog als de inhoud van die div (als ik geen hoogte opgeef of andere speciale dingen doe). Dus een achtergrond-afbeelding of -kleur bij die div zal ook altijd de volle hoogte van die div vullen.

Zonder verdere attributen zal een div ook altijd de volle breedte van het ouder-element vullen, en als dat er niet is de volle breedte van het venster van de browser. Een achtergrondkleur wordt even breed als de div waar hij in zit, en vult dus ook het hele ouder-element of venster.

De derde eigenschap: als een div een achtergrondkleur én een achtergrond-afbeelding heeft, zal de achtergrond-afbeelding 'winnen' van de achtergrondkleur. Door 'n achtergrondkleur in combinatie met 'n smalle achtergrond-afbeelding die niet wordt herhaald, kan ik 'n div dus al twee verschillende achtergronden geven.

Rondom de eigenlijke pagina worden twee extra divs gezet: wrapper-1 en wrapper-2. wrapper-1 geef ik aan de rechterkant 'n achtergrond-afbeelding die even breed is als de rechterkolom. De hoogte van die afbeelding is 1px. De afbeelding wordt alleen in de hoogte herhaald. Die achtergrond-afbeelding zorgt voor de kleur: het is gewoon 'n roze plaatje.

Omdat de hele rest van de pagina, dus ook de middelste en de linkerkolom, binnen deze wrapper-div staan, zal deze wrapper-div altijd even hoog zijn als de pagina, en dus als alle kolommen. Dus ook even hoog als de hoogste kolom.

De achtergrondkleur zal dus ook even hoog zijn als de pagina, want de achtergrond-afbeelding met de kleur wordt over de volle hoogte van de div herhaald.

Als ik nu later aan de rechterkant hier 'n kolom overheen zet, heeft die kolom als achtergrondkleur de kleur van de achtergrond-afbeelding. En omdat die afbeelding bij de wrapper-div hoort, en niet bij de kolom, zal hij altijd de volle hoogte vullen, ongeacht de hoeveelheid inhoud in de rechterkolom. Voor het oog heeft de kolom dus 'n achtergrondkleur die altijd van boven tot onder loopt. (In werkelijkheid is 't dus gewoon allemaal nep, want de achtergrondkleur heeft helemaal niets met de kolom te maken maar dat maakt niet uit.)

Omdat de achtergrond-afbeelding aan de rechterkant van de div wordt gezet, staat hij altijd gelijk aan de rechterkant van het venster. Ik heb dus aan de rechterkant van het venster altijd 'n vaste breedte in 'n bepaalde kleur.

Maar ik kan die wrapper-1 voor nog meer gebruiken. Omdat 'n div altijd de volle breedte vult, kan ik er ook 'n achtergrondkleur in zetten. Die wordt dan gebruikt door de middelste kolom. De afbeelding met de achtergrondkleur voor de rechterkolom heeft daar geen last van, want de achtergrond-afbeelding wordt over de achtergrondkleur gezet.

Voor de hoogte geldt hetzelfde verhaal als hierboven voor de rechterkolom.

De achtergrondkleur wordt pas zichtbaar aan de linkerkant van de achtergrond-afbeelding. Die is hier 220 px breed. Dus de achtergrondkleur wordt altijd op 220 px vanaf de rechterkant van het venster zichtbaar. De middelste kolom moet altijd op die afstand van de rechterkant van het venster staan. Dat is heel simpel te doen met een padding van 220 px aan de rechterkant.

Nu heb ik dus al twee kolommen die van boven tot onder zijn gekleurd, ongeacht de hoeveelheid inhoud. Want die inhoud is nu helemaal losgekoppeld van de achtergrondkleur.

Binnen div wrapper-1 zet ik een tweede wrapper-div: wrapper-2. (Ik heb toch wel 'n gave voor het bedenken van originele namen, al zeg ik het zelf!)

Ook deze div wordt vanzelf even hoog als de inhoud ervan, dat hoort nou eenmaal bij 'n div. En omdat die inhoud de hele pagina omvat, wordt ook deze div even hoog als de inhoud. Dus ook even hoog als de kolommen. Dus ook weer even hoog als de langste kolom.

Binnen deze div zet ik aan de linkerkant 'n achtergrond-afbeelding. Die is hier groen. Ook deze is 220 px breed en 1 px hoog en wordt alleen verticaal herhaald. Dit zorgt voor de achtergrondkleur van de linkerkolom. Ook dit is dus eigenlijk weer nep, de kleur heeft feitelijk niets met de kolom te maken. Maar voor 't oog is 't een geheel, en daar gaat 't maar om.

Omdat de breedte van de achtergrondkleur altijd 220 px is, zal de middelste kolom ook altijd op die afstand van het venster moeten komen te staan. De rechterkant van de middelste kolom stond al op 'n vaste afstand vanaf de rechterkant van het venster. Met beide zijkanten op 'n vaste afstand van de zijkant van het venster, past de breedte van de middelste kolom zich dus automatisch aan de breedte van het venster aan.

Door één van de de buitenste pixels van de achtergrond-afbeelding zwart te maken, heb ik gelijk 'n randje als afscheiding tussen de kolommen. En ook dat randje groeit mee met de pagina, want het is gewoon 'n onderdeel van de achtergrond-afbeelding.

Nu heb ik de achtergrond volledig losgekoppeld van de kolommen. Daardoor kan ik nu gewoon floaten en dergelijke zonder de gebruikelijke problemen. De linkerkolom float ik naar links, de rechter naar rechts. Ik geef ze 'n breedte van 219 px: 1 px minder dan de achtergrond-afbeelding, zodat de zwarte pixel aan de buitenkant daarvan altijd zichtbaar is, ongeacht of ik padding of zo gebruik.

De middelste kolom zet ik gewoon normaal neer. Omdat de kolommen links en rechts zijn gefloat, komt de inhoud van de middelste kolom netjes tussen de linker- en rechterkolom in te staan.

Toch moet ik de middelste kolom wel 'n padding geven ter breedte van linker- en rechterkolom. Anders wordt de inhoud van de middelste kolom onder de linker- of rechterkolom gezet zodra die eindigen. Ik maak die padding iets breder dan nodig is, zodat ik gelijk wat ruimte heb tussen buitenkant van de middelste kolom en de inhoud daarvan: 240 px.

Als dit onduidelijk is, geef div#links en div#rechts dan even 'n border, dan zie je duidelijker hoe groot die in werkelijkheid zijn. Je vergist je snel omdat de achtergrondkleur helemaal niets te maken heeft met de feitelijke grootte van de linker- en rechterkolom.

De footer ten slotte moet ik clear: both meegeven. De footer komt netjes onder de middelste kolom te staan, want die is niet gefloat. Maar als de middelste kolom korter is dan de linker- en rechterkolom, dan wordt de inhoud van de footer ook tussen de gefloate linker- en rechterkolom neergezet. clear: both voorkomt dat: alles wordt nu onder de gefloate divs neergezet.

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

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" />

Deze regel 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).

Deze regel 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.

<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 dat 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 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; background: white;

Tekstkleur zwart en achtergrond wit.

Hoewel dit de standaardkleuren zijn, geef ik ze toch toch op. Ik wil zeker weten dat het niet-gebruikte deel van de body wit is, zodat goed te zien is dat dit niet wordt gebruikt. Daarom geef ik de achtergrondkleur op.

Sommige mensen hebben zelf de tekstkleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu alleen de achtergrondkleur verander, maar niet de tekstkleur, 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 tekstkleur geen van beide.

#header

Het element met id="header": de header.

height: 8.5em;

Hoogte in em, zodat die meegroeit als de lettergrootte wordt veranderd.

border-bottom: black solid 1px;

Randje aan de onderkant.

text-align: center;

Tekst centreren.

color: black;

Tekstkleur zwart.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de tekstkleur, 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 tekstkleur geen van beide.

Ik heb dit ook al bij de body opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: yellow;

Achtergrond geel maken.

h1

'n <h1> wordt gebruikt om de belangrijkste titel van de pagina weer te geven. Belangrijk voor zoekmachines en mensen die speciale programma's zoals spraakbrowsers gebruiken. Ik gebruik de <h1> om die reden, en het uiterlijk verander ik vervolgens met css. Want het uiterlijk maakt niets uit voor wat het is: het blijft 'n <h1>, al zou ik 'm groen en geel verven en 1 px klein maken.

Ik reken 'm hier tot de essentiële code vanwege het verhaal over de marge hieronder.

margin: 0; padding: 0.5em 0 0;

'n <h1> heeft van zichzelf een marge aan boven- en onderkant. Dat is hier 'n probleem, omdat de marge aan de bovenkant boven div#header uitkomt. Verticale marges worden nogal apart behandeld: als er twee verticale marges zijn, 'wint' de grootste marge en de andere vervalt. div#header heeft geen marge aan de bovenkant, deze <h1> wel, dus deze wint. En een marge heeft geen achtergrond, dus er ontstaat bovenaan een kier waardoorheen je de kleur van de pagina ziet.

Dit is trouwens niet in alle browsers zo, in sommige krijg je geen marge aan de bovenkant te zien. Om alle problemen op te lossen zet ik de marge gewoon op 0. En om toch 'n kleine afstand tot de bovenkant van het venster van de browser te krijgen gebruik ik padding: die krijgt wel de kleur van de achtergrond.

De drie waarden bij padding worden gelezen in de volgorde boven - rechts - onder. Omdat er geen waarde voor links is ingevuld, wordt voor links automatisch dezelfde waarde als voor rechts genomen: 0. Alleen aan de bovenkant heb ik dus wat padding, verder niet.

font-size: 1.8em;

Iets kleiner dan de standaardmaat voor 'n <h1>. Als maateenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

a#skipper

De link met id="skipper". Deze link linkt naar 'n anker aan het begin van de middelste kolom, waar normaal genomen de echte inhoud van de pagina zal beginnen.

In de html is de volgorde van de code header - linkerkolom - rechterkolom - middelste kolom. Iemand met bijvoorbeeld 'n spraakbrowser moet dus eerst door 'n oerwoud van links en dergelijke voor de eigenlijke inhoud wordt bereikt. Door nu helemaal aan het begin van de html zo'n kleine extra link neer te zetten, kan iemand gelijk naar de eigenlijke inhoud.

position: absolute;

Nu kan ik de link neerzetten waar ik wil. Ik gebruik 'n absolute positie zodat de lay-out van de rest van de pagina niet wordt beïnvloed.

Er wordt gepositioneerd ten opzichte van het eerste ouder-element met een positie. Omdat dat er hier niet is, wordt gepositioneerd ten opzichte van het venster van de browser.

left: -1000px;

Ver buiten het scherm neerzetten. Nu is de link onzichtbaar, maar voor 'n spraakbrowser en dergelijke maakt dat niets uit, want die kijkt naar de html. En daar staat de link gewoon bovenaan.

a#skipper:focus, a#skipper:active

Als de link met id="skipper" focus heeft of actief is. Actief wil zeggen dat je de muisknop ingedrukt houdt op de link, focus wil zeggen dat je er met de Tab-toets naartoe bent gegaan of de link op 'n andere manier hebt geselecteerd. Omdat Internet Explorer 6 en 7 foutief active behandelen alsof het focus is, moet ik beide gebruiken.

Hierboven wordt uitgelegd waar deze link voor is. Normaal genomen staat deze link buiten het scherm. Daarom hebben mensen die, bijvoorbeeld vanwege 'n handicap, de Tab-toets gebruiken om van link naar link te gaan er niets aan, want ze zien hem niet.

Door de link zichtbaar te maken als de link focus heeft of actief is, heeft iedereen er iets aan. (Overigens is dit niet alleen voor gehandicapten handig: ik gebruik zelf ook meestal de Tab-toets in plaats van de muis. Veel makkelijker en sneller.)

left: 20px; top: 20px;

De buiten het scherm geparkeerde link op het scherm zetten.

background: black; color: white; border: red solid 1px;

Een witte letter op een zwarte achtergrond, met 'n rode rand. Dat zou behoorlijk moeten opvallen...

h2

Kopregels van iets minder belang.

font-size: 1.2em;

Iets kleinere letter dan standaard is bij een <h2>. Als maateenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

#header h2

De <h2>'s binnen het element met id="header".

margin: 0;

Van zichzelf heeft 'n <h2> 'n marge aan boven- en onderkant. Die kan ik hier niet gebruiken, weg ermee.

#wrapper-1

Het element met id="wrapper-1". Dit is de div waarin de achtergrondkleur voor de middelste kolom en het achtergrondplaatje (en dus de kleur) voor de rechterkolom komen te staan.

Van zichzelf wordt een div even breed als het ouder-element of, als dat er niet is, het venster van de browser. Deze div wordt even breed als het venster van de browser.

Die eigenschap gebruik ik om er kleuren in te zetten. In feite kleur ik de hele pagina, maar omdat er later andere elementen overheen worden gezet, zie je dat niet. Alleen waar dat nodig is blijven de kleuren zichtbaar.

background: orange url(041-pics/rechts.gif) repeat-y right;

Achtergrond oranje maken. Omdat de div de hele breedte van het venster vult, wordt dus de hele pagina oranje (voor zover er niets overheen wordt gezet). Precies de bedoeling, want deze kleur gebruik ik voor de middelste kolom, de breedste.

Naast deze kleur zet ik helemaal rechts nog 'n achtergrond-afbeelding. Die achtergrondafbeelding is 'n plaatje van 220 px breed en 1 px hoog, helemaal roze. Het wordt alleen verticaal herhaald. Dit geeft de achtergrondkleur aan de rechterkolom.

Helemaal roze? Ik jok. De meest linkse pixel is zwart, waardoor je 'n zwart lijntje tussen middelste en rechterkolom krijgt.

Omdat 'n div automatisch de hoogte krijgt die nodig is voor wat er in staat, groeit de div mee met de hoogte van de pagina. En die hoogte wordt weer bepaald door de hoogte van de langste kolom. Deze div is dus altijd even hoog als de langste kolom. En daarmee is ook de achtergrondkleur van de middelste kolom altijd even hoog als de langste kolom, ongeacht hoeveel of hoe weinig er in de middelste kolom zelf staat.

Hetzelfde geldt voor de rechterkolom, want het achtergrondplaatje wordt over de volle hoogte van de div herhaald, ongeacht hoeveel er in de rechterkolom zelf staat.

Omdat het achtergrondplaatje 'wint' van de achtergrondkleur, zal het plaatje altijd zichtbaar zijn, en dus de achtergrondkleur van de rechterkolom ook.

#wrapper-2

Het element met id="wrapper-2". Dit is de div waarin de achtergrondkleur voor de linkerkolom komt te staan.

Van zichzelf wordt een div even breed als het ouder-element of, als dat er niet is, het venster van de browser. Deze div wordt even breed als het venster van de browser.

Die eigenschap gebruik ik om er het achtergrondplaatje met de kleur van de linkerkolom in te zetten.

background: url(041-pics/links.gif) repeat-y;

Achtergrond-afbeelding in de div zetten. Die achtergrondafbeelding is 'n plaatje van 220 px breed en 1 px hoog, helemaal groen. Het wordt alleen verticaal herhaald. Dit geeft de achtergrondkleur aan de rechterkolom.

De meest rechts pixel is zwart, waardoor 'n zwarte afscheiding tussen middelste en linkerkolom ontstaat.

Omdat 'n div automatisch de hoogte krijgt die nodig is voor wat er in staat, groeit de div mee met de hoogte van de pagina. En die hoogte wordt weer bepaald door de hoogte van de langste kolom. Deze div is dus altijd even hoog als de langste kolom. En omdat het achtergrondplaatje wordt herhaald over de volle hoogte van de div, is ook de achtergrondkleur van de linkerkolom altijd even hoog als de langste kolom, ongeacht hoeveel of hoe weinig er in de linkerkolom zelf staat.

#links h2, #rechts h2

Alle <h2>'s binnen de elementen met id="links" en id="rechts". Dat zijn de linker- en rechterkolom.

text-align: center;

<h2>'s zijn blok-elementen, die kan ik niet centreren met text-align. De text-align geldt voor de inhoud van de <h2>, de tekst binnen de <h2>, niet voor de <h2> zelf. text-align is bedoeld om inline-elementen zoals tekst horizontaal te centreren.

Als je de <h2>'s 'n achtergrondkleurtje zou geven, zou je zien dat deze helemaal niet gecentreerd staan, maar de volle breedte van de div waar ze in staan vullen, zoals 'n blok-element automatisch hoort te doen.

#links p

De paragrafen binnen het element met id="links". Dat is de linkerkolom.

padding: 0 20px 0 5px;

Dit wordt gelezen in de volgorde boven - rechts - onder - links.

Boven en onder geen padding, links 5 px en rechts 20 px. Dit is gewoon 'n kwestie van smaak en leesbaarheid. (Hmm, leesbaarheid? Met zulke kleuren? Ga je mond spoelen!)

#rechts

Het element met id="rechts". De div waar de daadwerkelijke inhoud van de rechterkolom in staat. Zoals je ziet staat hier helemaal niets over de achtergrondkleur, dat is al geregeld in wrapper-1. Daardoor kan ik hier probleemloos dingen als float gebruiken.

float: right;

Zet zo hoog mogelijk en dan zover mogelijk naar rechts neer. Aan de rechterkant van het venster dus, gelijk onder de header.

width: 219px;

Breedte van de rechterkolom. De achtergrond-afbeelding die voor de kleur zorgt is 220 px breed. Maar omdat die 'n zwarte 'border' van 1 px heeft, zorg ik dat die zwarte pixel altijd vrij blijft, ongeacht padding of andere instellingen.

#rechts p

De paragrafen binnen het element met id="rechts". Dat is de rechterkolom.

padding: 0 5px 0 20px;

Dit wordt gelezen in de volgorde boven - rechts - onder - links.

Boven en onder geen padding, rechts 5 px en links 20 px. Dit is gewoon 'n kwestie van smaak en leesbaarheid.

#midden

Het element met id="midden". De middelste kolom, waar de eigenlijke inhoud van de pagina in komt te staan.

padding: 0 240px;

Omdat div#links en div#rechts beide zijn gefloat, wordt de inhoud van deze div op de vrije ruimte tussen div#links en div#rechts neergezet. Als die vrije ruimte op is, wordt doorgegaan ónder div#links en div#rechts, dus onder de linker- en rechterkolom. Dat is natuurlijk niet de bedoeling.

Omdat er maar twee waarden zijn ingevuld bij deze padding (boven en rechts) worden voor onder en links dezelfde waarden genomen als voor boven en rechts. Hier staat dus eigenlijk 0 240px 0 240px in de volgorde boven - rechts - onder - links.

Boven en onder geen padding, links en rechts 240 px. Dat is genoeg voor de breedte van de kolom (219 px) en 'n ruimte tussen de zijkant van div#midden en de inhoud daarvan.

#midden h2

De <h2>'s binnen het element met id="midden". Dat is de middelste kolom. Ik reken het hier tot de essentiële code vanwege het verhaal hieronder.

margin-top: 0; padding-top: 17px;

Dit probleempje speelt niet bij de gefloate divs, maar wel bij deze niet-gefloate div.

Een <h2> heeft van zichzelf een marge aan boven- en onderkant. Die marge steekt boven div#midden uit, vreemd genoeg. En 'n marge heeft geen achtergrond, dus dat levert 'n kier op waardoor je de kleur van de pagina ziet. Bij sommige browsers wordt die kier juist in z'n geheel oranje. Hoe dan ook: in alle gevallen wordt de lay-out enthousiast vernacheld.

De marge haal ik dus weg. Maar ik wil toch wat afstand hebben tot de bovenkant van div#midden. Dat kan met padding: die krijgt wel 'n achtergrond.

#footer h2

De <h2>'s binnen het element met id="footer".

margin: 5px 0;

Van zichzelf heeft 'n <h2> 'n marge aan boven- en onderkant. Die vind ik hier te groot.

Omdat hier alleen maar waarden voor boven en rechts zijn ingevuld, krijgen onder en links automatisch dezelfde waarden. Hier staat dus eigenlijk 5px 0 5px 0 in de volgorde boven - rechts - onder - links. Rechts en links geen marge, boven en onder 5 px, dat is iets minder dan de standaardwaarde.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

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:

Getest in

Laatst gecontroleerd op 1 november 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 30 november 2009. 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.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, Jaws 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. Jaws 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 bij Opmerkingen.

Dit voorbeeld is niet getest op geschiktheid voor mobiele apparaten (hier worden geen laptop/notebook/netbook en dergelijke mee bedoeld, want die gedragen zich als een gewone desktopcomputer). Er wordt in veel voorbeelden css en/of html gebruikt, waar niet elk mobiel apparaat mee uit de voeten zal kunnen. En lang niet alles is geschikt voor schermen met een breedte van minder dan 800 px.

Dingen die problemen zouden kunnen opleveren, zijn onder andere een te grote breedte, het gebruik van (te veel) afbeeldingen en/of css en html die niet (volledig) wordt ondersteund, zoals :hover, float en position.

Onder Opmerkingen staat mogelijk nog wat meer over de geschiktheid van dit voorbeeld voor mobiele apparaten.

(Terzijde: de site zelf is zeker niet geschikt voor kleine mobieltjes. Dat gaat ook niet veranderen. Ik kan me namelijk niet voorstellen dat iemand zo masochistisch is 'n uitleg van tientallen schermen op 'n klein mobieltje te gaan lezen. Voor de site zelf is een minimale breedte van 800 px vereist.)

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

26 september 2008:

Nieuw opgenomen.

30 maart 2009:

Tekst aangepast aan de nieuw verschenen Internet Explorer 8. De code is hetzelfde gebleven.

1 maart 2010:

Fout bij Opmerkingen over het eventueel beperken van de maximumbreedte verbeterd. Niet alleen de middelste kolom, maar de hele pagina moet in dat geval in een extra div komen te staan.

18 november 2010:

Vanwege toegankelijkheid bij body achtergrondkleur toegevoegd en op andere plaatsen tekstkleur. Het waarom staat bij de beschrijving van de code.

1 november 2011

Bij Bekende problemen stukje over zoomen toegevoegd.

Bekende problemen

Alle browsers

Tekst kan probleemloos tot 200% vergroot worden. Als je echter erg veel inzoomt (vergroot), houd je met drie kolommen naast elkaar in de middelste kolom heel weinig ruimte over.

Ik neem echter aan dat mensen die zoveel moeten inzoomen, monitors hebben die breed genoeg zijn om dit probleem te voorkomen, omdat dit op heel veel sites zal spelen.