Laatst aangepast:

Verticaal centreren van pagina of blok-element met onbekende hoogte
Top

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.

Top

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

Top

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.

Top

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.

Top

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

Top

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

Top

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

Top

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

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.

Top

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.

Top

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.

Top

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.

Top

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.

Top

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

Top

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.

Top

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.

Top

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.

Top

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.

Top

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.

Top

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.

Top

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.

Top

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.

Top

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

Top

De code aanpassen aan je eigen ontwerp

Top

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

Deze constructie heeft geen invloed op de toegankelijkheid.

Top

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:

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

Top

Bekende problemen

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

Top

Opera op Windows

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

Top

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

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: