Skip links en inhoudsopgave

Laatst aangepast: 9 januari 2012

Schaalbare inhoudsopgave met voorlooppunten

Korte omschrijving

Inhoudsopgave met voorlooppunten (stippellijntjes). De lijntjes vullen automatisch de ruimte tussen tekst en paginanummer, ook bij een andere lettergrootte en, behalve in Internet Explorer 7, ook bij zoomen.

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

Elke ingang in de inhoud staat, met bijbehorend paginanummer, in een eigen <p>. Aan de onderkant heeft die paragraaf een gestippelde border: de stippellijn. Omdat een paragraaf normaal genomen, en ook in dit voorbeeld, automatisch de hoogte krijgt die nodig is om de inhoud weer te kunnen geven, zal deze border altijd aan de onderkant van de paragraaf staan, dus onder alle tekst en paginanummers.

De tekst staat links in een span. Deze span heeft een achtergrondkleur die hetzelfde is als de kleur van de pagina. De span is relatief gepositioneerd en wordt iets omlaag gezet, waardoor de achtergrondkleur over de stippeltjes komt te staan. Onder de tekst zijn nu dus geen stippeltjes te zien.

Het paginanummer staat ook in een span, die absoluut is gepositioneerd aan de rechterkant van de paragraaf. Ook deze span heeft een achtergrondkleur die hetzelfde is als de kleur van de pagina en wordt iets omlaag gezet, waardoor ook onder het paginanummer geen stippeltjes zijn te zien.

Om te voorkomen dat een langere tekst over het paginanummer heen zou komen te staan, heeft de paragraaf rechts een padding.

De breedte van de <p> is gebaseerd op de ingang die het meest inspringt. Dat is de tweede regel van een sub-onderwerp zoals het woord 'documentatie' bij pagina 11.

Het naar voren uitsteken van kopjes en dergelijke wordt bereikt door een text-indent te geven aan de <p>. Hierdoor komt de eerste regel links van de <p> te staan, maar tweede en latere regels niet. Hoe groter de text-indent, hoe verder de eerste regel naar links staat.

Als de letters worden vergroot en er op meer plaatsen tweede of latere regels ontstaan, vallen deze niet meer onder de text-indent, want deze geldt alleen voor de eerste regel, en springen dus in. Onderstaande afbeelding verduidelijkt dit hopelijk.

Deel van inhoudsopgave met maten en dergelijke

Dan zijn er nogal wat kleine correcties nodig. Zo mogen de paginanummers geen text-indent hebben. 'Uur 20' moet 'n iets grotere text-indent krijgen dan 'Uur 1', omdat er een cijfer meer in staat. Dat soort dingen moet even worden uitgevogeld, maar daarna is het vrij makkelijk om de inhoud zolang te maken als je wilt.

Alle effecten als vet en cursief zijn gewoon verkregen door het gebruik van css. Ik weet dat 't niet allemaal even fraai is, maar 't ging me erom de mogelijkheden te laten zien.

Internet Explorer 6 heeft natuurlijk 'n traditie van bugs en de standaard om zeep helpen hoog te houden, dus daar is wat eigen css voor nodig. Helemaal volledig werkt het dan nog niet, maar wel acceptabel.

Beschrijving van code en css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<style type="text/css">

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

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

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


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

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body 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: 130%;

Dit is 'n veel grotere letter dan standaard. Ik doe dat omdat ik in dit voorbeeld wat tekst wil hebben die niet op één regel past.

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.3em; zou hetzelfde moeten zijn als font-size: 130%;), 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;

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.

background: #ff9;

Achtergrondkleurtje van de pagina.

div

De div waar alles in staat. Er is maar één div op deze pagina, dus 'n id of class is niet nodig.

Normaal genomen gebruik ik zo'n div waar alles in staat alleen maar om alles te centreren of zo. Dat doe ik hier ook, maar ik gebruik het ook om de breedte op te geven. Als ik de breedte bij opgeef, de paragraaf die rondom elke regel tekst met paginanumm<p> er staat, is dat veel lastiger vanwege de text-indent en dergelijke die daar worden gebruikt.

position: relative; left: 75px;

Normaal genomen centreer je zo'n blok-element gewoon met margin: 0 auto;. Maar hier moet ik een correctie aanbrengen. Ik kan namelijk deze div niet even breed maken als de volledige inhoudsopgave. De text-indent die ik bij <p> opgeef komt namelijk niet alleen voor de paragraaf te staan, maar ook voor deze div.

Als ik de div gewoon horizontaal centreer, steekt de tekst er dus aan de linkerkant uit en komt de inhoudsopgave te veel naar links te staan. Door de div 75 px naar rechts op te schuiven komt de inhoudsopgave zo'n beetje horizontaal in het midden te staan.

width: 520px;

Dit is de breedte waarbinnen precies de smalste tekst (het woord 'documentatie') en het paginanummer passen (zie schermafdruk met maten en dergelijke).

Een blok-element zal normaal genomen automatisch dezelfde breedte krijgen als z'n ouder. Dat geldt dus ook voor de paragrafen die binnen deze div staan. De text-indent bij die paragrafen komt vóór de paragraaf te staan, en ook voor deze div. Die text-indent moet dus aan de voorkant bij de breedte worden opgeteld. Samen met de correcties hierboven staat de hele handel dan toch ongeveer horizontaal in het midden.

margin: 0 auto;

Omdat geen waarde is ingevuld voor onder en links, krijgen deze automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links. Boven en onder geen marge, rechts en links auto oftewel evenveel oftewel: horizontaal gecentreerd.

Deze manier van horizontaal centreren van een blok-element werkt alleen maar als het te centreren blok-element een breedte heeft.

Normaal genomen is dit voldoende om te centreren, maar in dit bijzondere geval zijn nog wat correcties nodig, die hierboven staan beschreven.

p

Alle paragrafen. Omdat op deze pagina alleen maar paragrafen staan die bij de inhoud horen, is geen class nodig.

Elke ingang in de inhoud staat, met het bijbehorende paginanummer, in een eigen <p>.

position: relative;

Om kinderen van de paragraaf te kunnen positioneren ten opzichte van de paragraaf heeft de paragraaf zelf 'n positie nodig, ook al vul ik daar verder helemaal niets bij in.

margin: 0;

Een paragraaf heeft van zichzelf 'n marge aan boven- en onderkant. Die wil ik hier niet hebben.

border-bottom: dotted black 1px;

Een gestippelde rand aan de onderkant van de paragraaf. Dit is de stippellijn die je ziet. Omdat de onderkant van de paragraaf altijd beneden alle tekst staat, ongeacht hoeveel regels dat zijn, zal de stippellijn altijd onderaan staan. Precies de bedoeling.

Omdat een paragraaf een blok-element is krijgt deze automatisch dezelfde breedte als z'n ouder. Dat is hier <div>, die een breedte van 520 px. heeft. De gestippelde rand aan de onderkant krijgt dus ook deze breedte.

Door nu de tekst en het paginanummer een achtergrondkleur te geven en iets omlaag te zetten, wordt de rand onder de tekst en het paginanummer verborgen en ziedaar: een stippellijn tussen tekst en paginanummer, ongeacht hoeveel regels tekst er staan of hoe groot de afstand tussen tekst en paginanummer is.

padding-right: 120px;

De paginanummers worden aan de rechterkant neergezet met behulp van 'n absolute positie. Om te voorkomen dat langere tekst over de paginanummers heen zou komen te staan, wordt rechts een padding opgegeven. Als een langere tekst binnen deze padding terecht zou komen, wordt hij op de volgende regel neergezet. Hierdoor komt rechts een vrije ruimte van 120 px breed waarin de paginanummers kunnen staan.

text-indent: -30px;

Als een ingang niet op één regel past, wil ik de tweede regel iets laten inspringen. Dat kan echter niet. Maar ik kan wel de eerste regel iets naar voren laten uitsteken, en dat geeft precies hetzelfde effect.

Alle tekst van de inhoud wordt binnen de paragraaf gezet, die maar 520 px breed is. Vervolgens zet ik de eerste regel van elke ingang 30 px terug naar links. Omdat dit alleen maar voor de bovenste regel van een paragraaf geldt, staat deze dus 30 px meer naar links dan eventuele volgende regels.

Andere onderdelen van de inhoud zoals kopjes en zo staan meer naar links, dat regel ik later door ze 'n grotere text-indent te geven.

span.tekst

Alle spans met class="tekst". Elke tekst-ingang binnen de inhoud staat in een span met deze class, omdat een aantal instellingen voor alle ingangen hetzelfde is. Die kan ik hier in één keer opgeven voor allemaal.

position: relative;

Om de span, en dus de tekst, iets te kunnen verplaatsen.

top: 6px;

Door de span, en dus de tekst, 6 px omlaag te zetten, komt de achtergrondkleur van de span over de gestippelde rand van de <p> te staan, waardoor deze niet zichtbaar is onder de tekst.

De kleine opening achter de tekst komt omdat daar een vaste spatie &nbsp; staat. Deze zorgt ervoor dat er zonder css toch ruimte is tussen tekst en paginanummer. Dat is belangrijk voor zoekmachines, spraakbrowsers, en dergelijke Je zou die ruimte ook kunnen krijgen door 'n kleine padding aan de rechterkant te geven, maar die wordt niet gezien zonder css. 'n Spatie wordt altijd gezien.

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: #ff9;

Door de span 'n achtergrondkleurtje te geven kan de stippellijn van de <p> worden verborgen. De achtergrondkleur is hetzelfde als de kleur van de pagina, zodat deze onzichtbaar is. Dit is typisch weer 'n geval van 'je wordt genept waar je bij staat', maar 't werkt prima.

span.pagina

De spans met class="pagina". De spans waar de paginanummers in staan.

position: absolute;

Om op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een positie heeft, dat is hier <p>.

right: 0;

Helemaal rechts zetten. Hierdoor komen de tekens aan de rechterkant van het paginanummer, dus het laatste teken, netjes onder elkaar te staan. Als een nummer breder is, komt dit gewoon iets verder naar binnen te staan, maar de rechterkant blijft netjes rechts uitgelijnd.

bottom: -6px;

Iets omlaag zetten. Hierdoor komt de achtergrondkleur van de span, en dus van het paginanummer, over de gestippelde rand van de <p> te staan, zodat je deze niet ziet onder het paginanummer.

padding-left: 3px;

Onder een padding loopt de achtergrondkleur gewoon door. Door een kleine padding links te geven wordt nog 'n klein stukje van de gestippelde rand van de <p> verstopt, waardoor 'n kleine afstand tussen stippellijn en paginanummer ontstaat.

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: #ff9;

Door de span 'n achtergrondkleurtje te geven kan de stippellijn van de <p> worden verborgen. De achtergrondkleur is hetzelfde als de kleur van de pagina, zodat deze onzichtbaar is.

text-indent: 0;

Omdat het paginanummer ook op de eerste regel van de <p> staat, geldt de text-indent ook voor de paginanummers, waardoor deze schots en scheef komen te staan. Dus uitschakelen.

font-variant: normal;

Sommige ingangen in de inhoud hebben een afwijkende variant, zoals kleinkapitaal. De paginanummers moeten altijd gewoon worden weergegeven.

font-weight: normal;

Sommige ingangen in de inhoud zijn vet. De paginanummers moeten altijd gewoon worden weergegeven.

p.inleiding

De paragrafen met class="inleiding". Dat zijn de teksten 'Inleiding' aan het begin en 'Register' aan het einde.

Door deze instellingen op te geven bij de <p> en niet bij de span voor de tekst, kan ik ook marges en dergelijke opgeven.

margin: 30px 0;

Omdat er geen waarde is ingevuld voor onder en links, krijgen deze automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 30px 0 30px 0 in de volgorde boven - rechts - onder - links. Boven en onder 'n kleine marge, links en rechts niet.

font-variant: small-caps;

Weergeven in kleinkapitaal.

font-weight: bold;

Vet.

text-indent: -3em;

Eerste regel iets voor de paragraaf zetten. Hierdoor lijkt het voor het oog alsof een eventuele tweede en volgende regel iets inspringen.

Als eenheid gebruik ik em, zodat de verticale uitlijning min of meer intact blijft bij een andere lettergrootte.

p.deel, p#deel-3

De paragrafen met class="deel" en de paragraaf met id="deel-3". Dit zijn de paragrafen waar de teksten die beginnen met 'Deel I' en 'Deel III' in staan. Omdat er voor p#deel-3 wat afwijkende instellingen nodig zijn, heeft die 'n eigen id.

Door deze instellingen op te geven bij de <p> en niet bij de span voor de tekst, kan ik ook marges en dergelijke opgeven.

margin: 30px 0 5px;

Omdat geen waarde voor links is ingevuld, krijgt die automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 30px 0 5px 0 in de volgorde boven - rechts - onder - links. Boven 30 px marge, onder 5px en links en rechts niets.

font-size: 1.2em;

Iets grotere letter.

font-weight: bold;

Vet.

text-indent: -5.5em;

Eerste regel iets voor de paragraaf zetten. Hierdoor lijkt het voor het oog alsof een eventuele tweede en volgende regel iets inspringen.

Als eenheid gebruik ik em, zodat de verticale uitlijning min of meer intact blijft bij een andere lettergrootte.

p.deel span.pagina, p#deel-3 span.pagina

De spans met class="pagina" binnen de paragrafen met class="deel", en de spans met class="pagina" binnen de paragraaf met id="deel-3".

Dit zijn de spans waar de paginanummers in staan die horen bij de teksten die beginnen met 'Deel I' en 'Deel III'.

font-size: 0.87em;

In deze paragrafen is de lettergrootte verhoogd bij p.deel, p#deel-3. Omdat ik de paginanummers allemaal even groot wil hebben, moet ik die hier dus weer verkleinen. De lettergrootte wordt geërfd vanuit de ouder, dus deze grootte is ten opzichte van de lettergrootte in p.deel of p#deel-3.

p#deel-3

De paragraaf met id="deel-3". Dit is de paragraaf waarin de tekst staat die begint met 'Deel III'. De meeste instellingen zijn al opgegeven bij p.deel, p#deel-3, hier staan alleen de afwijkende.

text-indent: -6em;

De bij p.deel, p#deel-3 opgegeven text-indent van 5.5 em is goed voor de tekst die begint met 'Deel I'. Maar de tekst in deze paragraaf begint met 'Deel III', en dat is net iets langer. Om de tekst verticaal goed uitgelijnd te krijgen, moet de text-indent dus iets groter worden.

p.uur, p.uur-2

De paragrafen met class="uur" en class="uur-2". Hierin staan de kopjes die beginnen met 'Uur'.

Door deze instellingen op te geven bij de <p> en niet bij de span voor de tekst, kan ik ook marges en dergelijke opgeven.

margin: 20px 0 10px;

Omdat geen waarde is ingevuld voor links, krijgt die automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 20px 0 10px 0 in de volgorde boven - rechts - onder - links. Boven 20 px marge, onder 10 px en links en rechts geen.

font-variant: small-caps;

Weergeven in kleinkapitaal.

font-weight: bold;

Vet.

text-indent: -6em;

Eerste regel iets voor de paragraaf zetten. Hierdoor lijkt het voor het oog alsof een eventuele tweede en volgende regel iets inspringen.

Als eenheid gebruik ik em, zodat de verticale uitlijning min of meer intact blijft bij een andere lettergrootte.

p.uur-2

De paragrafen met class="uur-2". Dit zijn de paragrafen waar de kopjes in staan die beginnen met 'Uur', gevolgd door een getal van 2 cijfers. In dit voorbeeld is dat alleen 'Uur 20'.

text-indent: -6.6em;

Bij p.uur, p.uur-2 is een text-indent opgegeven die goed is voor een getal dat uit één cijfer bestaat. Een getal dat uit twee cijfers bestaat is iets breder en moet dus iets meer naar links worden neergezet om een goede verticale uitlijning te krijgen.

Als eenheid gebruik ik em, zodat de verticale uitlijning min of meer intact blijft bij een andere lettergrootte.

p.kopje

De paragrafen met class="kopje". Hierin staan de onderafdelingen van de hoofdstukken.

text-indent: -3em;

Eerste regel iets voor de paragraaf zetten. Hierdoor lijkt het voor het oog alsof een eventuele tweede en volgende regel iets inspringen.

Als eenheid gebruik ik em, zodat de verticale uitlijning min of meer intact blijft bij een andere lettergrootte.

span.extra

De spans met class="extra". Dit zijn de spans waarbinnen de cursieve tekst staat. Deze spans hebben ook de class "pagina", zodat ook de algemene instellingen voor de tekst die bij span.pagina staan gelden. Hier staan alleen de afwijkende instellingen.

font-style: italic;

Cursief weergeven. Niet dat dat nou echt mooi is in deze inhoudsopgave, maar ik wil laten zien dat 't mogelijk is.

p.bijlage

De paragrafen met class="bijlage". Dat is er hier maar eentje, de paragraaf waar de tekst in staat die begint met, hoe verrassend, 'Bijlage'.

text-indent: -7.8em;

Eerste regel iets voor de paragraaf zetten. Hierdoor lijkt het voor het oog alsof een eventuele tweede en volgende regel iets inspringen.

Als eenheid gebruik ik em, zodat de verticale uitlijning min of meer intact blijft bij een andere lettergrootte.

p.sub

De paragrafen met class="sub". Hierbinnen staan de drie regels gelijk onder 'Modules installeren onder'.

font-size: 0.7em;

Kleinere letter. Ik geef dit op bij de paragraaf en niet bij de span waar de tekst in staat, zodat ook de paginanummers kleiner worden. Erg mooi is dit niet, maar ik wilde laten zien dat het mogelijk is.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div {left: -30px; padding-left: 190px;} span.pagina {float: right; position: relative; top: -0.9em;} p.sub {font-size: 1em;} </style> <![endif]-->

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

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

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

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

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

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

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

div

De div waar alles in staat. Er is maar één div op deze pagina, dus 'n id of class is niet nodig.

left: -30px;

Hieronder geef ik deze div 'n padding aan de linkerkant, omdat anders alles wat met text-indent is neergezet onzichtbaar wordt. Daardoor staat de div horizontaal niet meer in het midden, dat corrigeer ik hier.

padding-left: 190px;

Zonder deze padding verdwijnt alles wat met text-indent is neergezet.

span.pagina

De spans met class="pagina". Dit zijn de spans waarbinnen de paginanummers staan.

float: right;

Zo hoog mogelijk zetten en dan zover mogelijk naar rechts. Hierdoor worden de paginanummers aan de rechterkant uitgelijnd.

position: relative;

In de algemene css zijn deze spans absoluut gepositioneerd. In Internet Explorer 6 verdwijnen ze dan volledig, om wat voor reden dan ook. Relatief positioneren in combinatie met de float hierboven werkt wel.

top: -0.9em;

Omdat relatief wordt gepositioneerd in plaats van absoluut, zoals in de algemene css voor alle browsers, kan ik de bottom: -6px uit de algemene css niet gebruiken.

p.sub

De paragrafen met class="sub". Hierbinnen staan de drie regels gelijk onder 'Modules installeren onder'.

font-size: 1em;

In de algemene css krijgen deze 'n iets kleinere letter. Dat is voor Internet Explorer 6 reden om 'n wild feest aan te richten met de paginanummers: ze worden niet op de goede plaats gezet.

Dat zal best op te lossen zijn, maar ik heb daar geen zin in voor deze browser, dus ik geef de gewone, normale lettergrootte, dan is 't ook opgelost.

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 9 januari 2012.

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

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

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

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

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

25 mei 2009:

Nieuw opgenomen.

30 januari 2011:

Op diverse plaatsen color: black; opgenomen vanwege de toegankelijkheid. De reden waarom en zo staat op de betreffende plaatsen.

9 januari 2012:

Bij Bekende problemen stukje over zoomen toegevoegd onder Alle browsers behalve Internet Explorer 7.

Bekende problemen

Internet Explorer 6

Internet Explorer 7

Bij zoomen, zowel in- als uitzoomen, wordt het 'n complete puinhoop. Er verdwijnen ook echt stukken tekst. Dit ligt aan de ongelooflijke brakke uitvoering van de zoomfunctie in Internet Explorer 7, er is niets aan te doen. Als je alleen de lettergrootte verandert, gaat het wel goed. In Internet Explorer 8 werkt zoomen wel goed.

Alle browsers behalve Internet Explorer 7

Bij inzoomen (vergroten) kan aan de linkerkant van de pagina tekst verdwijnen. Dit kan op een 1024 px breed scherm gebeuren vanaf ongeveer 150%. Toen ik dit voorbeeld maakte, waren de toegankelijkheidseisen nog niet zo streng en was dit voldoende voor de hoogste toegankelijkheid.

Persoonlijk vind ik een vergroting van 150% ook nog steeds genoeg, maar de richtlijnen zeggen dat het 200% moet zijn.

(Dit probleem speelt alleen niet in Internet Explorer 7 omdat die zombie de lay-out op geheel eigen wijze weet te molesteren bij zoomen.)