Uitleg verticaal centreren van pagina of blok-element met onbekende hoogte

Laatst aangepast:

Verticaal centreren van pagina of blok-element met onbekende hoogte

Korte omschrijving

Verticaal centreren van pagina of blok-element met onbekende hoogte. Als de hoogte verandert, blijft de pagina of het blok-element verticaal gecentreerd.

Gele blok

Pagina. Verticaal gecentreerd in het venster van de browser, ongeacht de hoogte.

Tekst links en blauwe blok

Gewoon wat tekst en 'n div. Als de hoeveelheid tekst toeneemt, wordt de pagina hoger, maar deze blijft verticaal gecentreerd.

Witte blok

De tekst binnen dit blok blijft verticaal gecentreerd binnen dit blok, ook als de hoeveelheid tekst toe- of afneemt.

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

Deze manier van verticaal centreren werkt bij een onbekende, wisselende hoogte. Als de hoogte van de inhoud verandert, wordt de pagina of het blok-element weer opnieuw gecentreerd. Voor het centreren van andere elementen zie positioneren.

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 (Kubuntu). Daarbij is vooral gebruik gemaakt van Komodo Edit, 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

Met (x)html en css kun je niet simpel de grootte van het venster van de browser meten, zoals bijvoorbeeld met JavaScript kan. Voor de breedte is dat geen probleem: tenzij je iets anders opgeeft wordt standaard het hele venster gebruikt. Als de regel vol is wordt gewoon naar de volgende regel gegaan, en als het venster vol is verschijnt er 'n scrollbalk en kun je naar beneden gaan.

Als je 'n breedte aan de pagina geeft, kun je ook simpel horizontaal centreren.

Verticaal centreren is veel lastiger, want daar is geen simpele opdracht voor. Vooral als de pagina of het blok geen vaste hoogte heeft, wordt het ingewikkelder. Ik weet niet hoe hoog het venster is, of mensen toolbars hebben geïnstalleerd, en dan weet ik tot overmaat van ramp ook de hoogte van de inhoud niet. Ik moet dus iets van onbekende hoogte verticaal centreren in iets van onbekende hoogte.

De oplossing valt in twee delen uiteen. Eén oplossing werkt in Internet Explorer 6 en 7, de andere in alle andere browsers, inclusief Internet Explorer 8.

Alle moderne browsers, met uitzondering van Internet Explorer 6 en 7, kunnen een blok-element weergeven alsof het een tabel is, of een cel uit een tabel. Als ik nu van de pagina of het blok-element een tabel maak, en ik zet daar een tabelcel in, dan kan ik vertical-align gebruiken.

De tabel maak ik 100% hoog, dus die staat dan per definitie gecentreerd in het ouder-element, omdat hij dat helemaal vult. De cel binnen die tabel wordt niet hoger dan nodig is voor de inhoud, net zoals 'n normale cel uit een tabel. En met vertical-align zet ik de hele handel verticaal gecentreerd in het ouder-element, ongeacht de hoogte van de cel of het ouder-element.

Als er geen ouder-element is voor de tabel, dus de hele pagina staat binnen die tabel, dan is het ouder-element automatisch het venster van de browser en staat dus de hele pagina verticaal gecentreerd.

Voor Internet Explorer 6 en 7 werkt dit niet, omdat die geen divs en dergelijke weer kunnen geven als een tabel. Voor deze browsers zorg ik eerst, net als voor de andere browsers, dat de volle hoogte van het venster van de browser wordt gebruikt.

Nu zet ik een div op 50% van de hoogte van het venster van de browser, oftewel in het midden. Binnen deze div zet ik de div met de inhoud, en die plaats ik weer 50% omhoog. Omdat de div met de inhoud automatisch de hoogte van de inhoud aanneemt, komt 50% van de inhoud dus boven het midden te staan, oftewel: verticaal gecentreerd.

Er zijn nog wel wat aanpassingen nodig vanwege de rarigheden die Internet Explorer 6 en 7 verder nog hebben, maar dit is het basisidee.

Voor de verticaal gecentreerde div is het iets makkelijker, omdat die al binnen een ander blok-element staat. Maar het principe is precies hetzelfde.

Eh, 'n tabel voor lay-out??? Daar staat inmiddels toch zeven jaar mosselen duiken in de Waddenzee op? En nu moet ik dat opeens gebruiken?

Ja.

Een tabel is inderdaad bedoeld voor tabulaire gegevens, zoals een kalender. Een tabel voor lay-out maakt je pagina uiterst ontoegankelijk voor screenreaders en zoekmachines en dergelijke. En tabellen, zeker geneste tabellen, zijn uiterst moeilijk te onderhouden. Maar het gaat dan om een html-tabel, en dit is een css-tabel.

De eigenlijke inhoud van de pagina bestaat nog steeds uit doodgewone divs en dergelijke. De tabel-css wordt alleen voor de lay-out gebruikt, niet om de inhoud van de pagina zelf in een tabel te zetten. Dus de hierboven aangegeven problemen zullen zich niet voordoen.

Een tabelcel heeft één heel groot voordeel: de inhoud is simpel verticaal te centreren, zelfs als je de hoogte niet weet. Daarom wordt hier van een css-tabelcel gebruik gemaakt.

div#middelste en div#centreer-div-middel, die als tabelcel worden weergegeven, staan beide in een div die met display: table; 'tabel-eigenschappen' krijgen: div#buitenste en div#centreer-div-buiten.

Als de tabelcel niet binnen een tabel staat, werkt de truc met het verticaal centreren niet. Maar afgezien van dat verticaal centreren hoeft een css-tabelcel, anders dan bij een html-tabel, niet binnen een tabel te staan. Als de css-tabelcel niet binnen een tabel staat, maakt de browser maakt er automatisch een tabel omheen. Daar zie je verder niets van.

En omdat er toch een div nodig is om als tabel te dienen, kan daar gelijk wat css aan worden gegeven. Slaan we twee vliegen in één klap. (Wat ik nog steeds een bijzonder bloeddorstige uitdrukking vind, maar dat terzijde.)

Overigens wordt door de browser ook automatisch een rij aangemaakt, waarbinnen de cel komt te staan. Ook daar zie je niets van. Anders dan bij de tabel staat er in de html geen div of zo die voor de rij wordt gebruikt, omdat dat geen nut heeft. Voor het verticaal centreren is geen rij nodig, dus het heeft geen nut een extra element aan de html toe te voegen.

Overigens blijft het een goede gewoonte om tabellen alleen voor tabulaire gegevens te gebruiken, omdat de css anders al snel even rommelig en moeilijk te onderhouden wordt als een html-tabel. Maar om verticaal te centreren is zo'n enkele css-tabelcel heel handig.

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

<!--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;
	}

html

height: 100%;

Om enig houvast te hebben ten opzichte waarvan ik ga centreren, wil ik het hele venster van de browser gebruiken.

Als je 'n externe stylesheet gebruikt, loop je tegen 'n apart probleem aan bij html. Als je zonder meer html {height: 100%;} 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 {height: 100%;} moet worden gebruikt html 'n id geven, bijvoorbeeld "ie-volle-hoogte". In je html wordt de regel dan iets als <html id="volle-hoogte" 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-volle-hoogte {...}. Nu is dit alleen geldig voor de pagina's die bij html de juiste id hebben staan.

margin: 0; padding: 0;

Om kleine verschillen tussen browsers te voorkomen.

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.

height: 100%;

Volledige venster van de browser gebruiken.

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.

div#buitenste

De div met id="buitenste". Dit is de buitenste div waarbinnen de hele pagina komt te staan. In dit voorbeeld staat in deze pagina niet zoveel, maar dat maakt voor het principe niets uit.

display: table;

Deze div moet worden neergezet alsof het een tabel is. Omdat Internet Explorer 6 en 7 dit niet kennen, zullen die gewoon deze regel negeren.

Als de div#middelste, die display: table-cell; krijgt, niet binnen een tabel staat, werkt de truc met het verticaal centreren niet.

height: 100%;

Vul het hele venster van de browser, dan heb ik 'n houvast om dadelijk het midden te kunnen bepalen.

div#middelste

De div met id="middelste".

display: table-cell;

Deze div moet worden weergegeven als de cel van een tabel, zodat we vertical-align kunnen gebruiken. Internet Explorer 6 en 7 kennen dit niet en zullen het dus weer negeren. Deze cel zal automatisch de hoogte van de inhoud aannemen.

vertical-align: middle;

Hiermee wordt de inhoud van de cel middenin het venster van de browser gezet, oftewel: verticaal gecentreerd.

Dit werkt alleen maar als de tabel-cel binnen een ouder met display: table; staat. Dat is hier div#buitenste.

div#content

De div met id="content".

Deze div is alleen nodig voor Internet Explorer 6 en 7, zie bij Speciaal voor Internet Explorer 6 en 7. Maar omdat hij er toch staat gebruik ik hem gelijk voor wat andere dingen. Internet Explorer 6 en 7 gebruiken deze div om de inhoud te centreren.

position: relative;

Internet Explorer 6 en 7 gaan deze div 50% omhoog zetten, en daarvoor is position nodig.

width: 750px;

Dit is niet echt nodig, maar ik kan nu de pagina goed zichtbaar maken voor het voorbeeld.

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;

Om de pagina zichtbaar te maken in dit voorbeeld.

padding: 10px;

Om de inhoud 'n eindje van de rand af te zetten.

div#content p

Alle paragrafen binnen de div met id="content".

width: 400px;

Niet al te breed, dan heb ik ruimte om er nog 'n div naast te zetten (de witte div).

div#tweede-div

De div met id="tweede-div". Gewoon 'n div om te laten zien dat je gewoon divs en dergelijke kunt gebruiken, en dat die meetellen voor het centreren.

width: 350px;

Niet al te breed, dan past er nog 'n div naast.

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: #0ff;

Kleurtje om 'm zichtbaar te maken.

div#centreer-div-buiten

De div met id="centreer-div-buiten".

Dit is de div aan de rechterkant, de witte. De uiteindelijke inhoud hiervan wordt verticaal gecentreerd.

display: table;

Deze div moet worden neergezet alsof het een tabel is. Omdat Internet Explorer 6 en 7 dit niet kennen, zullen die gewoon deze regel negeren.

Als div#centreer-div-middel, die display: table-cell; krijgt, niet binnen een tabel staat, werkt de truc met het verticaal centreren niet.

position: absolute;

Om 'm rechts in het venster van de browser te kunnen zetten. En voor Internet Explorer 6 en 7 moet hij 'n position hebben om de divs hierbinnen straks te kunnen positioneren.

Er wordt gepositioneerd ten opzichte van de eerste ouder met een positie, dat is hier div#content.

right: 20px; top: 25px;

20 px vanaf de rechterkant, 25 px vanaf de bovenkant.

width: 180px; height: 340px;

180 px breed, 340 px hoog.

border: black solid 1px;

Randje om de witte div duidelijk zichtbaar te maken.

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

Om 'm zichtbaar te maken.

div#centreer-div-middel

De div met id="centreer-div-middel".

display: table-cell;

Door deze div als een tabelcel weer te geven, kan ik hem in 't midden zetten, oftewel verticaal centreren, met vertical-align. Internet Explorer 6 en 7 kennen dit niet en negeren het dus.

vertical-align: middle;

Hiermee wordt de inhoud van de cel middenin het venster van de browser gezet, oftewel: verticaal gecentreerd.

Dit werkt alleen maar als de tabel-cel binnen een ouder met display: table; staat. Dat is hier div#centreer-div-buiten.

div#centreer-div-content

De div met id="centreer-div-content".

Deze div is alleen nodig voor Internet Explorer 6 en 7, zie bij Speciaal voor Internet Explorer 6 en 7.

padding: 5px;

Omdat hij er toch staat gebruik ik hem om de tekst wat afstand van de rand te laten houden.

h1

Paginatitel. Ik gebruik hier een <h1> omdat zoekmachines daar meer gewicht aan toekennen dan aan gewone tekst. De lettergrootte ga ik wel aanpassen, want die is te groot. Deze pagina gaat over centreren, dus dit is geen misleiding van de zoekmachine.

margin-left: 20px;

Iets van de linkerzijkant zetten.

font-size: 1.3em;

Letters iets kleiner maken, zodat 't ook in 'n kleiner venster nog enigszins past. Ik gebruik em als eenheid zodat ook gebruikers van Internet Explorer de lettergrootte kunnen aanpassen.

h2

Een minder belangrijke kopregel. Een zoekmachine vindt tekst in een <h>belangrijker dan gewone tekst, en omdat de inhoud van deze <h2> over het centreren van tekst gaat, gebruik ik hier terecht een <h2> en is het geen misleiding van de zoekmachine om hoger te komen.

display: inline;

Een <h> is een blok-element, dus begint op een nieuwe regel. Dat wil ik hier niet. En ik haal gelijk de marge voor en na de <h2> weg met deze opdracht.

font-size: 1.3em;

Iets kleinere letter dan standaard. Ik gebruik em als eenheid, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen aanpassen.

Speciaal voor Internet Explorer 6 en 7

<!--[if (IE 6) | (IE 7)]> <style type="text/css"> div#buitenste {position: relative;} div#middelste {position: absolute; top: 50%;} div#content {top: -50%;} div#centreer-div-middel {position: absolute; top: 50%;} div#centreer-div-content {position: relative; top: -50%;} </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 en 7 (het verticale streepje betekent 'of'), 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) | (IE 7)]> <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 en 7 in. De css voor Internet Explorer 6 en 7 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) | (IE 7)]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

div#buitenste

De div met id="buitenste". Dit is de buitenste div waarbinnen de hele pagina komt te staan. In dit voorbeeld staat in deze pagina niet zoveel, maar dat maakt voor het principe niets uit.

position: relative;

Omdat de divs hierbinnen gepositioneerd moeten worden ten opzichte van deze div, moet deze 'n position krijgen, ook al vul ik die verder niet in, anders kan dat niet.

div#middelste

De div met id="middelste".

position: absolute;

Om op 'n bepaalde plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder met 'n positie, dat is hier div#buitenste.

top: 50%;

Zet deze div halverwege, dus verticaal gecentreerd, div#buitenste.

div#content

De div met id="content"

top: -50%;

En als ik deze div, die de eigenlijke inhoud bevat, nu weer 50% omhoog zet, staat de inhoud voor de helft boven het midden, oftewel: verticaal gecentreerd. Omdat de div zijn hoogte automatisch aanpast aan de hoeveelheid inhoud, wordt met -50% altijd de helft van de inhoud naar boven verplaatst.

div#centreer-div-middel

De div met id="centreer-div-middel". Deze staat in de witte div met de zwarte rand.

position: absolute;

Er wordt gepositioneerd ten opzichte van de eerste ouder met een positie. Dat is hier div#centreer-div-buiten, de witte div met de zwarte rand.

top: 50%;

Zet de inhoud halverwege de hoogte van de div#centreer-div-buiten, dus precies in het midden.

div#centreer-div-content

De div met id="centreer-div-content".

position: relative; top: -50%;

Deze div bevat de eigenlijke inhoud. De hoogte past zich automatisch aan de hoeveelheid inhoud aan. Als we dus de bovenkant de helft naar boven verplaatsen, zal de helft van de inhoud boven het midden komen te staan. Oftewel: verticaal gecentreerd binnen de buitenste div.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#buitenste {height: auto;} </style> <![endif]-->

Dit geldt alleen voor Internet Explorer 6. Uitleg bij Speciaal voor Internet Explorer 6 en 7.

div#buitenste

De div met id="buitenste", dus eigenlijk de pagina.

height: auto;

Zonder deze toevoeging krijgt Internet Explorer 6 'n scrollbar rechts, zodra de inhoud niet het hele venster van de browser vult. Maar sommige andere browsers hebben height: 100% wel nodig, dus ik zet 't in 'n stukje code alleen voor Internet Explorer 6.

Speciaal voor Internet Explorer 7

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

Deze code wordt alleen door Internet Explorer 7 gelezen. Uitleg bij Speciaal voor Internet Explorer 6 en 7.

html {overflow: hidden;}

Als het venster van de browser iets wordt verkleind, verschijnt rechts gelijk 'n forse scrollbar. Met deze opdracht voorkom je dat. Nadeel is dat als de inhoud niet in het venster van de browser past, deze ook niet meer te zien is, want de scrollbar staat uit. Als de hoeveelheid inhoud zo sterk varieert, kun je beter niet verticaal centreren, of je moet 'n vaste hoogte nemen, wat elders wordt uitgelegd.

Als je met 'n externe stylesheet werkt, loop je bij html tegen 'n apart probleem aan. Uitleg bij Als je 'n externe stylehseet gebruikt...

De code aanpassen aan je eigen ontwerp

  • Als je dit voorbeeld gaat aanpassen voor je eigen site, houdt het dan in eerste instantie zo eenvoudig mogelijk. Ga vooral geen details invullen.
  • Gebruik vooral geen FrontPage, Publisher of Word (alle drie van Microsoft). Deze programma's maken niet-standaard code die alleen goed te bekijken is in Internet Explorer. In alle andere browsers zie je grotendeels bagger, áls je al iets ziet.

    Publisher en Word zijn niet bedoeld om websites mee te maken. FrontPage is zwaar verouderd en wordt niet meer onderhouden door Microsoft. Als je beslist iets van Microsoft wilt gebruiken, schaf dan (voor honderden euro's) een nieuwer programma aan, dat zich wel aan de standaarden houdt.

    Je kunt natuurlijk ook een goed gratis programma gebruiken. Links naar dat soort programma's vind je op de pagina met links onder Gereedschap → wysiwyg-editor.

    Maar het allerbeste is om gewoon zelf html, css, enz. te leren, omdat zelfs het allerbeste programma het nog steeds zwaar verliest van 'n op de juiste manier met de hand gemaakte pagina.

  • Het beste kun je 'n site maken in Firefox. Als je 'n site maakt in Firefox, Opera, Safari of Google Chrome, is er 'n hele grote kans dat hij in alle browsers werkt. Als je in Internet Explorer begint, is dat niet zo. Dat heeft te maken met historische oorzaken (als je geïnteresseerd bent: zoek maar naar 'boxmodel' en 'probleem' of zo op internet, of naar 'quirks mode'). Ik geef de voorkeur aan Firefox, omdat er zoveel extensies (uitbreidingen) voor bestaan. De twee belangrijkste voor 't maken van sites zijn Web Developer en Firebug, maar er bestaan nog tientallen andere.
  • Het allereerste dat je moet invoeren is het doctype, vóór welke andere code dan ook. Een lay-out met een missend of onvolledig doctype ziet er totaal anders uit dan een lay-out met een geldig doctype. Wát er anders is, verschilt ook nog 'ns tussen de diverse browsers. Als je klaar bent en dan nog 'ns 'n doctype gaat invoeren, weet je vrijwel zeker dat je van voren af aan kunt beginnen met de lay-out.

    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.

  • Gebruik een 'strict' doctype of het doctype voor html5. Deze zijn bedoeld voor nieuwe sites. Het transitional doctype is bedoeld voor al bestaande sites, niet voor nieuwe. Het transitional doctype staat talloze tags toe, die in html5 zijn verboden. Deze tags worden al zo'n tien jaar afgeraden. Het transitional doctype is echt alleen bedoeld om de puinhoop van vroeger, toen niet volgens standaarden werd gewerkt, enigszins te herstellen.

    Het strict doctype staat verouderde tags niet toe. Daardoor kan met 'n strict doctype, of het nu html of xhtml is, probleemloos worden overgestapt naar html5. Met een transitional doctype en het gebruik van afgekeurde tags kun je niet overstappen naar html5. Je moet dan eerst alle verouderde tags verwijderen, wat echt ontzettend veel werk kan zijn.

  • Als tweede voer je de charset in. Het beste kun je utf-8 nemen. Als je later van charset verandert, loop je 'n grote kans dat je alle aparte tekens als letters met accenten weer opnieuw moet gaan invoeren.
  • Test vanaf het allereerste begin in zoveel mogelijk verschillende browsers in 'n aantal resoluties (schermgroottes). Onder het kopje Getest in kun je in deze uitleg vinden waar ikzelf op test. Ook van Internet Explorer kun je meerdere versies naast elkaar draaien. Je kunt daarvoor zoeken op internet en op de pagina met links staan onder de kopjes Gereedschap → Meerdere versies van Internet Explorer draaien en Gereedschap → Weergave testen 'n aantal links die daar ook bij kunnen helpen.
  • Voor alle voorbeelden geldt: breng veranderingen stapsgewijs aan. Als je bijvoorbeeld foto's wilt laten weergeven, begin dan alleen met het veranderen van de namen van de foto's, zodat je eigen foto's worden weergegeven. Maakt niet uit als de maten niet kloppen en de teksten fout zijn. Als dat werkt, ga dan bijvoorbeeld de maten aanpassen. Dan de teksten. En controleer steeds of alles nog goed werkt.
  • Als het om een lay-out of iets dergelijks gaat: zorg eerst dat header, kolommen, footer, menu, en dergelijke staan en bewegen zoals je wilt, en ga dan pas details binnen die blokken invullen. In eerste instantie gebruik je dus bijvoorbeeld 'n leeg blok voor waar uiteindelijk het menu komt te staan.

    Als je begint met allerlei details, is er 'n heel grote kans dat die de werking van de blokken gaan verstoren. Bouw eerst het huis, en ga dan pas de kamers inrichten. Als de blokken eenmaal werken zoals je wilt, zul je het gelijk merken als 'n toegevoegd detail als tekst of 'n afbeelding iets gaat storen. Daarvoor moet je natuurlijk wel regelmatig controleren in verschillende browsers of alles nog wel goed werkt.

    Je kunt de blokken tijdens het aanpassen opvullen met bijvoorbeeld <br />1<br />2<br />3 enz., tot ze de juiste hoogte hebben. Het is handig om aan het einde even iets toe te voegen als 'laatste', zodat je zeker weet dat er niet drie regels onderaan naar 't virtuele walhalla zijn verhuisd.

    Om de breedte te vullen kun je het best 'n kort woord als 'huis' duizend keer of zo herhalen. Ook hier is het handig om aan 't einde (en hier ook aan 't begin) 'n herkenningsteken te maken, zodat je zeker weet dat je de hele tekst ziet.

  • Zolang je in grotere dingen zoals 'n lay-out aan 't wijzigen bent, zou ik je aanraden de verschillende delen een achtergrondkleur te geven. Je ziet dan goed waar 'n deel precies staat.
  • Als je instellingen verandert in de style, doe er dan maar 1, hooguit 2 tegelijk. Als je er 17 tegelijk verandert moet je niet verbaasd zijn als je niet weet wat er is gebeurd. En als je 't niet meer terug kunt draaien.
  • Marges, padding en border worden bij de hoogte en breedte van de inhoud opgeteld. Hier worden vaak fouten mee gemaakt. Als je bijvoorbeeld in een lay-out 'n border toevoegt aan een van de 'hoofdvakken' (header, footer, kolommen), dan wordt deze er dus bij opgeteld. Bij 'n border van 2 px rondom de linkerkolom wordt deze dus plotseling 4 px breder (2 aan beide kanten), en 4 px hoger. Zoiets kan je hele lay-out verstoren, omdat iets net te breed of te hoog wordt. Je moet dan elders iets 4 px kleiner maken. Dat zal vaak zo zijn: als je één maat verandert, zul je vaak ook 'n andere moeten aanpassen.
  • In plaats van px kun je ook andere maten gebruiken, met name em. Voordeel van em is dat het door de gebruiker kan worden vergroot en verkleind, ook in Internet Explorer (andere browsers hebben meer mogelijkheden op dit gebied). Nadeel is dat het de lay-out sneller kan verstoren dan bijvoorbeeld px. Dit moet je gewoon van geval tot geval bekijken.
  • Valideren, valideren, valideren en dan voor 't slapen gaan nog 'ns valideren.

    Valiwie???

    Valideren is het controleren van je (x)html en css op 'n hele serie fouten. Computers zijn daar vaak veel beter in dan mensen. Als je 300 keer <h2> hebt gebruikt en 299 keer </h2> vindt 'n computer die ene missende </h2> zonder enig probleem. Jij ook wel, maar daarna ben je misschien wel aan vakantie toe.

    Je kunt je css en (x)html zowel valideren als 't online staat, als wanneer 't nog in je computer staat.

    (x)html kun je valideren op: validator.w3.org

    css kun je valideren op: jigsaw.w3.org/css-validator

    Valideren kan helpen om gekmakende fouten te vinden. Valid code garandeert ook dat de weergave in verschillende browsers (vrijwel) hetzelfde is. En valid code is over twintig jaar ook nog te bekijken.

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:

  • Gebruik altijd een alt-beschrijving bij een afbeelding. De alt-tekst is wat wordt gebruikt als afbeeldingen niet kunnen worden gezien (dat geldt dus ook voor zoekmachines). Als je iets wilt laten zien als je over de afbeelding hovert, gebruik daar dan het title-attribuut voor, niet de alt-beschrijving.
  • Gebruik bij een link een title, waarin je omschrijft waar de link naar toe leidt.
  • Accesskeys (sneltoetsen) kun je beter niet gebruiken, deze gaven te veel problemen omdat ze vaak dubbelop zijn met sneltoetsen voor de browser of andere al gebruikte sneltoetsen. Bovendien is voor de gebruiker meestal niet duidelijk welke toetsen het zijn.

    In de komende html5 waren ze eerst niet toegestaan, maar inmiddels lijkt het erop dat ze toch worden toegestaan, maar op 'n andere manier dan in html 4.01. Ik ga ze zelf pas weer gebruiken als duidelijk is hoe ze gaan werken, en als ze beter zijn uitgedacht dan in html 4.01 het geval was, want bij een goede toepassing is het op zich een heel goed idee.

  • Met behulp van de Tab-toets (of op 'n soortgelijke manier) kun je in de meeste browsers door de links lopen. Elke tab brengt je één link verder, Shift+Tab één link terug. Met behulp van tabindex kun je de volgorde aangeven waarin de Tab-toets werkt. Zonder tabindex wordt de volgorde van de code aangehouden, maar soms is een andere volgorde logischer.
  • In het verleden werd vaak aangeraden de volgorde van de code aan te passen. Een menu bijvoorbeeld kon in de html onderaan worden gezet, terwijl het op het scherm met behulp van css bovenaan werd gezet. Inmiddels zijn screenreaders en dergelijke zo verbeterd, dat dit niet meer wordt aangeraden. De volgorde in de html kan tegenwoordig beter hetzelfde zijn als op het scherm, omdat het anders juist verwarrend kan werken.

    Een andere mogelijkheid is een zogenaamde skip-link: een link die je buiten het scherm parkeert met behulp van css, zodat hij normaal genomen niet te zien is. Zo'n link is wel zichtbaar te maken in speciale programma's zoals spraakbrowsers. Die link staat boven het menu en linkt naar de inhoud van de pagina, zodat mensen met één klik het hele menu kunnen passeren.

  • Van oorsprong was html een taal om wetenschappelijke documenten weer te geven, pas later is hij gebruikt voor lay-out. Maar daar is hij dus eigenlijk nooit voor bedoeld geweest. Het gebruiken van html voor lay-out leidt tot enorme problemen voor gehandicapten en tot een lage plaats in zoekmachines.

    De html hoort alleen inhoud te bevatten, lay-out doe je met behulp van css. Die css moet in een extern stylesheet staan of, als hij alleen voor één bepaalde pagina van toepassing is, in de head van die pagina. Zoekmachines zijn ook niet dol op een oerwoud van inline-stijlen (dat zijn stijlen in de tag zelf: <div style="...">.)

  • Breng een logische structuur aan in je document. Gebruik een <h1> voor de belangrijkste kop, een <h2> voor een subkop, enz. Spraakbrowsers en dergelijke kunnen van header naar header springen. En een zoekmachine gaat ervan uit dat <h1> belangrijke tekst bevat.

    Dit geldt voor al dit soort structuurbepalende tags.

    Als een <h1> te grote letters geeft, maak daar dan met behulp van je css 'n kleinere letter van, maar blijf die <h1> gewoon gebruiken. Op dezelfde manier kun je al dit soort dingen oplossen.

  • Een table is fantastisch, maar alleen als die wordt gebruikt om een echte tabel weer te geven, niet als hij voor opmaak wordt misbruikt. In het verleden is dat op grote schaal gebeurd bij gebrek aan andere mogelijkheden. Een tabel is, als je niet heel erg goed oplet, volstrekt ontoegankelijk voor gehandicapten en zoekmachines. Het lezen van een tabel is ongeveer te vergelijken met het lezen van een krant van links naar rechts: niet per kolom, maar per regel. Dat gaat dus alleen maar goed bij een echte tabel zoals een spreadsheet. In alle andere gevallen garandeert 'n tabel 'n lagere plaats in een zoekmachine.
  • Frames zijn een volstrekt verouderde techniek, die heel veel nadelen met zich meebrengt. Deze zijn hier netjes op een rijtje gezet: Webrichtlijnen. iframes hebben voor een deel dezelfde nadelen.

    Als je 'n stuk code vaak wilt gebruiken, zoals 'n menu dat op elke pagina hetzelfde is, include dat dan met PHP of SSI. Dan ziet iedereen (ook 'n zoekmachines dus!) alles als één pagina in plaats van als los zand aan elkaar hangende teksten.

  • Geef de taal van het document aan, en bij woorden en dergelijke die afwijken van die taal de afwijkende taal met behulp van lang="..". Ik doe dat op mijn eigen site maar af en toe, omdat de tekst (en vooral de code) een mengsel is van Engels, Nederlands en eigengemaakte namen. Dit soort teksten is gewoon niet goed in te delen in een taal.
  • Gebruik de tag <abbr> bij afkortingen. Doe dat de eerste keer op een pagina samen met de title-eigenschap: <abbr title="en dergelijke">e.d.</abbr>. Daarna kun je op dezelfde pagina volstaan met <abbr>e.d.</abbr>. Doe je dit niet, dan is er 'n grote kans dat 'n spraakbrowser e.d. uit gaat spreken als Ed, en 'n zoekmachine kan er ook geen chocola van maken.
  • De spider van 'n zoekmachine, spraakbrowsers, en dergelijke kunnen geen plaatjes 'lezen'. Het is soms verbazingwekkend om te zien hoe veel, of eigenlijk: hoe weinig tekst er overblijft op een pagina als de plaatjes worden weggehaald. Het zelfde geldt voor die fantastisch mooie flash-pagina's, als daarbij geen voorzieningen voor dit soort programma's zijn aangebracht.

    Op Linux kun je met Lynx kijken hoe je pagina eruitziet zonder plaatjes en dergelijke, als echt alleen de tekst overblijft. Een installatie-programma voor Lynx op Windows is te vinden op csant.info/lynx.

    In Windows kun je ook het gratis programma WebbIE installeren. WebbIE laat de pagina zien, zoals een spraakbrowser en dergelijke hem zien. WebbIE is te downloaden vanaf www.webbie.org.uk. Nog een soortgelijk gratis programma is WebFormator.

    De Firefox-extensie Web Developer heeft de mogelijkheid om 'n pagina te bekijken zonder css en/of afbeeldingen.

    Tenslotte kun je je pagina nog online laten controleren op 'n behoorlijk aantal sites. Ik noem er hier enkele. Helaas zijn ze bijna allemaal Engelstalig.

    colorfilter.wickline.org Laat zien hoe een kleurenblinde de site ziet.

    contentquality.com Test op toegankelijkheid. Heel overzichtelijk.

    wave.webaim.org Deze laat grafisch zien hoe de toegankelijkheid is. Heel erg duidelijk, maar bij grotere pagina's wordt 't al snel erg chaotisch.

    Omdat ze de uitleg van de icoontjes heel goed hebben weten te verstoppen, geef ik de link daarvan ook maar gelijk: wave.webaim.org/icons

    www.webrichtlijnen.nl/toetsen De enige Nederlandstalige site. Test op toegankelijkheid.

Specifiek voor dit voorbeeld

Deze constructie heeft geen invloed op de toegankelijkheid.

Getest in

Laatst gecontroleerd op 11 december 2012.

(Internet Explorer 6 is voor het laatst gecontroleerd op 11 april 2010 en Internet Explorer 7 en Safari voor Windows op 4 juli 2011. Op Internet Explorer 6 en 7 test ik niet meer, en Safari voor Windows wordt niet meer gemaakt. Maar omdat de code nauwelijks is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in deze browsers.)

Onder dit kopje staat alleen maar, hoe en waarin is getest. Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan hieronder bij Bekende problemen. Het is belangrijk dat te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Eventuele opmerkingen over de toegankelijkheid specifiek voor dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Dit voorbeeld is getest op de volgende systemen:

  • Windows XP:
    Firefox, Opera, Safari en Google Chrome in een resolutie van 1440x900.
    Internet Explorer 8 in de resoluties 800x600, 1024x768, 1280x1024 en 1440x900.
    Internet Explorer 7 in de resoluties 800x600, 1024x768 en 1280x1024.
  • Windows 7:
    Firefox, Opera, Safari, Google Chrome en Internet Explorer 9 in de resoluties 800x600, 1024x768 en 1280x1024.
  • OS X:
    Firefox, Opera, Safari en Google Chrome in de resolutie 1024x768.
  • Linux:
    Firefox, Opera en Google Chrome in de resoluties 800x600, 1024x768 en 1280x1024.
  • iPad met iOS 6.0.1 in een resolutie van 1024x768 (MC979NF):
    Safari (portret en landschap).
    Opera Mini (portret en landschap).
    Chrome for IOS (portret en landschap).
  • Android 4.0.3 in een resolutie van 1024x768 (CRESTA CTP888):
    Android browser, Opera Mobile, Firefox en Chrome voor mobiel (alles portret en landschap).
  • Android 2.3.6 in een resolutie van 320x240 (Samsung Galaxy Y GT-S5360):
    Android browser (portret en landschap).
    Opera Mobile (éénkolomsstand aan/uit, portret en landschap).
    Opera Mini (éénkolomsstand aan/uit, portret en landschap). Deze browser is een apart geval. De opgevraagde site wordt gedownload via de servers van Opera, waarbij het in zo'n klein venster normaal is dat (het grootste deel van) de lay-out wordt verwijderd. Daarom wordt bij deze browser alleen gekeken, of er geen content (tekst en dergelijke) verloren gaat.

Er is steeds getest met de laatste versie van de browsers op de hierboven genoemde controledatum, 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 resoluties groter dan 800x600 is ook in- en uitzoomen en - voor zover de browser dat kan - een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Er is getest met behulp van muis en toetsenbord, behalve op de iPad en Android, waar een touchscreen is gebruikt.

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 specifiek voor 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 'n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Android browser werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar eigenlijk geen beginnen aan.

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!)

Bekende problemen

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Opera op Windows

Als het venster van de browser wordt vergroot of verkleind, moet de pagina worden ververst voordat hij opnieuw gecentreerd staat.

Internet Explorer 7

  • Bij html staat speciaal voor Internet Explorer 7 overflow: hidden. Dat betekent dat wat niet in het venster van de browser past ook echt helemaal weg is. Eventueel kun je overflow: hidden weglaten, maar dan verschijnt 'n scrollbar als het venster van de browser kleiner is dan de maximaal mogelijke maat.
  • Bij in- en uitzoomen staat er niets meer verticaal in het midden. Dit komt door de slechte werking van de zoomfunctie in Internet Explorer 7: niets aan te doen. In Internet Explorer 8 werkt de zoomfunctie goed.

Wijzigingen

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

:

Nieuw opgenomen.

10 augustus 2008:

Bij Bekende problemen stukje over zoomen in Internet Explorer 7 toegevoegd.

6 april 2009:

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

4 juli 2011:

Op diverse plaatsen color: black; toegevoegd vanwege toegankelijkheid. Het waarom staat op de betreffende plaatsen in de Beschrijving van code en css.

11 december 2012:

  • Tig kleinere veranderingen in de tekst.
  • Bij Achterliggend idee uitleg over verschil tussen html-tabel en css-tabel toegevoegd.
  • Op de site stond de pagina niet verticaal gecentreerd, in de download wel. Hoe ik dat gemist kan hebben...