Skip links en inhoudsopgave

Laatst aangepast: .

Sitemap met twee verschillende lay-outs binnen één pagina.

Korte omschrijving

Het uiterlijk van de sitemap kan volledig worden veranderd door met behulp van SSI andere css te kiezen. Alles zit in één bestand.

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

Deze pagina is, zonder css, gewoon een serie geneste ongeordende lijsten. In de buitenste lijst staan de belangrijkste onderdelen van de site, in de eerste geneste lijst de onderverdeling daarvan, enz.

Dit is belangrijk, omdat de sitemap nu ook toegankelijk is voor spraakbrowsers en dergelijke. En voor zoekmachines, die ook geen enkele moeite hebben met lijsten, maar vaak wel met ingewikkelde JavaScript-constructies en dergelijke.

De gebruiker kan kiezen of hij css wil die de pagina geschikt maakt voor gebruik met een muis, of css die meer geschikt is voor gebruik met het toetsenbord. Afhankelijk van wat er wordt gekozen levert dat een van de volgende drie weergaven op:

Sitemap zonder css
Een stukje van de sitemap zonder css, dus zonder opmaak.

Sitemap met css voor de muis
Dezelfde sitemap met de css die voor de muis is bedoeld.

Sitemap met css voor gebruikers van het toetsenbord
Nogmaals dezelfde sitemap, nu met css voor gebruikers van het toetsenbord.

Op de middelste afbeelding hierboven wordt css gebruikt, die geschikt is voor gebruikers van de muis. Maar nogal wat mensen gebruiken de Tab-toets of een soortgelijke methode om van link naar link te gaan. Soms omdat ze geen muis kunnen gebruiken, maar ook vaak omdat de Tab-toets veel sneller werkt dan met de muis op een link klikken. (Hoewel je dat over die snelheid met 238 links niet meer voor alle links vol kunt houden...)

Voor mensen die het toetsenbord gebruiken, is een sitemap met deze css volstrekt ontoegankelijk (behalve in Opera). Daarom kun je kiezen voor css, die ervoor zorgt dat de hele sitemap gewoon is geopend en je met behulp van de Tab-toets van link naar link kunt gaan.

De css voor de muis en de css voor het toetsenbord zitten gewoon in dezelfde stylesheet. Er is ook maar één pagina met html. En toch kun je kiezen hoe de sitemap eruit moet zien.

De truc is het veranderen van de id bij de body.

Aan het begin van de eigenlijke inhoud van de pagina staat niet het normale <body>, maar

<!--#if expr="$QUERY_STRING == toetsenbord"--> <body id="toetsenbord"> <a id="naar-muis" href="lijst-096-dl.shtml" title="Werk je liever met de muis? Ga naar deze pagina">Werk je liever met de muis? Ga naar deze pagina</a> <!--#else --> <body id="muis"> <a id="naar-toetsenbord" href="lijst-096-dl.shtml?toetsenbord" title="Gebruik je liever toetsenbord dan muis? Ga naar deze pagina">Gebruik je liever toetsenbord dan muis? Ga naar deze pagina</a> <!--#endif -->

De eerste regel kijkt of in het adres van de pagina na het vraagteken 'toetsenbord' voorkomt. Het adres moet dus iets zijn als lijst-096-dl.shtml?toetsenbord. Als dat zo is, wordt de html gebruikt, die gelijk na de eerste regel staat:

<body id="toetsenbord"> <a id="naar-muis" href="lijst-096-dl.shtml" title="Werk je liever met de muis? Ga naar deze pagina">Werk je liever met de muis? Ga naar deze pagina</a>

Als het adres geen toetsenbord bevat (<!--#else -->), wordt de html gelijk onder <!--#else --> gebruikt:

<body id="muis"> <a id="naar-toetsenbord" href="lijst-096-dl.shtml?toetsenbord" title="Gebruik je liever toetsenbord dan muis? Ga naar deze pagina">Gebruik je liever toetsenbord dan muis? Ga naar deze pagina</a>

Dit wordt geheel op de server afgehandeld. Dat betekent dat de browser een gewone, volledig valide pagina met html krijgt te zien. Dat er in de 'echte' pagina twee <body>'s zijn, een doodzonde, blijft volledig verborgen voor de browser. De browser ziet alleen maar een <body> met een id van 'muis' of 'toetsenbord'.

Voor de links geldt hetzelfde: de browser ziet maar één van de twee links, omdat de server maar één van de twee links naar de browser verstuurt. Dat geeft de mogelijkheid om in het ene geval de pagina aan te roepen met ?toetsenbord in het adres, en in het andere geval zonder.

In het ene geval heb ik dus een normale pagina met <body id="muis">, in het andere geval met <body id="toetsenbord">. Ik hoef nu alleen maar de selectors in de css te beginnen met body#muis of body#toetsenbord, en afhankelijk van de id bij <body> werkt een regel css wel of niet.

Op deze manier kan ik dus exact dezelfde html volkomen van uiterlijk laten veranderen met behulp van css.

De css die is bedoeld voor gebruik met de muis, zorgt ervoor dat alleen de hoogste ingangen van de sitemap worden weergegeven. Elke ingang is een gewone link of gewone tekst, die in een eigen <li> staat.

Op de middelste afbeelding hierboven is te zien, dat 'Lay-out' is onderverdeeld in 'Gecentreerd' en 'Venstervullend'. Hiervoor staat binnen de <li> met 'Lay-out' weer een <ul>. Binnen deze <ul> staan, in dit geval, twee <li>'s: eentje voor 'Gecentreerd' en eentje voor 'Venstervullend'.

Normaal genomen is deze <ul> verborgen door hem links buiten het scherm te positioneren. Bij hoveren over de <li> met 'Lay-out' wordt de <ul> op het scherm gezet, en worden 'Gecentreerd' en 'Venstervullend' dus zichtbaar.

Binnen 'Gecentreerd' staat ook weer een <ul>, waarbinnen drie <li>'s staan voor 'Geen header', 'Meescrollende header' en 'Vaste header'. Binnen elk van deze <li>'s staat ook weer een <ul>.

Bij hoveren over de <li> met 'Lay-out' wordt de achtergrond hiervan wit en wordt het leesteken » zichtbaar om aan te geven, dat er een vervolg is.

Dit hele systeem van geneste <ul>'s herhaalt zich, zolang er onderverdelingen zijn. De <ul>'s worden steeds iets verder naar rechts zichtbaar.

De bovenliggende <li>'s van de ingang, waarover wordt gehoverd, blijven gedeeltelijk zichtbaar, omdat de achtergrond van de <li>'s enigszins doorzichtig is. Die doorzichtigheid wordt steeds iets minder, zodat de tekst leesbaar blijft.

Ook houden de bovenliggende <li>'s van de ingang, waarover wordt gehoverd, hun witte achtergrond. Hierdoor is goed te zien, binnen welke hogere categorie een bepaalde ingang valt.

Als je op de Tab-toets drukt als de css voor de muis wordt gebruikt, is de eerste link een link naar de pagina zelf, maar met als toevoeging aan de href ?toetsenbord. Deze eerste link is normaal genomen onzichtbaar: alleen als hij focus heeft, is hij zichtbaar. Nogmaals de Tab-toets indrukken doet hem weer verdwijnen. (Een link heeft focus als hij wordt gevolgd, wanneer je op Enter drukt. Normaal genomen staat er een kadertje rondom een link die focus heeft.)

Bij gebruik van de css voor het toetsenbord staat als eerste een link naar de weergave voor de muis, maar deze link is gewoon altijd zichtbaar.

De css voor gebruikers van het toetsenbord voorziet de diverse geneste <ul>'s en <li>'s van verschillende achtergronden, kadertjes, ronde hoeken, enz. Met behulp van kantlijnen, positioneren, en dergelijke worden ze op hun plaats gezet.

Verder zijn nog wat dingen toegevoegd als een stippellijntje onder tekst en bijbehorende links, zodat beter te zien is welke links bij welke tekst horen. Weinig opwindend allemaal.

Het basis-idee van beide lay-outs is niet zo ingewikkeld. Maar de uitwerking leverde nogal wat problemen op bij het voorkomen van dubbele kaders, niet goed aansluitende ronde hoeken, en dergelijke.

Verder moesten voor de technische hoogstandjes Internet Explorer 7 en 8 uiteraard allerlei aanpassingen worden gemaakt, want de meest simpele dingen die andere browsers al jaren kunnen, lukken niet in deze wonderen der techniek.

Voor deze twee heksenbrouwsels van Microsoft zijn de ronde hoeken weggelaten en is de doorzichtige achtergrond vervangen door doorzichtige plaatjes. Daarnaast waren nog wat aanpassingen in de css nodig.

In Internet Explorer 9 werkt alles wel zoals het hoort.

Problemen als je naar de sitemap teruggaat vanaf een andere pagina

In het voorbeeld zit achter elke link in de sitemap dezelfde pagina, die ik hier de 'achterliggende pagina' noem. Normaal genomen zal achter elke link iets anders zitten. Dat maakt voor het probleem niets uit, het probleem doet zich dan gewoon op álle achterliggende pagina's voor in plaats van alleen op deze ene.

Als je in de sitemap op een link linkt, ga je naar de achterliggende pagina. Op de site zit op die achterliggende pagina in de knop rechtsboven een link 'Terug naar voorbeeld' (in de download mist die link). Op de site ga je normaal genomen door het klikken op die link terug naar het voorbeeld.

In dit geval is die link om terug naar het voorbeeld te gaan uitgeschakeld en vervangen door een pop-up-venstertje, waarin staat dat je de Terug-toets van de browser of alt+← moet gebruiken om naar het voorbeeld terug te gaan.

Als je op de link 'Terug naar voorbeeld' klikt, zit daar op de site normaal genomen gewoon het adres van de pagina met het voorbeeld onder. De pagina wordt actief opnieuw aangeroepen via het adres in de link. Maar in dit geval werkt dat niet goed. Want naar welk voorbeeld wil je terug? Naar dat met de css voor de muis of naar dat met de css voor het toetsenbord?

De Terug-toets van de browser en de toetscombinatie alt+← kennen dat probleem niet. Elke browser houdt een geschiedenis van bezochte pagina's bij (tenzij dit is uitgeschakeld door de gebruiker). Door de Terug-toets van de browser of de toetscombinatie alt+← in te drukken, gaat de browser één pagina terug in de geschiedenis. Als je vanaf de sitemap naar de achterliggende pagina bent gegaan, ga je op die manier terug naar de sitemap, inclusief de juiste css.

Als ik altijd naar de juiste css terug wil gaan, wanneer ik op 'Terug naar voorbeeld' klik, zou ik de link op een of andere manier moeten laten weten, welke css wordt gebruikt.

Dat is ook de manier waarop de pagina met de sitemap dit 'weet'. In de sitemap zit een link met als adres lijst-096-dl.shtml of lijst-096-dl.shtml?toetsenbord, afhankelijk van de gekozen lay-out. Het deel achter het vraagteken in het adres, hier toetsenbord, heet de query-string.

Als de query-string bestaat uit toetsenbord, wordt de css voor het toetsenbord gebruikt, en anders de css voor de muis. Zoiets zou ik ook in de achterliggende pagina moeten inbouwen.

In principe kun je de achterliggende pagina op allerlei manieren laten weten, welke css is gebruikt. In principe kan op de achterliggende pagina dan de link worden aangepast, zodat als je op 'Terug naar voorbeeld' klikt, de juiste css wordt gebruikt.

Hier zitten echter nogal wat nadelen aan. Het is een beetje schieten met een kanon op een mug: een klein probleem wordt opgelost met een enorme berg extra code. Die bovendien ook nog 'ns op élke achterliggende pagina nodig is.

En er zit nog een ander heel groot nadeel aan. Als een pagina wordt weergegeven, wordt deze door de browser opgeslagen in de 'cache', tenzij de gebruiker dit heeft uitgeschakeld. Normaal genomen wordt een pagina niet opnieuw van de server opgehaald, maar uit de cache. Dit scheelt heel veel verkeer en het gaat veel sneller.

Maar om de link op de achterliggende pagina aan te passen, moet ik de pagina echt opnieuw laden. Dat herladen kun je forceren met iets als JavaScript, en bij één achterliggende kleine pagina is dat nog wel te overleven. Maar als je achter elk van de 238 links in de sitemap een andere grote pagina hebt zitten, maak je je niet populair als je de cache op die manier uitschakelt.

In dit geval is het beter om de link 'Terug naar voorbeeld' gewoon weg te laten. Vrijwel iedereen kent het gebruik van de Terug-toets (of alt+←), en dat werkt prima in dit geval. Als mensen terug willen naar de vorige pagina, zullen ze dat nu ook al vrijwel altijd op die manier doen.

Een andere mogelijkheid is om gewoon hetzelfde mechanisme als de browser te gebruiken. Met behulp van JavaScript kun je bij klikken op 'Terug naar voorbeeld' gewoon één stap teruggaan in de geschiedenis van de browser, net zoals bij de Terug-toets van de browser of alt+←. Dan ga je altijd terug naar exact de pagina waar je vandaan kwam. Als dat de sitemap was, ga je altijd terug naar de pagina met de juiste css.

Mensen die JavaScript uit hebben staan, kunnen dan nog steeds gewoon de Terug-toets of alt+← gebruiken. Je zou zelfs de link alleen kunnen laten verschijnen, als JavaScript aan staat.

Eventueel zou je ook in een (sessie-)cookie kunnen opslaan, welke css is gekozen. Dan maakt het helemaal niet meer uit, vanwaar je op de sitemap komt: de keuze wordt gewoon onthouden.

Overigens kun je ook álles uitvoeren met JavaScript, dus ook het kiezen van de css. Nadeel is alleen dat de gebruiker dat kan uitschakelen. SSI en PHP werken altijd, omdat die talen op de server worden uitgevoerd en niet in de browser van de gebruiker. En deze site gaat nou eenmaal niet over JavaScript...

(Terzijde: ik blijf zelf ook nog met 'n raadsel zitten, waar ik ook op internet niets over heb kunnen vinden. Kennelijk wordt van de achterliggende pagina hoe dan ook maar één versie in de cache opgeslagen. Ook als de achterliggende pagina met een andere query-string wordt opgeroepen, wordt toch de pagina uit de cache opgehaald en krijg je dus een 'oude' versie van de pagina te zien. Pas bij verversen van de pagina wordt een nieuwe versie getoond met de actuele query-string.

Als je dus terug wilt gaan naar de sitemap door de link aan te passen, loop je het risico dat je naar de verkeerde css teruggaat.

De pagina met de sitemap zelf wordt kennelijk wél in twee versies opgeslagen in de cache, want daar krijg ik wel de juiste css, afhankelijk van de inhoud van de query-string.

Ik kan maar één verschil bedenken: de pagina met de sitemap wordt vanuit de pagina zelf opnieuw aangeroepen als je andere css kiest, en de achterliggende pagina wordt 'van buitenaf' aangeroepen.

Overigens werkt dit in álle geteste browsers precies hetzelfde, dus mogelijk bestaat er wel een of andere standaard die dit voorschrijft, en die ik gewoon niet heb kunnen vinden.)

Alleen :hover of :hover, :focus en :active?

Dit hoofdstukje over :hover, :focus en active heeft alleen betrekking op de lay-out met css voor de muis.

Het eerste deel van deze tekst is voor alle voorbeelden met links en dergelijke hetzelfde, het laatste deel (onder het kopje Speciaal bij dit voorbeeld) is speciaal voor dit voorbeeld.

De meeste mensen openen 'n link door erop te klikken. Er is echter 'n tweede manier: met behulp van de Tab-toets (sommige browsers gebruiken andere toetsen, maar het principe is hetzelfde). Met behulp van de Tab-toets kun je van link naar link 'springen'. Op welke link je staat, wordt door alle browsers aangegeven met een of ander kadertje rondom de link.

De link met het kadertje eromheen heeft focus. Dat wil zeggen dat je die link volgt, als je op de Enter-toets drukt. In principe werkt dit precies hetzelfde als gewoon klikken op de link.

Als iemand geen muis wil of kan gebruiken, bijvoorbeeld door 'n handicap, is deze manier om 'n link te openen erg handig. Als de volgorde van de links in de code niet logisch is, kun je eventueel met behulp van tabindex 'n afwijkende volgorde van de links opgeven. De Tab-toets volgt dan die afwijkende volgorde.

Tot zover is er nauwelijks verschil tussen het gebruik van de Tab-toets of van de muis.

Als je echter extra dingen onder de link hebt gestopt, die pas gaan werken als je over de link hovert, is er wel 'n verschil. Je geeft dat aan met :hover: als je over de link hovert. Met de Tab-toets alleen kun je niet over 'n link hoveren. Dus als er bijvoorbeeld 'n pop-up wordt geopend, zul je die niet zien, als je de Tab-toets gebruikt om naar 'n link te gaan.

Om dit op te lossen kun je, op dezelfde manier als je :hover gebruikt, :focus gebruiken: als de link focus heeft. Dat is dus als er 'n kadertje rondom de link staat en de link wordt gevolgd bij het indrukken van Enter.

Door dus a:hover, a:focus {...} te gebruiken, opent bijvoorbeeld 'n pop-up ook, als je de Tab-toets gebruikt. Maar er zitten 'n paar adders onder het gras.

* Naast :hover en :focus is er nog :active. Deze laatste zou horen te werken als de muis wordt ingedrukt op de link. Dat werkt ook zo in alle browsers, behalve in Internet Explorer vóór versie 8. In haar onmetelijke wijsheid heeft Microsoft besloten af te wijken van de standaard: :active werkt in oudere versies zoals :focus hoort te werken, en :focus werkt gewoon helemaal niet vóór versie 8. In alle andere browsers werken :focus en :active dus wel volgens de standaard, en met ingang van versie 8 van Internet Explorer houdt Microsoft zich ook eindelijk aan de standaard.

Dit betekent dat je niet kunt volstaan met a:hover, a:focus {...}, maar dat je a:hover, a:focus, a:active {...} moet gebruiken, want anders werkt het niet in oudere versies van Internet Explorer. Het zal nog jaren duren voor deze oude versies niet meer worden gebruikt, maar omdat Microsoft zich nu eindelijk ook aan de standaard houdt op dit punt, wordt :active nu ook langzaamaan bruikbaar, voor waar het voor is bedoeld.

* Belangrijke informatie moet je niet geven via :focus of :active, omdat dit niet werkt als css uit staat.

* Ten slotte kan 'n pop-up of zoiets gruwelijk in de weg komen te staan, bijvoorbeeld door de rest van de pagina af te dekken. Iemand die gewoon de muis kan gebruiken, verplaatst deze even en de pagina is weer zichtbaar. Iemand die moeite heeft met het gebruik van de muis, heeft deze mogelijkheid niet of minder. Als je buiten de link en de daarbij horende pop-up en dergelijke klikt, sluit deze weliswaar, maar dat is nu juist het probleem: mensen die de muis niet goed kunnen gebruiken, hebben nou net daar problemen mee.

Als je via de terug-toets teruggaat naar de vorige pagina, heeft de link waar je vandaan kwam nog steeds focus, en dus staan pop-up en dergelijke ook nog open. Wat ook heel storend kan zijn als andere delen van de pagina daardoor niet te zien zijn. Op het moment dat ik dit schreef, werkte de terug-toets bij alle browsers zo, met uitzondering van Google Chrome. Maar 't kan best zijn dat Google Chrome het inmiddels ook doet, of 'n andere juist weer niet, want dit schijnt nogal te veranderen.

Om al deze redenen is het goed je even af te vragen, of de voordelen van 'n pop-up en dergelijke wel opwegen tegen de nadelen. Ik zet zelf mijn eigen overwegingen bij elk voorbeeld steeds even erbij. Wat natuurlijk niet wil zeggen dat je daar geen andere mening over zou kunnen hebben.

Speciaal bij dit voorbeeld

In de css voor de muis gebruik ik hier alleen :hover, omdat de onderdelen van de sitemap niet openen bij gebruik van :focus of :active. Althans: als een ingang zou openen, sluit die daarboven gelijk, omdat die dan geen focus meer heeft. Het is dus vrij zinloos om hier :focus te gebruiken, want dat levert alleen maar een soort verstoppertje van openende en sluitende ingangen op.

In de css voor het toetsenbord is helemaal geen :hover aanwezig, dus ook geen :focus of :active.

In Opera openen de onderdelen van de sitemap wel, maar daarin gebeurt dat met behulp van Shift en de pijltjestoetsen, daar is geen :focus of :active voor nodig.

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> <html 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 eventuele url, anders werkt het niet goed.

Het hier gebruikte doctype is dat van html5. Dit kan al veilig worden gebruikt.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

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" href="../../css/naam-van-stylesheet.css"> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" 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. In html5 is de toevoeging type="text/css" niet meer nodig, omdat dit standaard al zo staat ingesteld.

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> 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 die uit de algemene stylesheet dan in principe overrulen.

<style>

In html5 is de toevoeging type="text/css" niet meer nodig.

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, zoals ik die in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Ik gebruik deze lay-out alleen, omdat het anders veel te veel regels worden.

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


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

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

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

Omdat body geen id heeft, werkt deze selector altijd, ongeacht of body als id 'muis' of 'toetsenbord' heeft.

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: 100%;

Dit slaat natuurlijk nergens op, want hier staat gewoon dat de letters de normale grootte moeten hebben. Dit is nodig vanwege Internet Explorer.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. 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: 1em; zou hetzelfde moeten zijn als font-size: 100%;), maar %, 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;

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

Achtergrondkleurtje.

Css voor de muis

body#muis a#naar-toetsenbord

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Link naar pagina voor toetsenbord

De link met id="naar-toetsenbord".

Binnen deze link staat href="lijst-096-dl.shtml?toetsenbord".

Het deel van de link achter het vraagteken heet query-string. Deze link roept gewoon de pagina aan, waar hij in staat. De toevoeging ?toetsenbord zorgt ervoor dat de pagina nu wordt geopend met de css voor het toetsenbord. Deze link is alleen aanwezig, als is gekozen voor de lay-out voor de muis. Hoe dit precies werkt, staat bij Op de server verwerkte SSI-code om css te kunnen kiezen.

position: absolute;

Om de link links buiten het scherm neer te kunnen zetten, zodat hij normaal genomen onzichtbaar is. Ik gebruik liever geen visibility: hidden; of display: none;, omdat veel spraakbrowsers en dergelijke de link dan volledig negeren.

Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf absoluut, fixed of relatief is gepositioneerd. Als die er niet is, zoals hier het geval is, wordt gepositioneerd ten opzichte van het venster van de browser.

Een <a> is van zichzelf een inline-element. Door hem absoluut te positioneren, verandert hij in een blok-element. Hierdoor kan ik eigenschappen als breedte gebruiken.

left: -2000px;

Ver links buiten het scherm zetten. 2000 px moet ver genoeg zijn om zelfs het breedste scherm te kunnen overspannen.

Omdat ik de link hier al vrijwel helemaal opmaak, hoef ik hem straks alleen nog maar op het scherm te zetten om hem zichtbaar te maken.

top: 20px;

Bij body#muis ul#content wordt de sitemap op 20 px vanaf de bovenkant van het venster van de browser neergezet. Door de link op dezelfde hoogte neer te zetten, komt deze over de sitemap te staan. Wat precies de bedoeling is, want dan valt hij lekker goed op.

z-index: 200;

De link moet altijd zichtbaar zijn, dus ik geef hem een hoge z-index. Dit is een behoorlijk hoog getal, maar dan is de link in ieder geval zichtbaar, ook als er later nog andere elementen met een z-index zouden worden toegevoegd. En het is geen belastingaangifte: een hoger getal kost niets meer dan een laag.

Een z-index werkt alleen bij een absoluut, relatief of fixed gepositioneerd element, zoals met deze link het geval is.

width: 10.5em;

Breedte. Door als eenheid em te nemen, verandert de breedte mee met de grootte van de letter.

background: white;

Achtergrond wit.

text-align: center;

Tekst horizontaal centreren.

body#muis a#naar-toetsenbord:focus, body#muis a#naar-toetsenbord:active

Deze selectors hebben alleen maar effect, als de id van body 'muis' is.

De link met id="naar-toetsenbord", maar alleen als deze focus heeft of actief is. Wat dat precies betekent en waarom :focus én :active worden gebruikt, staat uitgelegd bij Alleen :hover of :hover, :focus en :active?

Binnen deze link staat href="lijst-096-dl.shtml?toetsenbord".

Het deel van de link achter het vraagteken heet query-string. Deze link roept gewoon de pagina aan, waar hij in staat. De toevoeging ?toetsenbord zorgt ervoor, dat de pagina nu wordt geopend met de css voor het toetsenbord. Hoe dit precies werkt staat bij Op de server verwerkte SSI-code om css te kunnen kiezen.

left: 10.5em;

Bij body#muis a#naar-toetsenbord is de link ver links buiten het scherm gepositioneerd, en daardoor onzichtbaar. Door hem op 10.5 em vanaf de linkerkant van het venster van de browser neer te zetten, wordt hij zichtbaar. De link wordt pal boven de sitemap gezet, zodat hij lekker goed opvalt.

Als eenheid neem ik em. Als de lettergrootte verandert, en dus de breedte van de sitemap, verandert de plaats van de link mee.

border: red solid 3px;

Bij body#muis a#naar-toetsenbord is de link al vrijwel helemaal opgemaakt, zodat ik hem hier alleen maar zichtbaar hoef te maken. Alleen de dikke rode rand breng ik hier aan. Dat is vanwege Internet Explorer 7.

In Internet Explorer 7 wordt de link niet zichtbaar als hij focus heeft, als ik niet een of andere truc toepas. Door de border pas hier aan te brengen en niet, zoals de rest van de opmaak, bij body#muis a#naar-toetsenbord, werkt het opeens wel. Vraag me niet waarom. Andere browsers hebben er geen last van, dus deze oplossing werkt prima.

(Ik heb het hier over 'focus'. Internet Explorer 7 implementeert dit fout, feitelijk zou ik voor dit onding moeten schrijven 'als de link actief is'.)

body#muis ul

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Alle ongeordende lijsten.

De sitemap bestaat uit een hele serie geneste ongeordende lijsten. Veel van de css voor deze lijsten is hetzelfde, die kan ik hier in één keer opgeven. Aanpassingen voor aparte (groepen van) lijsten geef ik later op.

position: relative;

Nu kan ik de lijsten op een relatieve positie plaatsen, waardoor ik ze naar wens zichtbaar of onzichtbaar kan maken. En de inhoud van de lijsten dus ook.

Daarnaast geeft dit de mogelijkheid om kinderen van de <ul>'s absoluut te positioneren ten opzichte van de <ul>, want dat kan alleen maar als de <ul> een fixed, absolute of relatieve positie heeft.

width: 18em;

Breedte. Door als eenheid em te nemen, verandert de breedte mee met de lettergrootte.

margin: 0 0 0 20px;

De standaardmarges voor ongeordende lijsten zijn niet in elke browser hetzelfde, daarom is het het beste om die altijd aan alle kanten zelf op te geven. Anders had ik hier kunnen volstaan met alleen de linkermarge.

Boven, rechts en onder geen marge.

Links 20 px. De buitenste <ul> komt op 20 px vanaf de linkerkant van het venster van de browser te staan. En elke geneste <ul> komt op 20 px van de linkerkant van zijn ouder-lijst te staan.

border-radius: 7px;

De lijsten krijgen zwarte kadertjes en een gekleurde achtergrond, en die geef ik hier ronde hoeken.

Internet Explorer 7 en 8 krijgen geen ronde hoeken, zie verder bij Bekende problemen.

padding: 0;

De standaardwaarden voor padding zijn bij de diverse browsers niet hetzelfde. Daarom moet je die altijd zelf even opgeven. Hier geef ik gewoon op dat er helemaal geen padding mag zijn.

list-style-type: none;

De gebruikelijke balletjes en zo bij een ongeordende lijst zijn hier niet welkom.

body#muis ul#content

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

De ul met id="content". Dit is de buitenste <ul>, waarbinnen de hele sitemap staat.

De bij body#muis ul opgegeven css geldt ook voor deze <ul>. Hier hoef ik alleen nieuwe en afwijkende css op te geven.

height: 60em;

60 em hoog maken. Door als eenheid em te nemen, verandert de hoogte mee met de lettergrootte.

De hoogte is ogenschijnlijk veel groter dan nodig is. Maar als ik over de onderste ingangen van de sitemap hover, openen de geneste <ul>'s naar onderen. Daardoor zouden de onderste ingangen onder het venster van de browser uitkomen en dus onzichtbaar zijn.

Je kunt weliswaar omlaag scrollen als je met de cursor precies boven die ingangen blijft hangen, maar dat is toch wel 'n beetje sadistisch. Door de buitenste <ul> gewoon extra hoog te maken, kun je op je gemak omlaag scrollen zonder dat de cursor precies ergens boven moet hangen.

margin-top: 20px;

Kleine afstand tussen bovenkant van de sitemap en bovenkant van het venster van de browser.

body#muis ul ul

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Elke ongeordende lijst die binnen een andere ongeordende lijst staat. Dit is dus elke geneste lijst.

De bij body#muis ul opgegeven css geldt ook voor deze <ul>'s. Hier hoef ik alleen nieuwe en afwijkende css op te geven.

margin-top: -0.25em;

Klein stukje omhoog verplaatsen met behulp van een negatieve marge. Hierdoor komt de geneste lijst een heel klein stukje over de lijst op 'n hoger niveau te staan, wat er wat beter uitziet.

Als eenheid gebruik ik em, zodat de marge mee verandert met de lettergrootte.

border: black solid 1px;

Zwart kadertje rondom elke geneste lijst.

color: black;

Tekstkleur zwart.

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.

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: white; background-color: rgba(100, 100, 100, 0.2);

Achtergrondkleur. Deze wordt gebuikt om de sitemap een beetje af te laten steken tegen de pagina.

Ik geef hier twee keer de achtergrondkleur op. Oudere browsers kennen rgba() niet. Die gebruiken gewoon de witte achtergrondkleur en negeren rgba, want dat kennen ze niet. Bij deze oudere browsers krijgt de sitemap dus een witte, ondoorzichtige achtergrond. (Dit zou ook gelden voor Internet Explorer 7 en 8, want die kennen rgba() ook niet, maar daarvoor komt later aparte css, zodat deze toch een doorzichtige achtergrond krijgen.)

Nieuwere browsers herkennen de witte achtergrondkleur. Maar daarna komt rgba, en dat herkennen ze ook. En omdat rgba() als laatste komt, wordt de achtergrondkleur hiervan gebruikt, en niet de witte achtergrond. Precies de bedoeling.

Meestal wordt voor 'n kleur de hexadecimale notatie gebruikt. Daarbij worden niet alleen cijfers, maar ook letters gebruikt. 0 tot en met 9 werken precies hetzelfde als altijd, maar na de 9 komen nog A, B, C, D, E en F.

Als je telt, is 't dus: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12, enz. Daarbij is A gelijk aan het tientallige 10, B aan 11, enz. Op deze manier kun je met twee cijfers en/of letters 256 mogelijkheden aangeven: van 00 tot en met FF.

De eerste drie getallen bij rgba() geven de kleur aan. Deze lopen van 0 tot en met 255, dus ook hiermee kun je 256 mogelijkheden aangeven. En omdat er drie getallen zijn levert dat 256 x 256 x 256 = 16.777.216 mogelijke kleuren op, net iets meer dan het aantal kleurpotloden in de gemiddelde kleurdoos van 'n kind.

De notatie bij rgba() geeft dus precies evenveel mogelijkheden als de hexadecimale.

Het eerste getal staat voor rood, het tweede voor groen en het derde voor blauw (feitelijk de Engelse namen, maar de eerste letter is toevallig in het Nederlands hetzelfde). Uit deze drie kleuren zijn alle kleuren op een monitor opgebouwd.

255 wil zeggen volledig aanwezig, 0 wil zeggen helemaal ontbrekend.

255, 255, 255 levert wit op, 0 , 0 , 0 zwart.

In dit voorbeeld heb ik bij deze achtergrond voor rood, groen en blauw alle drie het getal 100 opgeven. Een gelijk getal bij alle drie levert een tint grijs op.

In plaats van getallen mag je ook percentages gebruiken, bijvoorbeeld: rgba(32%, 32%, 32%, 0.2)

Het vierde getal staat voor het alfa-kanaal. Hiermee wordt de doorzichtigheid aangegeven. Dit getal loopt van 0 naar 1; 0 is volledig doorzichtig, 1 volledig ondoorzichtig.

Het getal voor het alfa-kanaal wordt in breuken aangegeven, dus bijvoorbeeld 0.5 wil zeggen halfdoorzichtig. Let erop dat je 'n punt gebruikt, de Amerikaanse manier om breuken aan te geven. Als je 'n komma gebruikt, denkt de browser dat er twee verschillende getallen staan.

In dit voorbeeld is deze achtergrondkleur behoorlijk doorzichtig: 0.2. Omdat dit zo doorzichtig is, komt de kleur van de pagina behoorlijk door de achtergrondkleur van de <ul>'s heen.

Internet Explorer 7 en 8 herkennen rgba() niet, dus daarvoor komt verderop aparte css.

body#muis ul.titel

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

De ongeordende lijsten met class="titel".

Er zijn twee soorten ingangen in de sitemap: korte links of teksten als 'tekst' of 'lay-out', en langere titels van artikelen of voorbeelden. De langere titels staan allemaal in een <li>, die binnen een <ul> met class="titel" staat.

border: 0;

Bij body#muis ul ul hebben alle geneste <ul>'s een border gekregen. Dus ook de <ul>'s waarbinnen de <li>'s met de langere titels staan. De <li>'s met langere titels krijgen zelf echter verderop ook een border. Als ook de <ul> waar ze in staan een border krijgt, staat er uiteindelijk een dubbele border.

Bovendien worden ronde hoeken tussen twee <li>'s ontsierd door de verticale border van ul#titel, want die loopt ijzerenheinig door naast de ronde hoeken.

Als de border bij ul#titel is weggehaald
Als de border bij ul#titel is weggehaald.

Wie niet horen wil, moet maar voelen: ik haal de borders bij deze <ul>'s gewoon helemaal weg.

body#muis ul ul ul

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Een ongeordende lijst die binnen een ongeordende lijst staat, die zelf ook weer binnen een ongeordende lijst staat.

De bij body#muis ul en body#muis ul ul opgegeven css geldt ook voor deze <ul>'s. Hier hoef ik alleen de nieuwe en gewijzigde css op te geven.

margin: -0.73em 0 0 6em;

Bij body#muis ul ul hebben alle geneste <ul>'s aan de bovenkant een negatieve marge van 0.25 em gekregen. Die verander ik hier voor dieper geneste <ul>'s in een negatieve marge van 0.73 em. Omdat dit alleen geldt voor <ul>'s die minstens twee keer genest zijn, heeft dit geen invloed op minder diep geneste <ul>'s.

Bij body#muis ul heb ik alle <ul>'s links een marge van 20 px gegeven. Die verander ik hier in 6em. Hierdoor blijft aan de linkerkant een groter deel van de tekst van hoger liggende <ul>'s zichtbaar. Ook dit heeft weer geen invloed op minder diep geneste <ul>'s.

body#muis li

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Alle lijst-ingangen. Een aantal instellingen zijn voor alle lijst-ingangen hetzelfde. Die kan ik hier in één keer opgeven. Als sommige (groepen van) <li>'s andere instellingen moeten krijgen, geef ik die later apart op.

height: 1.6em;

Hoogte. Als eenheid neem ik em, zodat de hoogte mee verandert met de lettergrootte.

Normaal genomen wordt een hoogte automatisch even hoog als nodig is om de inhoud weer te geven, en normaal genomen werkt dat prima. Maar hier niet.

Binnen heel veel <li>'s staan één of meer <ul>'s. De meeste hiervan zie je niet, omdat ze bij body#muis li ul ul enz. links buiten het scherm worden geparkeerd, maar ze zijn er wel. Dus ze tellen ook mee om de hoogte van de <li> te bepalen: de <li> wordt hoog genoeg om de erin staande <ul>'s weer te kunnen geven.

Hierdoor krijg je waanzinnig hoge <li>'s. Door zelf een hoogte op te geven, voorkom je dat.

De hoogte heeft alleen invloed op dingen als achtergrondkleur en border. Als een <ul> zichtbaar moet worden, zie je hem toch gewoon, ondanks dat de <ul> te hoog is om in de <li> te passen. Dit wordt geregeld door overflow. Dit staat standaard op visible, waardoor je een element dat te groot is voor zijn ouder, toch gewoon ziet.

border: transparent solid; border-width: 1px 0;

Doorzichtige border.

Omdat er bij de breedte geen maat is opgegeven voor onderkant en links, krijgen deze automatisch dezelfde maat als boven en rechts. Hier staat dus eigenlijk 1px 0 1px 0 in de volgorde boven - rechts - onder - links. Alleen boven en onder komt dus een doorzichtige border te staan.

Ik had ook kunnen schrijven:

border-top: transparent solid 1px; border-bottom: transparent solid 1px;

maar dat is iets langer.

Bij body#muis li:hover geef ik aan de <li>'s een border van 1 px aan boven- en onderkant als er over wordt gehoverd. Deze border wordt bij de hoogte opgeteld. Hierdoor wordt de <li> waarover ik hover 2 px hoger. De <li>'s die eronder liggen schuiven daardoor 2 px omlaag. Dat geeft een heel onrustig beeld.

Door een doorzichtige border aan te brengen voorkom ik dat. Je ziet die border niet, maar hij neemt precies dezelfde ruimte in als de border die verschijnt bij hoveren over een <li>. Waardoor de <li> dus niet 2 px hoger wordt, als ik erover hover.

border-radius: 7px;

De lijst-ingangen krijgen zwarte kadertjes, als ik erover hover. Die geef ik hier ronde hoeken.

Internet Explorer 7 en 8 krijgen geen ronde hoeken, zie verder bij Bekende problemen.

padding: 2px 2px 2px 4px;

Kleine afstand tussen buitenkant van de lijst-ingang en inhoud daarvan. Links een iets grotere afstand, omdat dat er iets beter uitziet.

line-height: 1.6em;

Regelhoogte even hoog maken als de hoogte van de <li>.

Tekst wordt normaal genomen automatisch halverwege de regelhoogte gezet. Als ik die regelhoogte even hoog maak als de hoogte van de <li>, staat de tekst dus automatisch ook in het midden van de <li>.

body#muis li#home

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

De lijst-ingang met id="home". Dit is de allereerste lijst-ingang, die waar 'Home' in staat.

De bij body#muis li opgegeven css geldt ook voor deze lijst-ingang. Hier hoef ik alleen maar nieuwe en afwijkende css op te geven.

border: black solid 1px;

Deze lijst-ingang moet altijd een zwarte rand hebben en niet alleen als erover wordt gehoverd, zoals bij andere lijst-ingangen. De reden hiervoor is simpel: deze <li> is altijd zichtbaar, dus moet de zwarte rand ook altijd zichtbaar zijn.

background: white; background-color: rgba(100, 100, 100, 0.2);

Waarom hier twee keer een achtergrondkleur wordt opgegeven en hoe rgba() werkt, staat bij background: white; background-color rgba(100, 100, 100, 0.2);

Bij body#muis ul ul heb ik alle geneste <ul>'s deze achtergrondkleur gegeven. Bij de buitenste <ul> kan dat echter niet, omdat ik deze bij body#muis ul#content 60 em hoog heb gemaakt. Daardoor zou ook de achtergrondkleur zichtbaar zijn over deze hoogte.

Bovendien hebben alle <ul>'s bij body#muis ul aan de linkerkant een marge van 20 px gekregen, en ook in die marge zou de achtergrondkleur te zien zijn.

En omdat alle achtergrondkleuren (behalve de witte) doorzichtig zijn, zie je het teveel aan achtergrond ook door de achtergrondkleur van de geneste <ul>'s heen.

Daarom geef ik bij de buitenste <ul> de achtergrondkleur niet aan de <ul>, maar aan de enige <li> die in die buitenste <ul> zit: die met 'Home' erin.

body#muis ul.titel li

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

De lijst-ingangen binnen de <ul>'s met class="titel". Dit zijn de lijst-ingangen waarin de langere titels voor artikelen en voorbeelden staan.

height: auto;

Bij body#muis li heb ik alle lijst-ingangen een hoogte van 1.6 em gegeven. Dat is prima voor de <li>'s waar maar een korte tekst in staat, maar bij de langere titels is deze hoogte te weinig, omdat deze titels vaak op twee of meer regels staan.

Hierdoor zou de achtergrondkleur niet achter de hele tekst staan, het kadertje zou niet de hele tekst omsluiten, en de <li>'s zouden gedeeltelijk over elkaar heen komen te staan.

Ik geloof niet dat ik overdrijf, als ik zou durven beweren dat dit mogelijk de leesbaarheid niet echt verbetert.

Daarom laat ik de hoogte zich in deze lijst-ingangen automatisch aanpassen aan de inhoud. auto is trouwens de standaard-instelling van hoogte: als je geen hoogte opgeeft, zal het element meestal automatisch precies hoog genoeg worden om de inhoud ervan weer te kunnen geven.

padding-left: 1em;

Als eenheid voor de padding gebruik ik weer em, zodat deze mee verandert met de lettergrootte.

Iets hieronder geef ik een negatieve text-indent. Daardoor komt de bovenste regel iets naar links te staan. Waardoor deze ook links buiten de achtergrond en buiten het kadertje zou komen te staan.

Door alles een padding aan de linkerkant te geven, voorkom je dat. De text-indent is -0,8 em. Als ik de padding links iets groter maak, is er ook enige afstand tussen de bovenste regel en de linkerkant van de <li>.

(Meestal gebruik ik hiervoor een marge, maar dat werkt hier niet, want kadertje en achtergrond zouden bínnen de marge komen te staan. En dan zou de bovenste regel nog steeds links buiten het kadertje en buiten de achtergrond staan.)

border: black solid 1px;

Zwart randje rondom de lijst-ingang.

text-indent: -0.8em;

Bovenste regel iets naar links zetten. Voor het oog lijkt het dan alsof alle andere regels iets inspringen.

line-height: 1.2em;

Bij body#muis li is de regelhoogte op 1.6 em gezet. Dat is te hoog voor hier. 1.2 em is ongeveer de normale regelhoogte, en die voldoet hier prima.

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.

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: white; background-color: rgba(150, 150, 150, 0.5);

Waarom hier twee keer een achtergrondkleur wordt opgegeven en hoe rgba() werkt, staat bij background: white; background-color rgba(100, 100, 100, 0.2);

De waarden voor de kleuren zijn iets hoger dan bij de uitleg daar, waardoor de grijze achtergrondkleur iets donkerder wordt. Het is ook iets minder doorzichtig. Hierdoor is de tekst wat beter leesbaar.

body#muis a

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Alle links.

border-radius: 7px;

De links hebben een eigen doorzichtige achtergrondkleur. Daardoor is de achtergrond van de links iets donkerder. border-radius levert niet alleen ronde hoeken op bij een border, maar ook bij een achtergrondkleur.

margin-left: -2px;

Bij body#muis li is aan alle lijst-ingangen links een padding van 4 px gegeven. Deze padding zorgt voor wat afstand tussen de buitenkant van de lijst-ingang en de erin staande tekst.

De links krijgen hieronder aan de linkerkant een padding van 2 px. Daardoor wordt de achtergrond op een breedte van 2 px rondom de links zichtbaar, want een achtergrond is gewoon zichtbaar achter de padding.

Maar daardoor krijgen de links aan de linkerkant een padding van 4 px van de lijst-ingang plus 2 px van zichzelf, samen 6 px. Terwijl tekst die geen link is aan de linkerkant alleen de padding van de lijst-ingang krijgt, dus maar 4 px. Op de afbeelding is te zien dat hierdoor gewone tekst en links niet netjes aan de linkerkant zijn uitgelijnd.

Door nu de links gewoon met een negatieve marge weer 2 px naar links terug te zetten, komen ook de links op 4 px afstand van de lijst-ingang te staan, waardoor alles netjes links is uitgelijnd.

padding: 2px 4px;

Omdat geen waarde is opgegeven voor onder en links, krijgen deze automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 2px 4px 2px 4px in de volgorde boven - rechts - onder - links.

Normaal genomen zou ik overal 2 px padding geven, maar omdat de hoeken hier rond zijn, komt dat niet goed uit. Via uitproberen bleek een padding links en rechts van 4 px beter uit te komen.

background: white; background-color: rgba(150, 150, 150, 0.3);

Waarom hier twee keer een achtergrondkleur wordt opgegeven en hoe rgba() werkt, staat bij background: white; background-color rgba(100, 100, 100, 0.2);

De waarden voor de kleuren zijn iets hoger dan bij de uitleg daar, waardoor de grijze achtergrondkleur iets donkerder wordt. Het is ook iets minder doorzichtig.

Omdat deze doorzichtige achtergrond over de achtergrond die bij body#muis ul ul is opgegeven komt te staan, wordt het grijs van deze achtergrond als het ware opgeteld bij de achtergrond van de <li>, waardoor de achtergrond van de <a> nog iets donkerder lijkt te worden.

body#muis span.meer

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

De spans met class="meer". Binnen deze spans staat de », die bij hoveren over een <li> zichtbaar wordt, als de <li> onder-afdelingen heeft.

position: absolute;

Om de span op de juiste plaats neer te kunnen zetten.

Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een fixed, absolute of relatieve positie heeft. Dat is hier de <ul> waar de span in staat.

right: 8px;

Op 8 px vanaf de rechterkant van de <ul> neerzetten.

Omdat ik geen top of bottom opgeef, komt de span en dus de daarin zittende » in horizontale richting gewoon op de normale hoogte te staan. Dat is hier de tekst, waar hij bij hoort.

visibility: hidden;

Verbergen. Alleen als er over een <li> wordt gehoverd, moet de in die <li> zittende span met de » zichtbaar worden. Normaal genomen is hij onzichtbaar.

Hier kan ik gewoon visibility gebruiken, want als een spraakbrowsers of zo daardoor de » negeert, is dat alleen maar een voordeel.

font-size: 1.5em;

Iets groter maken dan de rest van de tekst, dan lijkt het wat meer op een pijltje. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

body#muis li:hover

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Als ik over een lijst-ingang hover.

border: black solid; border-width: 1px 0;

Omdat er bij de breedte geen maat is opgegeven voor onderkant en links, krijgen deze automatisch dezelfde maat als boven en rechts. Hier staat dus eigenlijk 1px 0 1px 0 in de volgorde boven - rechts - onder - links. Alleen boven en onder komt dus een zwarte border te staan.

Ik had ook kunnen schrijven:

border-top: black solid 1px; border-bottom: black solid 1px;

maar dat is iets langer.

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.

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: white; background-color: rgba(255, 255, 255, 0.75);

Waarom hier twee keer een achtergrondkleur wordt opgegeven en hoe rgba() werkt, staat bij background: white; background-color rgba(100, 100, 100, 0.2);

De waarden voor de kleuren zijn hier zo hoog mogelijk. Dat levert een witte achtergrondkleur op. Deze is enigszins doorzichtig, waardoor je nog vaag de achter de <li> zittende tekst en kadertjes kunt zien.

body#muis ul.titel li:hover

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

De lijst-ingangen binnen de <ul>'s met class="titel", maar alleen als ik over de <li> hover. Dit zijn de lijst-ingangen, waarin de langere titels voor artikelen en voorbeelden staan.

background: white; background-color: rgba(255, 255, 255, 0.75);

Deze regel is precies hetzelfde als die bij body#muis li:hover. De uitleg kun je daar vinden.

Maar als deze regel precies hetzelfde is, is hij dan niet overbodig? Nee.

Bij body#muis ul.titel li geef ik een achtergrondkleur op. Deze selector kent 3 elementen (body, ul en li), 1 id (muis) en 1 class (titel).

Bij body#muis li:hover verander ik de achtergrondkleur. Maar deze selector kent maar 2 elementen (body en li), 1 id (muis) en 1 pseudo-class (:hover).

2 elementen, 1 id en 1 pseudo-class hebben minder specificiteit (gewicht) dan 3 elementen, 1 id en 1 class, en daarom kan body#muis li:hover nooit 'winnen' van body#muis ul.titel li. Oftewel: body#muis li:hover kan nooit de achtergrond veranderen die bij body#muis ul.titel li is opgegeven.

De selector die hierboven staat kent 3 elementen (body, ul en li), 1 id (muis), 1 class (titel) en 1 pseudo-class (:hover). En dat heeft wel meer specificiteit dan body#muis ul.titel li met z'n 3 elementen, 1 id en 1 class. Oftewel: body#muis ul.titel li:hover kan wel een bij body#muis ul.titel li opgegeven achtergrond veranderen.

body#muis li:hover > span.meer

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Als ik over een lijst-ingang hover, doe dan iets met de erin zittende spans met class="meer". In deze spans zit de », die bij hoveren over een lijst-ingang zichtbaar moet worden.

visibility: visible;

Maak de span, en dus het teken », zichtbaar. Deze span is bij body#muis span.meer onzichtbaar gemaakt.

In deze selector staat een extra teken >: de 'child selector'. Deze zorgt ervoor dat deze regel alleen geldt voor een direct kind van de <li>, waarover wordt gehoverd. Zonder het teken > zou het voor álle spans met class="meer" gelden, die binnen de <li> waarover wordt gehoverd liggen. Zonder het teken > zou je het effect krijgen, waarvan hierboven een stukje is te zien: er openen veel te veel spans met class="meer".

body#muis li:first-child

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Lijst-ingangen, maar alleen als ze het eerste kind van een element zijn.

Binnen een <ul> mogen alleen <li>'s zitten. Het eerste kind van een <ul> is dus per definitie een <li>. Dit geldt dus voor elke eerste lijst-ingang binnen een lijst.

border-width: 0 0 1px;

Omdat voor links geen waarde is ingevuld, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 0 - 0 - 1px - 0 in de volgorde boven - rechts - onder - links. Alleen aan de onderkant een border van 1 px.

Bij body#muis li:hover heb ik alle <li>'s waarover wordt gehoverd een border aan boven- en onderkant gegeven. Maar elke <ul> heeft ook al een border. Daardoor zouden aan de bovenkant de border van de <ul> en de border van de bovenste <li> tegen elkaar aan komen te staan en een border van 2 px opleveren.

Door de bovenste <li> geen border aan de bovenkant te geven, voorkom je dat.

body#muis li:last-child

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Lijst-ingangen, maar alleen als ze het laatste kind van een element zijn.

Binnen een <ul> mogen alleen <li>'s zitten. Het laatste kind van een <ul> is dus per definitie een <li>. Dit geldt dus voor elke laatste lijst-ingang binnen een lijst.

border-width: 1px 0 0;

Omdat voor links geen waarde is ingevuld, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 1px - 0 - 0 - 0 in de volgorde boven - rechts - onder - links. Alleen aan de bovenkant een border van 1 px.

Bij body#muis li:hover heb ik alle <li>'s waarover wordt gehoverd een border aan boven- en onderkant gegeven. Maar elke <ul> heeft ook al een border. Daardoor zouden aan de onderkant de border van de <ul> en de border van de onderste <li> tegen elkaar aan komen te staan en een border van 2 px opleveren.

Door de onderste <li> geen border aan de onderkant te geven, voorkom je dat.

Internet Explorer 7 en 8 kennen :last-child niet. In die browsers geeft de onderste <li> aan de onderkant een border van 2 px, als je erover hovert.

Je zou eventueel de onderste <li>'s een class kunnen geven en op die manier de border aan de onderkant kunnen weghalen voor deze browsers.

body#muis li:only-child

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Als een lijst-ingang het énige kind van een element is. Omdat een <li> per definitie binnen een <ul> moet liggen, geldt dit dus alleen voor <ul>'s die maar één <li> hebben.

border: 0;

Laat geen border zien.

Bij body#muis li:hover heb ik alle <li>'s waarover wordt gehoverd een border aan boven- en onderkant gegeven. Maar elke <ul> heeft ook al een border. Daardoor zouden aan de onder- en bovenkant de border van de <ul> en de border van de <li> tegen elkaar aan komen te staan en een border van 2 px opleveren.

Dat boven- én onderkant een dubbele border opleveren, kan alleen maar als er slechts één <li> is, want alleen dan raakt de border van de <li> de boven- én onderkant van de <ul>.

Bij body#muis li:first-child heb ik een dubbele border aan de bovenkant voorkomen.

Daaronder in de css, bij body#muis li:last-child, voorkom ik een dubbele border aan de onderkant. Helaas geef ik daar weer de border aan de bovenkant op. Dat is geen probleem als er meerdere <li>'s zijn, maar wel als er maar eentje is, want de border aan de bovenkant van de <li> staat dan weer tegen de border aan de bovenkant van de <ul> aan, zoals hiernaast is te zien.

Voor de <ul>'s die maar één <li> hebben, gebruik ik daarom :only-child.

Nu heb ik alle mogelijke situaties opgelost: bovenkant, onderkant, en boven- én onderkant.

Internet Explorer 7 en 8 kennen :only-child niet, dus die krijgen in dit geval wel een dubbele border aan de onderkant. Alleen aan de onderkant, want :first-child kennen ze wel, dus de dubbele border aan de bovenkant wordt wel voorkomen.

body#muis li#home:hover

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

De lijst-ingang met id="home", maar alleen als ik erover hover. Dit is de bovenste lijst-ingang, die waar 'Home' in staat.

background: white;

Witte achtergrond geven.

Bij body#muis li:hover geef ik ook al een witte achtergrond, als ik over een <li> hover. Maar dat werkt niet voor li#home.

Bij body#muis li#home geef ik li#home een grijze achtergrond. In body#muis li#home zitten 2 elementen (body en li) en 2 id's (#muis en #home). Dit heeft meer specificiteit (gewicht) dan de selector body#muis li:hover, waarin alleen maar 2 elementen (body en li), 1 id (muis) en 1 pseudo-class (:hover) zitten. Daarom kan body#muis li:hover nooit de achtergrond bij body#muis li#home veranderen: het heeft te weinig specificiteit.

In body#muis li#home:hover zitten 2 elementen (body en li), 2 id's (#muis en #home) en 1 pseudo-class (:hover). Daardoor heeft dit wel genoeg specificiteit om de achtergrondkleur van body#muis li#home te kunnen veranderen.

body#muis li ul ul, body#muis li:hover li:hover ul ul, body#muis li:hover li:hover li:hover ul ul {left: -2000px;}

Deze selectors hebben alleen maar effect, als de id van body 'muis' is.

Deze regel en de volgende bij body#muis li:hover li:hover ul enz. zijn zusje en broertje: ze zorgen samen voor het verdwijnen en verschijnen van de juiste onderdelen van de sitemap.

Het ziet er wat ingewikkeld uit, maar dat is vooral omdat nogal wat selectors op dezelfde regel staan. Als je ze stuk voor stuk gaat bekijken, wordt het al heel wat overzichtelijker.

Als niet op een of andere manier delen van de sitemap worden verborgen, zou de hele sitemap voortdurend zichtbaar zijn. Het verfrissende resultaat daarvan is op de afbeelding hiernaast te bewonderen. Het zou kunnen dat sommige mensen dat wat lastig leesbaar vinden.

Uit pure menslievendheid verbergen we daarom in eerste instantie het meeste, en halen alleen de delen die nodig zijn tevoorschijn.

Voor het verbergen zorgt de regel hier, de regel hierna in de css zorgt voor het gecontroleerd tevoorschijn halen.

Het verbergen gebeurt door de delen die onzichtbaar moeten zijn ver links buiten het scherm te parkeren met left: -2000px;. Ik gebruik geen display: none; of visibility: hidden;, omdat veel spraakbrowsers en dergelijke het dan volledig negeren.

De selectors apart:

body#muis li ul ul {left: -2000px;}

Elke ongeordende lijst die binnen een andere ongeordende lijst staat, die weer binnen een lijst-ingang staat.

<ul id="content">
<li id="home">Home
(...)
</li>
</ul>

De buitenste <ul> staat niet binnen een <li>, dus geldt deze regel niet voor de buitenste ul#content. Deze is dus altijd zichtbaar.

ul#content heeft slechts één <li>: li:home.

<ul id="content">
<li id="home">Home
<ul>
<li>Afbeelding</li>
<li>Artikelen</li>
(...)
<li>Tekst</li>
</ul>
</li>
</ul>

De <ul> met 'Afbeelding', 'Artikelen', enz., staat binnen een <li>. Hij voldoet dus aan li ul.

Maar hij voldoet niet aan li ul ul, want er staat geen andere ongeordende lijst tussen deze <ul> en de <li>.

Omdat ook deze <ul> niet volledig aan de selector voldoet, is ook deze dus altijd zichtbaar. Precies de bedoeling.

<ul id="content">
<li id="home">Home
<ul>
<li>Afbeelding
<ul>
<li>Imagemap</li>
(...)
<li>Video</li>
</ul>
</li>
<li>Artikelen
<ul>
<li>Css
<ul>
<li>Artikel</li>
</ul>
</li>
<li>Html
<ul>
<li>Head
<ul>
<li>Artikel</li>
</ul>
</li>
</ul>
</li>
(...)
<li>Toebehoren</li>
</ul>
</li>
(...)
<li>Tekst</li>
</ul>
</li>
</ul>

De <ul> met 'Imagemap', 'Video', enz. staat binnen een andere ul. Hij voldoet dus aan ul ul.

Deze ul ul staat weer binnen een <li>. Deze <ul> voldoet dus aan de selector li ul ul en staat normaal genomen 2000 px links buiten het scherm geparkeerd. En is daarmee dus onzichtbaar.

Hetzelfde geldt voor de <ul> met 'Css', 'Html', 'Toebehoren', enz. Deze is dus normaal genomen ook onzichtbaar.

Hetzelfde geldt uiteraard ook voor alle <ul>'s die hiernaast zijn weggelaten.

Alle nog dieper geneste <ul>'s, zoals die met 'Head', staan allemaal binnen een andere <ul>, die weer binnen een <li> staat, en voldoen dus allemaal aan de selector li ul ul. Ze zijn dus normaal genomen allemaal onzichtbaar.

Alles bij elkaar genomen zorgt deze regel er dus voor dat alle <ul>'s, behalve de twee buitenste, normaal genomen onzichtbaar zijn.

body#muis li:hover li:hover ul ul {left: -2000px;}

De volgende selector uit deze regel. Doe iets met een ongeordende lijst die binnen een ongeordende lijst ligt. Die ongeordende lijst moet zelf weer binnen een lijst-ingang liggen, en die moet ook weer binnen een lijst-ingang liggen.

Bovendien moet over beide lijst-ingangen worden gehoverd. Ook dat laatste lijkt wat ingewikkelder, dan het in werkelijkheid is: je hebt geen twee cursors nodig of zoiets.

Gelijktijdig over meerdere lijst-ingangen hoveren

Als ik over de lijst-ingang met 'Afbeelding' hover, hover ik automatisch ook over de lijst-ingang met 'Home'. 'Afbeelding' ligt namelijk binnen de <ul> die binnen de <li> met 'Home' staat.

Om dezelfde reden hover ik automatisch ook over de <li> met 'Afbeelding', wanneer ik over de <li> met 'Imagemap' of 'Overig' hover. Gewoon omdat deze twee binnen de <li> met 'Afbeelding' zitten.

Sterker nog: als je over 'Imagemap' hovert, hover je gelijktijdig ook over 'Afbeelding' én 'Home', dus over drie lijst-ingangen. Want 'Imagemap' ligt binnen 'Afbeelding', en dat ligt weer binnen 'Home'.

Als ik over bijvoorbeeld 'Afbeelding' hover, hover ik automatisch ook over 'Home'.

Bij body#muis li:hover li:hover ul enz. zorg ik ervoor dat de <ul> die binnen de lijst-ingang met 'Afbeelding' zit, geopend wordt als ik over 'Afbeelding' hover. Dat is de <ul> met 'Imagemap', 'Overig', enz.

Te veel onderdelen gelijktijdig geopend

Maar binnen de lijst-ingangen met 'Imagemap', 'Overig', enz. zit ook weer een <ul>. En die wordt helaas ook gelijk geopend, als ik dat niet voorkom. Soms zit er zelfs nog 'n nog dieper geneste <ul> in, en ook die wordt geopend. Het droef stemmende resultaat is hiernaast te zien.

Gelukkig is dit simpel te voorkomen.

Hieronder maak ik met body#muis li:hover li:hover ul een lijst binnen een <li> zichtbaar, als ik over die <li> hover. Dan maak ik hier gewoon met li:hover li: hover ul ul (twee keer ul) dus de dieper liggende <ul>'s gewoon weer onzichtbaar door ze buiten het scherm te parkeren.

body#muis li:hover li:hover li:hover ul ul {left: -2000px;}

De laatste selector uit deze regel. Deze is hetzelfde als die bij body#muis li:hover li:hover ul ul, maar dan nog 'n niveau dieper.

Ik maak hieronder bij body#muis li:hover li:hover ul enz. namelijk ook nog <ul>'s zichtbaar met een langere selector, en die heeft meer specificiteit (gewicht):

body#muis li:hover li:hover li:hover ul

Daarin zitten 5 elementen (body, li en ul), 1 id (muis) en drie pseudo-classes (:hover).

In body#muis li:hover li:hover ul ul, dat ik hierboven gebruik, zitten maar 5 elementen (body, li en ul), 1 id (muis) en twee pseudo-classes (:hover). Dat verliest dus altijd van body#muis li:hover li:hover li:hover ul.

Maar in body#muis li:hover li:hover li:hover ul ul zitten 6 elementen (body, li en ul) en drie pseudo-classes (:hover), dus dat heeft wel genoeg specificiteit om te winnen van body#muis li:hover li:hover li:hover ul.

body#muis li:hover li:hover ul, body#muis li:hover li:hover li:hover ul, body#muis li:hover li:hover li:hover li:hover ul {left: 20px;}

Deze selectors hebben alleen maar effect, als de id van body 'muis' is.

Deze regel en de vorige bij body#muis li ul ul enz. zijn broertje en zusje: ze zorgen samen voor het verdwijnen en verschijnen van de juiste onderdelen van de sitemap.

Het verdwijnen en de vreselijke rampen als dat niet gebeurt, worden bij body#muis li ul ul enz. uitgelegd. Deze regel zorgt voor het op het juiste moment zichtbaar worden van de onderdelen van de sitemap.

Ook deze regel ziet er wat ingewikkelder uit dan hij is, omdat er meerdere selectors op dezelfde regel staan. Maar deze werken in feite allemaal op vrijwel dezelfde manier, alleen steeds 'n niveau dieper.

Bij body#muis li ul ul enz. heb ik de meeste <ul>'s links buiten het scherm geparkeerd, waardoor ze onzichtbaar zijn. Hier ga ik de <ul>'s op de juiste momenten weer binnen het scherm zetten, waardoor ze zichtbaar worden.

De selectors apart:

body#muis li:hover li:hover ul {left: 20px;}

Doe iets met een ongeordende lijst die binnen een lijst-ingang ligt, die ook weer binnen een lijst-ingang moet liggen.

Bovendien moet over beide lijst-ingangen worden gehoverd. Dat laatste lijkt wat ingewikkelder dan het in werkelijkheid is. Je kunt de uitleg hiervan vinden bij body#muis li:hover li:hover ul ul.

Gelijktijdig over meerdere lijst-ingangen hoveren

Op de hiernaast staande afbeelding komt dit praktisch op het volgende neer: als ik over 'Home' en 'Afbeelding' hover (beide <li>'s), zet dan de ongeordende lijst binnen 'Afbeelding' op het scherm. Dat is de <ul> met 'Imagemap', 'Overig', enz.

Helaas opent niet alleen deze <ul>, maar ook <ul>'s die weer binnen 'Imagemap', 'Overig', enz. liggen, want ook deze vallen binnen deze selector. Hoe je dat kunt voorkomen staat ook weer bij body#muis li:hover li:hover ul ul.

body#muis li:hover li:hover li:hover ul {left: 20px;}

De volgende selector uit deze regel. Deze is hetzelfde als body#muis li:hover li:hover ul, maar dan 1 niveau dieper.

Hierboven bij body#muis li:hover li:hover ul maak ik een <ul> zichtbaar als ik over de <li> hover, waar die <ul> in zit. Maar dieper geneste <ul>'s maak ik weer onzichtbaar bij body#muis li:hover li:hover ul ul, omdat er anders veel te veel wordt geopend.

Daarom maak ik die dieper geneste <ul>'s hier weer zichtbaar als er over een <li> binnen een <li> binnen een <li> wordt gehoverd. Dat is dus bijvoorbeeld als je over 'Imagemap' hovert, want die ligt binnen twee hogere <li>'s: 'Afbeelding' en 'Home'.

Hoe dat zit met het hoveren over drie <li>'s tegelijk kun je vinden bij body#muis li:hover li:hover ul ul.

body#muis li:hover li:hover li:hover li:hover ul {left: 20px;}

Precies hetzelfde verhaal als bij body#muis li:hover li:hover li:hover ul, maar dan nog 'n niveau dieper.

Css voor het toetsenbord

body#toetsenbord a#naar-muis

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De link met id="naar-muis".

Binnen deze link staat href="lijst-096-dl.shtml". Deze link roept gewoon de pagina aan, waar hij in staat. De pagina wordt nu geopend met de css voor de muis. Deze link is alleen aanwezig, als gekozen is voor de lay-out voor het toetsenbord. Hoe dit precies werkt staat bij Op de server verwerkte SSI-code om css te kunnen kiezen.

display: inline-block;

Van zichzelf is een link een inline-element-element. Nu blijft het een inline-element-element, maar kan ik eigenschappen van een blok-element als breedte gebruiken.

width: 750px;

Breedte. Dit is dezelfde breedte als die van ul#content, de <ul> waar de hele sitemap in staat.

margin: 3px 0 0 20px;

3 px afstand tussen de link en de bovenkant van het venster van de browser. Links een marge van 20 px. Dit is dezelfde marge als die van ul#content, de <ul> waar de hele sitemap in staat.

border: black solid 1px;

Zwart randje om de link.

padding: 2px;

Klein beetje ruimte tussen het zwarte randje om en de tekst in de link.

background: white;

Witte achtergrond.

body#toetsenbord ul

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Alle ongeordende lijsten.

Een aantal instellingen is hetzelfde voor alle ongeordende lijsten. Die kan ik hier in één keer opgeven. Eventuele afwijkingen voor aparte (groepen) lijsten geef ik dan later op.

margin: 5px 0 -1px 26px;

De standaardmarges voor een <ul> verschillen per browser. Daarom is het altijd goed om de marges van een <ul> zelf op te geven.

Aan de bovenkant 5 px marge. Dat geeft een kleine ruimte tussen de tekst boven de <ul> en de <ul> zelf.

Rechts geen marge.

Onder een negatieve marge van 1 px. De <ul>'s hebben een border. Omdat ze genest zijn, levert dat aan de onderkant een te brede border op, omdat de borders van de verschillende <ul>'s tegen elkaar komen te staan. Door een negatieve marge te geven die even breed is als de marge zelf (1 px), voorkom je dat.

Links een marge van 26 px. Op bovenstaande afbeeldingen zijn de verschillende <ul>'s van elkaar te onderscheiden door de verschillende achtergrondkleur. De brede lege ruimte links van elke <ul> is deze marge van 26 px.

border-radius: 10px;

Alle ongeordende lijsten krijgen ronde hoeken.

padding: 2px 0 0 4px;

Kleine ruimte boven en links tussen tekst in de <ul> en randje eromheen.

Dit geldt alleen voor de buitenste lijst, want bij body#toetsenbord ul ul verander ik de padding voor alle geneste lijsten. Maar door het hier neer te zetten, spaar ik 'n regel css voor de buitenste lijst uit.

list-style-type: none;

De gebruikelijke bolletjes en zo van een lijst wil ik hier niet.

font-size: 2em;

Grote letter. Dit geldt in feite alleen voor de buitenste lijst, want verderop wordt dit voor de geneste lijsten aangepast.

Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

body#toetsenbord ul#content

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De ongeordende lijst met id="content". Dit is de buitenste <ul>, waarbinnen de hele sitemap staat.

De bij body#toetsenbord ul opgegeven css werkt ook voor deze <ul>. Hier hoef ik alleen de daarvan afwijkende of nieuwe css op te geven.

width: 750px;

Breedte.

margin: 5px 0 20px 20px;

Kleine marge van 5px aan de bovenkant.

Rechts geen marge.

Onder een marge van 20 px, anders staat alles zo tegen de onderkant van het venster van de browser aangepropt.

Links ook een kleine marge van 20 px.

border: black solid 1px;

Randje rondom de hele <ul>.

padding-bottom: 26px;

Bij body#toetsenbord ul heb ik ronde hoeken aan elke <ul> gegeven.

Bij body#toetsenbord ul ul geef ik een border aan onder andere de onderkant van elke geneste <ul>.

Bij body#toetsenbord ul.titel geef ik ronde hoeken aan de <ul>'s met class="titel". Dat zijn de <ul>'s waar de langere lijst-ingangen naar voorbeelden en artikelen in staan. Op de afbeelding hierboven zijn die lijst-ingangen wit.

Onderaan de sitemap botsen de ronde hoeken en de borders van de geneste <ul>'s met de ronde hoek van ul#content, de buitenste <ul>. Ik heb dat opgelost door een padding aan de onderkant. Deze krijgt dezelfde achtergrondkleur als de rest van ul#content, voor zover die niet verdwijnt achter andere delen van de sitemap.

Marges aan linkerkant van de lijsten

Bij body#toetsenbord ul hebben alle <ul>'s links een marge van 26 px gekregen. Op de afbeelding links hoort de donkerste grijze achtergrond bij de buitenste <ul>. Omdat de daarin geneste <ul> (met een lichtere grijze achtergrond) een marge links van 26 px heeft, zie je daar de achtergrond van de buitenste <ul>.

De padding onderaan is ook 26 px. Even breed als de marge links waar je de achtergrondkleur van ul#content ziet. Omdat een padding een achtergrondkleur krijgt, heb je nu onderaan ook een donkergrijze rand van 26 px. Ziet er netjes uit en het probleem met de hoek is ook gelijk opgelost.

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.

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

Donkergrijze achtergrondkleur.

body#toetsenbord ul ul

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Elke ongeordende lijst die binnen een andere ongeordende lijst staat.

De bij body#toetsenbord ul opgegeven css werkt ook voor deze <ul>'s. Hier hoef ik alleen de daarvan afwijkende of nieuwe css op te geven.

border: black solid;

Zwarte rand. Hier gelijk onder geef ik de breedte op. Dat kost minder css dan wanneer ik border-top, border-bottom en border-left gebruik.

border-width: 1px 0 1px 1px; Zonder correctie voor dubbele borders

Boven, onder en links een border van 1 px breed. Rechts geen border.

Bovenaan, onderaan en links wordt op een of andere manier gezorgd voor ruimte tussen de <ul>'s. Daardoor komen de borders van de verschillende <ul>'s daar niet tegen elkaar aan te staan.

Aan de rechterkant is dat niet zo. Een <ul> is een blok-element en wordt daarom normaal genomen even breed als zijn ouder. Dat is hier ook een <ul>, die dus ook een border heeft. Aan de rechterkant zouden daardoor de verschillende borders tegen elkaar aan komen te staan, zoals op de afbeelding is te zien.

Daarom haal ik rechts alle borders bij de geneste <ul>'s weg. De buitenste <ul> heeft bij body#toetsenbord ul#content een border gekregen, en die blijft gewoon staan. Dus ook rechts heb ik nog steeds 'n border.

padding: 4px 0 0 8px;

Wat ruimte boven en links tussen inhoud en border van de <ul>. Deze padding is wat aan de ruime kant, maar bij ronde hoeken heb je wat meer padding nodig. Gewoon even uitproberen hoeveel er nodig is.

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.

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

Iets lichtere achtergrondkleur dan die van ul#content.

font-size: 0.9em;

Bij body#toetsenbord ul is een lettergrootte van 2 em opgegeven. Hier verklein ik die iets voor de geneste lijsten. De 0.9 em is een relatieve maat, dat wil zeggen dat hij 0,9 keer zo groot is als letter uit de ouder, dus 0,9 x 2. De geneste <ul>'s hebben dus een iets kleinere letter dan de niet geneste. Oftewel: de buitenste ul#content heeft de grootste letter, want dat is de enige niet-geneste <ul>. Precies de bedoeling.

Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

body#toetsenbord ul ul ul

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Een ongeordende lijst binnen een ongeordende lijst binnen een ongeordende lijst.

De bij body#toetsenbord ul en body#toetsenbord ul ul opgegeven css werkt ook voor deze <ul>'s, want dubbel geneste <ul>'s zijn automatisch ook gewoon genest. En het zijn natuurlijk ook gewone <ul>'s. Hier hoef ik alleen de afwijkende of nieuwe css op te geven.

background: #ddd;

Iets lichtere achtergrondkleur dan bij body#toetsenbord ul ul is opgegeven, zodat dieper geneste lijsten lichter gekleurd zijn.

font-size: 0.85em;

Bij body#toetsenbord ul ul is een lettergrootte van 0.9 em opgegeven. Hier verklein ik die iets voor de dieper geneste lijsten. De 0.85 em is een relatieve maat, dat wil zeggen dat hij 0,85 keer zo groot is als de 0.9 em van ul ul. De dubbel geneste <ul>'s hebben dus een iets kleinere letter dan de eenmaal geneste. Oftewel: hoe dieper genest, hoe kleiner de letter. Precies de bedoeling.

Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

body#toetsenbord ul ul ul.titel li

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Een lijst-ingang binnen een ongeordende lijst met class="titel", maar alleen als die <ul> binnen een andere ongeordende lijst ligt, die ook weer binnen een ongeordende lijst ligt.

Dit zijn lijst-ingangen waarbinnen de langere teksten over voorbeelden en artikelen staan.

Deze selector is tamelijk lang. Deze lettergrootte mag namelijk alleen maar gelden voor lijst-ingangen die in minimaal dubbel geneste <ul>'s liggen.

font-size: 0.75em;

Bij body#toetsenbord ul ul ul is een lettergrootte van 0.85 em opgegeven. Hier verklein ik die iets voor deze lijst-ingangen. De 0.75 em is een relatieve maat, dat wil zeggen dat hij 0,75 keer zo groot is als de 0.85 em van ul ul ul.

Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

body#toetsenbord ul ul ul ul

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Een ongeordende lijst binnen een ongeordende lijst en dat dan nog twee keer.

De bij body#toetsenbord ul, body#toetsenbord ul ul en body#toetsenbord ul ul ul opgegeven css werkt ook voor deze <ul>'s, want driedubbel geneste <ul>'s zijn automatisch ook gewoon en dubbel genest. En ze zijn uiteraard ook een gewone <ul>. Hier hoef ik alleen de afwijkende of nieuwe css op te geven.

background: #eee;

Iets lichtere achtergrondkleur dan bij body#toetsenbord ul ul ul is opgegeven, zodat dieper geneste lijsten lichter gekleurd zijn.

font-size: 0.83em;

Bij body#toetsenbord ul ul ul is een lettergrootte van 0.85 em opgegeven. Hier verklein ik die iets voor dieper geneste lijsten. De 0.83 em is een relatieve maat, dat wil zeggen dat hij 0,83 keer zo groot is als de 0.85 em van ul ul ul. De driedubbel geneste <ul>'s hebben dus een iets kleinere letter dan de dubbel geneste. Oftewel: hoe dieper genest, hoe kleiner de letter. Precies de bedoeling.

Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

body#toetsenbord ul ul ul ul.titel li

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Een lijst-ingang binnen een ongeordende lijst met class="titel", maar alleen als die <ul> binnen drie andere ongeordende lijsten ligt.

Dit zijn lijst-ingangen waarbinnen de langere teksten over voorbeelden en artikelen staan.

Deze selector is tamelijk lang. Deze lettergrootte mag namelijk alleen maar gelden voor lijst-ingangen die in minimaal driedubbel geneste <ul>'s liggen.

font-size: 0.88em;

Bij body#toetsenbord ul ul ul ul is een lettergrootte van 0.83 em opgegeven. Hier verklein ik die iets voor deze lijst-ingangen. De 0.88 em is een relatieve maat, dat wil zeggen dat hij 0,88 keer zo groot is als de 0.83 em van ul ul ul ul.

Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

body#toetsenbord ul ul ul ul ul.titel li

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Een lijst-ingang binnen een ongeordende lijst met class="titel", maar alleen als die <ul> binnen vier andere ongeordende lijsten ligt.

Dit zijn lijst-ingangen waarbinnen de langere teksten over voorbeelden en artikelen staan.

Deze selector is tamelijk lang. Deze lettergrootte mag namelijk alleen maar gelden voor lijst-ingangen die in minimaal vierdubbel geneste <ul>'s liggen.

font-size: 1.1em;

Letter iets groter maken. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

Tot nu toe heb ik, van buiten naar binnen gaand in de sitemap, de lettergrootte steeds verkleind. Bij deze laatste verandering van lettergrootte, die dus het kleinste zou moeten zijn, vergroot ik de lettergrootte opeens.

De verkleiningen van de letters worden groter, naarmate de <ul>'s (en dus de daarin zittende lijst-ingangen) dieper genest zijn. Daarom hebben lijst-ingangen in een vierdubbel geneste <ul> een kleinere letter dan die in een driedubbel geneste <ul>. Dat hef je op door de letters bij de vierdubbel geneste <ul>'s weer iets groter te maken.

Nu hebben de langere teksten allemaal een even grote letter, ongeacht hoe diep ze zijn genest. Dat vind ik er beter uitzien.

Ik denk trouwens dat, als je heel nauwkeurig gaat kijken, er misschien nog wel meer correcties nodig zouden zijn op andere niveaus van nesting. Maar met het blote oog zie ik verder geen verschillen, dus ik vind het wel best zo. (Kan natuurlijk ook zijn dat ik een waardeloze opticien heb...)

body#toetsenbord li

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Alle lijst-ingangen.

position: relative;

Door de <li>'s relatief te positioneren, kan ik kinderen van de <li>'s absoluut positioneren ten opzichte van de <li>'s. Dit werkt ook al als je verder niets opgeeft. Voor de <li> zelf heeft dit dus geen enkel gevolg.

body#toetsenbord span.meer

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De spans met class="meer". Dit zijn de spans waar de » in staat.

display: none;

Deze tekens zijn alleen nodig bij de css voor de muis, niet bij de css voor het toetsenbord. Verbergen dus.

Veel spraakbrowsers en dergelijke zullen deze span nu ook volledig negeren, omdat display: none; is gebruikt. Dat is in dit geval een voordeel, omdat bij voorlezen en dergelijke dit teken natuurlijk geen enkel nut heeft.

body#toetsenbord ul.titel

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De ongeordende lijsten met class="titel".

Er zijn twee soorten ingangen in de sitemap: korte links of teksten als 'tekst' of 'lay-out', en langere titels van artikelen of voorbeelden. De langere titels staan allemaal in een <li>, die binnen een <ul> met class="titel" staat.

border-radius: 12px 0 0 12px;

Bij body#toetsenbord ul heb ik bij alle <ul>'s alle vier de hoeken rond gemaakt. Bij deze <ul>'s wil ik rechtsboven en -onder geen ronde hoeken, dat vind ik mooier.

padding: 2px 4px;

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

Wat afstand tussen buitenkant van de <ul> en de lijst-ingangen met de daarin staande tekst.

background: white;

Witte achtergrond.

body#toetsenbord ul.titel li

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De lijst-ingangen binnen de ongeordende lijsten met class="titel". Dit zijn de lijst-ingangen waar de langere teksten voor artikelen en voorbeelden in staan.

bottom: -3px;

De <li>'s 3 px omlaag zetten. Dit is alleen maar nodig voor Internet Explorer 7 en 8.

Iets lager geef ik een stippellijn aan de onderkant van de <li>'s, zodat duidelijker is welke link bij welke tekst hoort. Omdat de onderste <li> al net boven de border van de <ul> staat, is die stippellijn daar niet nodig. Daarom verberg ik hem onder de border van de <ul>.

Dat doe ik door hier de <li> en dus de stippellijn iets omlaag te zetten, en iets verderop een padding van 2 px aan de onderkant te geven. De andere browsers hebben hier geen last van, dus zet ik het gewoon hier neer.

In alle serieuze browsers verberg ik het onderste stippellijntje verderop gewoon met behulp van :last-child, maar dat kennen deze speelgoed-browsers niet.

margin-left: 20px;

Links een marge van 20 px. Met behulp van text-indent iets verderop zet ik de eerste regel weer terug naar links, zodat het lijkt alsof tweede en verdere regels inspringen.

border-bottom: black dotted 1px;

Stippellijn aan de onderkant. De tekst is soms wat kort, en de erbij horende links staan helemaal rechts. Deze stippellijn maakt duidelijker, welke links bij welke tekst horen.

padding: 4px 9em 2px 2px;

Bovenaan 4 px padding. Dat geeft wat ruimte tussen het stippellijntje van de bovenbuur en de tekst binnen de <li>.

Onderaan en links 2 px padding, zodat er wat afstand tussen kader of stippellijn en tekst is.

Links staan over tekst heen

Rechts een veel grotere padding van 9 em, want rechts worden de links naar voorbeeld en uitleg neergezet. Deze worden absoluut gepositioneerd. Als ik daar geen ruimte voor maak, komen die links over de tekst heen te staan, zoals hiernaast is te zien.

Als eenheid neem ik em, zodat deze ruimte mee verandert met de lettergrootte van de links.

Bij artikelen is deze ruimte niet nodig, verderop haal ik die daar weg.

text-indent: -20px;

De eerste regel binnen de <li> 20 px naar links zetten. Hierdoor zouden ze buiten de <li> en zelfs buiten de <ul> komen te staan. En dus ook buiten het kadertje rondom de <ul> en buiten de witte achtergrond. Maar omdat ik hierboven aan de linkerkant een marge van 20 px heb gegeven, staat de tekst toch volledig binnen <ul> en <li>, terwijl de eerste regel toch meer naar links staat dan tweede en latere regels.

body#toetsenbord ul.titel li:first-child

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De lijst-ingangen binnen de ongeordende lijsten met class="titel", maar alleen als het de eerste lijst-ingang is.

padding-top: 0;

Bij body#toetsenbord ul.titel li heb ik een padding aan de bovenkant gegeven, zodat er wat afstand komt tussen de tekst binnen de <li> en het stippellijntje van de <li> erboven. Boven de bovenste <li> zit echter geen lijntje, dus daar is die padding niet nodig. Als ik hem laat staan, krijg je 'n veel te grote lege ruimte tussen het kadertje van de <ul> en de tekst binnen de <li>.

body#toetsenbord ul.titel li:last-child

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De lijst-ingangen binnen de ongeordende lijsten met class="titel", maar alleen als het de laatste lijst-ingang is.

border: 0;

Bij body#toetsenbord ul.titel li heb ik aan de onderkant een stippellijntje neergezet, zodat duidelijker is welke links bij welke tekst horen. Omdat de onderste <li> gelijk boven een kadertje staat, is dat lijntje hier niet nodig. Dus wordt het weggehaald.

body#toetsenbord ul.titel a

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Alle links binnen de ongeordende lijsten met class="titel". Binnen deze <ul>'s liggen de langere teksten voor artikelen en voorbeelden.

position: absolute;

Om de links op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die een relatieve, absolute of fixed positie heeft. Dat is hier de <li> waar de link in staat.

right: 3px; bottom: 3px;

3 px vanaf de rechterkant en 3 px vanaf de onderkant van de <li> neerzetten. De links staan nu altijd rechts en onderaan, ongeacht hoeveel tekst er verder nog in de <li> zit. Dit is duidelijker dan wanneer de links gewoon als inline-element-element aansluitend op de tekst zouden zijn neergezet.

body#toetsenbord ul.titel a:last-child

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De links binnen de ongeordende lijsten met class="titel", maar alleen als het de laatste link is. Omdat ik zeker weet dat de laatste link altijd die met 'Voorbeeld' is, kan ik deze selector veilig gebruiken. Als dat niet altijd zo zou zijn, zou ik een class moeten gebruiken.

Liever zou ik a + a gebruiken, want ook in dat geval is de tweede <a> altijd de link met 'Voorbeeld'. En dat werkt, in tegenstelling tot :last-child, ook in Internet Explorer 7 en 8. Maar om onduidelijke redenen werkt in sommige <li>'s a + a niet in Google Chrome, en dit werkt wel goed.

(Dit is trouwens wereldgeschiedenis: niet Internet Explorer 7 of 8 veroorzaakt een probleem, maar 'n andere browser.)

Voor Internet Explorer 7 en 8 geef ik later aparte css.

right: 5.2em;

Er staan hoogstens twee links in een lijst-ingang binnen een <ul> met class="titel": die met 'Voorbeeld' en die met 'Uitleg'. In de html staat de link met 'Voorbeeld' altijd als eerste, die met 'Uitleg' als tweede en laatste. Deze css heeft dus betrekking op de link met 'Uitleg'.

Bij body#toetsenbord ul.titel a heb ik de links binnen de <ul>'s met class="titel" rechts gepositioneerd. Dat geldt dus ook voor deze link. Daardoor zouden de link met 'Voorbeeld' en die met 'Uitleg' over elkaar heen komen te staan.

Daarom zet ik hier de laatste link op een grotere afstand vanaf rechts, zodat hij naast de link met 'Voorbeeld' komt te staan en niet eroverheen. Als eenheid gebruik ik em, zodat de plaats mee verandert met de lettergrootte.

body#toetsenbord ul#artikelen ul.titel li

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De lijst-ingangen binnen een ongeordende lijst met class="titel", die weer binnen een ongeordende lijst met id="artikelen" ligt.

Binnen de <ul>'s met class="titel" liggen de lijst-ingangen met langere teksten voor voorbeelden en artikelen. Maar er zijn wat verschillen tussen de teksten en links voor artikelen en die voor voorbeelden. De tekst voor artikelen is één lange link, en bij voorbeelden is de tekst zelf geen link, maar zitten twee aparte links.

Daarom heb ik de <ul> waar de links naar artikelen in staan een eigen id gegeven: #artikelen. Daarbinnen staat dan weer de <ul> met class="titel". Dit geeft de mogelijkheid om voor artikelen en voorbeelden dezelfde css te gebruiken, en voor artikelen alleen te wijzigen wat afwijkend is.

padding-right: 3px;

Bij body#toetsenbord ul.titel li is rechts een padding van 9 em gegeven om ruimte te krijgen voor de linkst met 'Uitleg' en 'Voorbeeld'. Dat is hier niet nodig. Een kleine padding voor wat afstand tussen tekst en kadertje is voldoende.

text-align: right;

Standaard wordt tekst links uitgelijnd. Voor de langere links naar artikelen vind ik het mooier als die rechts worden neergezet.

body#toetsenbord ul#artikelen a

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

De links binnen de ongeordende lijst met id="artikelen".

Bij body#toetsenbord ul.titel a en later zijn allerlei instellingen opgegeven voor links binnen <ul>'s met class="titel". Ook de links naar artikelen liggen binnen zo'n <ul>. Nogal wat instellingen moeten worden veranderd voor de links naar artikelen.

Door de <ul> waarbinnen de artikelen liggen een id="artikelen" te geven, krijg ik de mogelijkheid om via deze ul#artikelen aparte instellingen voor de links naar artikelen op te geven.

display: block;

Een <a> is van zichzelf een inline-element-element. Door het te veranderen in een blok-element, kan ik eigenschappen als padding aan de onderkant gebruiken. Omdat elke <a> in een eigen <li> staat, is het hier geen probleem dat een blok-element op een nieuwe regel begint.

position: static;

Bij body#toetsenbord ul.titel a zijn de links binnen een <ul> met class="titel" absoluut gepositioneerd. Daaronder vallen ook de links naar artikelen. Hier haal ik die absolute positionering weer weg, waardoor de <a> op z'n gewone plaats komt te staan.

Door het weghalen van de absolute positie hebben ook right en bottom geen invloed meer.

padding-bottom: 2px;

Kleine afstand tussen de link naar het artikel en de onderkant van de <li>.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style> body#toetsenbord li {line-height: 1.2em;} </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 die uit de algemene stylesheet dan in principe overrulen.

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

<!--[if IE 7]> <link rel="stylesheet" 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 7 in. De css voor die versie komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

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

De toevoeging type="text/css" bij <style> of <link> is bij html5 niet meer nodig, omdat dit de standaardinstelling is.

body#toetsenbord li

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

line-height: 1.2em;

Hoewel Internet Explorer 7 vaak aartslui is en botweg weigert de meest simpele dingen uit te voeren, ontplooit de valsaard hier opeens een ongelooflijke activiteit: spontaan wordt aan de bovenkant van elke lijst-ingang een forse extra marge neergezet.

Geheel en al in lijn met het beleid van staatssecretaris Bleker zeg ook ik: weg met alle open ruimte, hoe mooi die misschien ook is. Maar waar Bleker alle natuur zo snel mogelijk door megastallen wil vervangen, houd ik het wat bescheidener: gewoon de overtollige ruimte weg, meer niet. Je kunt nou eenmaal geen megastal bouwen op 'n website.

1.2 em is ongeveer een standaardmaat voor de regelhoogte. Waarom Internet Explorer 7 die regelhoogte spontaan verandert, is me niet helemaal duidelijk, maar dit lost het op.

Speciaal voor Internet Explorer 7 en 8

<!--[if lt IE 9]> <style> body#muis li#home, body#muis ul ul {background: url(096-pics/space-1x1.png);} body#muis ul.titel li {background: url(096-pics/link.png);} body#muis ul.titel li:hover, body#muis li:hover {background: url(096-pics/wit.png);} body#muis a {background: url(096-pics/link-hover.png);} body#toetsenbord ul.titel a + a {right: 5.2em;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer ouder dan versie 9. Uitleg zie bij Speciaal voor Internet Explorer 7.

In de praktijk werkt dit alleen maar voor Internet Explorer 7 en 8, want eerdere versies herkennen hoveren alleen boven een <a>.

body#muis li#home, body#muis ul ul

Deze selectors hebben alleen maar effect, als de id van body 'muis' is.

De lijst-ingang met id="home" (dat is de lijst-ingang waar 'Home' in staat).

Verder alle ongeordende lijsten die binnen een andere ongeordende lijst liggen. Dat zijn alle <ul>'s, behalve de buitenste.

background: url(096-pics/space-1x1.png);

Om redenen die mij niet geheel duidelijk zijn, vertonen Internet Explorer 7 en 8 een nogal eigenaardig gedrag bij hoveren over sommige lijst-ingangen. Ongetwijfeld zijn hier bijzonder goede technische redenen voor en ben ik gewoon niet slim genoeg om die te kunnen begrijpen.

Microsoft zelf begreep het kennelijk ook niet helemaal, want de afwijkingen in Internet Explorer 8 zijn weer totaal anders dan die in Internet Explorer 7.

In Internet Explorer 7 blijft de achtergrond in de eerste lijst-ingang (die met 'Home') en in sommige andere lijst-ingangen volledig doorzichtig, terwijl die enigszins gekleurd zou moeten zijn.

In Internet Explorer 8 is dit fors verbeterd: hier blijven dezelfde elementen niet volledig doorzichtig, maar blijven ze volledig wit, al ga je erop staan dansen. Een geweldige technische prestatie van Microsoft, deze verbetering van doorzichtig naar knal-wit. Picasso is er niets bij.

Gelukkig blijkt er een oplossing te zijn, die in beide door een kennelijke sadist ontworpen krengen werkt.

Bij beide griezels zorgt het toevoegen van een volledig doorzichtig achtergrondplaatje ervoor, dat de juiste doorzichtige achtergronden worden getoond.

(Overigens werkt dit trucje vaak als er problemen met hoveren zijn in oudere versies van Internet Explorer.)

In Internet Explorer 9 werkt het wel goed. Voor het repareren van deze serie bugs heeft Microsoft slechts elf jaar nodig gehad! Complimenten!

body#muis ul.titel li

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

De lijst-ingangen binnen de <ul>'s met class="titel". Dit zijn de lijst-ingangen waarin de langere titels voor artikelen en voorbeelden staan.

background: url(096-pics/link.png);

Bij alle serieuze browsers wordt voor de doorzichtige achtergrondkleur rgba() gebruikt. Internet Explorer 7 en 8 kennen dit niet. Daarom wordt voor deze browsers een doorzichtige png gebruikt.

body#muis ul.titel li:hover, body#muis li:hover

Deze selectors hebben alleen maar effect, als de id van body 'muis' is.

Als over een lijst-ingang wordt gehoverd.

De eerste selector met de extra ul.titel is nodig, omdat hier gelijk boven de achtergrond-afbeelding met body#muis ul.titel li wordt ingesteld. Daarin zitten 3 elementen (body, ul en li), 1 id (muis) en 1 class (titel).

In body#muis li:hover zitten maar 2 elementen (body en li), 1 id (muis) en 1 pseudo-class (:hover). Dat heeft daarom te weinig specificiteit (gewicht) om de bij body#muis ul.titel li opgegeven achtergrond-afbeelding te wijzigen.

body#muis ul.titel li:hover telt 3 elementen (body, ul en li), 1 id (muis), 1 class (titel) en 1 pseudo-class (:hover). Dit heeft wel genoeg specificiteit om de achtergrond-afbeelding te kunnen veranderen.

background: url(096-pics/wit.png);

Bij andere browsers wordt een met rgba() gemaakte doorzichtige achtergrondkleur gebruikt, maar dat herkennen Internet Explorer 7 en 8 niet. Daarom wordt voor deze browsers een doorzichtige png gebruikt.

Deze png is gewoon wit, maar wel enigszins doorzichtig, zodat je door het wit heen de achterliggende tekst en dergelijke nog 'n heel klein beetje ziet.

body#muis a

Deze selector heeft alleen maar effect, als de id van body 'muis' is.

Alle links.

background: url(096-pics/link-hover.png);

De achtergrond van elke link moet iets donkerder worden. Omdat Internet Explorer 7 en 8 niet zoals andere browsers rgba() kennen, gebruik ik een doorzichtige png.

body#toetsenbord ul.titel a + a

Deze selector heeft alleen maar effect, als de id van body 'toetsenbord' is.

Een link die volgt op een andere link binnen een ongeordende lijst met class="titel". Dit zijn de links waar 'Uitleg' in staat.

In de algemene css heb ik bij body#toetsenbord ul.titel a:last-child :last-child gebruikt in de selector, maar dat kennen Internet Explorer 7 en 8 niet. Normaal genomen zou ik in de algemene css a + a hebben gebruikt, maar daar heeft Google Chrome in dit geval soms problemen mee. Daarom gebruik ik in de algemene css :last-child, en geef hier a + a op. Iedereen gelukkig en tevreden. Behalve ik, omdat het meer werk is.

right: 5.2em;

Er staan hoogstens twee links in een lijst-ingang binnen een <ul> met class="titel": die met 'Voorbeeld' en die met 'Uitleg'. In de html staat de link met 'Voorbeeld' altijd als eerste, die met 'Uitleg' als tweede en laatste. Deze css heeft dus betrekking op de link met 'Uitleg'.

Bij body#toetsenbord ul.titel a heb ik de links binnen de <ul>'s met class="titel" rechts gepositioneerd. Dat geldt dus ook voor deze link. Daardoor zouden de link met 'Voorbeeld' en die met 'Uitleg' over elkaar heen komen te staan.

Daarom zet ik hier de laatste link op een grotere afstand vanaf rechts, zodat hij naast de link met 'Voorbeeld' komt te staan en niet eroverheen. Als eenheid gebruik ik em, zodat de plaats mee verandert met de lettergrootte.

Op de server verwerkte SSI-code om css te kunnen kiezen

<!--#if expr="$QUERY_STRING == toetsenbord" --> <body id="toetsenbord"> <a id="naar-muis" href="lijst-096-dl.shtml" title="Werk je liever met de muis? Ga naar deze pagina">Werk je liever met de muis? Ga naar deze pagina</a> <!--#else --> <body id="muis"> <a id="naar-toetsenbord" href="lijst-096-dl.shtml?toetsenbord" title="Gebruik je liever toetsenbord dan muis? Ga naar deze pagina">Gebruik je liever toetsenbord dan muis? Ga naar deze pagina</a> <!--#endif -->

Voor een groot deel is dit normale html, de speciale code bestaat uit slechts drie regels:

<!--#if expr="$QUERY_STRING == toetsenbord" -->

(Als dit zo is, doe dan wat hier staat)

<!--#else -->

(Doe anders dit)

<!--#endif -->

(Stop met kiezen)

Het is belangrijk dat de spaties in deze regels precies zo worden overgenomen: geen spaties aan het begin, wel een spatie voor -->.

Een pagina waar SSI in voorkomt eindigt niet op .html, maar op .shtml. Daardoor weet de server dat in de pagina SSI kan staan.

Elke SSI-regel begint met <!--# gevolgd door een bepaalde uitdrukking, en elke regel eindigt met -->, voorafgegaan door een spatie.

De afzonderlijke regels:

<!--#if expr="$QUERY_STRING == toetsenbord" --> <!--#

Het standaardbegin van een SSI-regel.

if

Dit is 'n makkelijke: gewoon het Engelse woord voor 'als'. Wat na deze regel komt, wordt alleen uitgevoerd, getoond, of wat dan ook als aan de voorwaarde die hierop volgt, wordt voldaan. Die voorwaarde is hier:

expr="$QUERY_STRING == toetsenbord"

Achter expr= komt tussen aanhalingstekens de voorwaarde, waaraan voldaan moet worden. Die is hier:

$QUERY_STRING == toetsenbord

Met SSI kun je een hele reeks gegevens opvragen over de site, over de server, over de browser die wordt gebruikt, enz., enz. Die gegevens worden opgeslagen in een zogenaamde variabele. Een variabele is een soort envelop, waarvan de inhoud kan variëren.

Een van de meest eenvoudige variabelen is DATE_LOCAL. Hierin ligt de lokale tijd van de server waar de site op staat opgeslagen.

Van een variabele is de naam, de verpakking, altijd hetzelfde, maar de inhoud kan variëren. Als het vandaag 20 april is, zit in DATE_LOCAL onder andere het getal 20. Maar morgen zit het getal 21 erin. Dat is een basiskenmerk van een variabele: de inhoud kan variëren, is variabel.

QUERY_STRING is net zo'n variabele. Alleen is een computer niet echt geweldig slim. Als je alleen QUERY_STRING schrijft, denkt de sukkel dat je het letterlijke woord 'QUERY_STRING' bedoelt. Terwijl het om de inhoud van QUERY_STRING gaat. Om aan te geven dat het om de inhoud gaat, en niet om het letterlijke woord 'QUERTY_STRING' zet je er 'n dollar voor: $QUERY_STRING. Nu weet de server dat het om de inhoud van QUERY_STRING gaat, en niet om het woord QUERY_STRING zelf.

Een query-string is het deel van een url dat na het vraagteken komt. In

lijst-096-dl.shtml?toetsenbord

is toetsenbord de query-string. Bij zo'n url zou er dus 'toetsenbord' in de variabele QUERY_STRING zitten.

==

Het deel voor en na het dubbele isgelijkteken moet precies hetzelfde zijn. Simpel gezegd (en ietwat foutief) betekent één isgelijkteken dat het ongeveer hetzelfde moet zijn, en twee isgelijktekens betekenen dat het precies hetzelfde moet zijn.

toetsenbord

Het stuk achter het dubbele isgelijkteken. Het deel voor het isgelijkteken wordt hier mee vergeleken. Nogmaals de hele vergelijking:

$QUERY_STRING == toetsenbord

Als de inhoud van QUERY_STRING precies hetzelfde is als toetsenbord.

Oftewel:

Als in de url na het vraagteken precies 'toetsenbord' staat. Als dat zo is, dan wordt gedaan wat er na deze regel komt. In dit geval is dat het invoegen van wat gewone html.

De hele handel nog 'ns in gewone mensentaal:

Als de query-string exact 'toetsenbord' is, voeg dan deze html in:

<body id="toetsenbord"> <a id="naar-muis" href="lijst-096-dl.shtml" title="Werk je liever met de muis? Ga naar deze pagina">Werk je liever met de muis? Ga naar deze pagina</a>

Doe dat in alle andere gevallen niet.

-->

De afsluiting van de regel. Vergeet de spatie voor de --> niet.

<!--#else --> <!--#

Aan het begin weer de standaard <!--# zonder spatie, om duidelijk te maken dat het hier om SSI gaat.

else

is ook weer 'n makkelijke: gewoon Engels voor 'anders'. Hier moet je dat lezen als:

als aan de eerste regel (die met #if) is voldaan, prima, maar anders moet je uitvoeren wat hieronder staat.

Als aan de eerste SSI-regel is voldaan, wordt wat hieronder staat gewoon helemaal genegeerd. Anders wordt de hieronder staande html ingevoegd:

<body id="muis"> <a id="naar-toetsenbord" href="lijst-096-dl.shtml?toetsenbord" title="Gebruik je liever toetsenbord dan muis? Ga naar deze pagina">Gebruik je liever toetsenbord dan muis? Ga naar deze pagina</a> -->

De afsluiting van de regel. Vergeet de spatie voor de --> niet.

Nu heb ik dus een body met id="toetsenbord" óf een body met id="muis", afhankelijk van of 'toetsenbord' wel of niet in de url, in de query-string, zit. De inhoud van de link gelijk onder body is daar ook afhankelijk van. En omdat dit volledig op de server wordt uitgevoerd, merkt de browser van de gebruiker hier helemaal niets van. Die krijgt gewoon een pagina normale css en html met één body en één link.

Als je de href in de links bekijkt, zie je ze dat linken naar de pagina zelf. Ze staan in lijst-096-dl.shtml en dat is ook waar naartoe wordt gelinkt. Maar bij de body met id="muis" komt er achter de link nog ?toetsenbord te staan. De query-string wordt toetsenbord. En dat is - niet geheel toevallig - precies waarop met behulp van SSI wordt getest.

Vanaf de ene link wordt dus wel, vanaf de andere link wordt niet voldaan aan de voorwaarde uit de eerste SSI-regel, die met #if: doe iets als toetsenbord in de query-string zit.

<!--#endif -->

Een computer lijkt 'n beetje op 'n kleuter die wordt voorgelezen voor het slapen. Als je niet duidelijk vertelt dat dit écht het laatste verhaaltje was en dat het nu écht over is, blijft 't stomme ding (de computer, niet de kleuter) gewoon denken dat hij nog met SSI bezig is.

Het woord endif maakt duidelijk dat het over en uit is. De eerste regel begon met if, en de laatste regel begint met endif. En anders dan een kleuter luistert de computer hier altijd naar zonder z'n goede humeur te verliezen. (En toch zijn kleuters vreemd genoeg veel leuker dan computers. De wereld is soms toch wel wat ingewikkeld.)

Aan het begin weer de inmiddels bekende <!--# zonder spatie, aan het eind de --> met een spatie ervoor.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

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

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

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

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

Enkele tips die helpen bij toegankelijkheid:

Specifiek voor dit voorbeeld

Getest in

Laatst gecontroleerd op 24 april 2011.

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

Bekende problemen

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

Touchscreen (Android en iPad)

Deze constructie is volledig ongeschikt voor een touchscreen, omdat er nou eenmaal geen cursor is op een touchscreen. Bovendien zijn beide menu’s veel en veel te groot voor kleinere schermen.

Problemen met betrekking tot SSI (alle browsers)

Eigenlijk kunnen er geen echte problemen zijn, want dit werkt helemaal niet of helemaal wel.

Je kunt dit alleen maar testen op een server, niet op je thuiscomputer. Tenzij je zelf 'n server installeert.

Internet Explorer 7

Internet Explorer 8

Bij uitzoomen (verkleinen) verdubbelen bij de css voor het toetsenbord sommige horizontale lijntjes. Dit zijn afrondingsverschillen, waar niets aan te doen is.

Internet Explorer 7 en 8

Internet Explorer 9

Bij sterk uitzoomen (verkleinen) verdwijnt bij de css voor het toetsenbord de verticale rand aan de rechterkant. Dit zijn afrondingsverschillen, waar niets aan te doen is.

Google Chrome

Opera

Safari en Firefox

Bij beide soorten css verdubbelen bij uitzoomen (verkleinen) sommige horizontale lijntjes. Dit zijn afrondingsverschillen, waar niets aan te doen is.

Wijzigingen

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

:

Nieuw opgenomen.

12 juli 2012:

  • Hoofdstukje Getest in volledig vervangen.
  • Bij <style> overal type="text/css" weggehaald, omdat dit in html5 de standaard-instelling is.
  • Overal -webkit-border-radius en -moz-border-radius weggehaald, omdat alle browsers inmiddels gewoon border-radius herkennen.
  • Bij Bekende problemen stukje over Touchscreens toegevoegd.