Skip links en inhoudsopgave

Laatst aangepast: 23 november 2011

Kies via een dropdownmenu een afbeelding en open de bijbehorende pagina

Korte omschrijving

Als je met de cursor over een van de witte vlakken hovert, opent een rijtje met links of een submenu met een nieuwe rij witte vlakken. Als je vervolgens over 'n link hovert, opent een afbeelding. Bij klikken op 'n link opent de bijbehorende pagina. De submenu's met witte vlakken werken precies hetzelfde, maar dan een niveau lager.

De weg door het menu is te volgen omdat hoger liggende ingangen verkleuren.

De cursor kan 'veilig' bewogen worden (zonder dat er van alles openfloept) door deze over de groene banen te bewegen.

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

Dit menu is 'n soort uitklapmenu. Vrijwel altijd zijn die geschreven in JavaScript. Als ze niet volledig met JavaScript werken, wordt voor Internet Explorer 6 toch wat JavaScript toegevoegd, omdat hover bij Internet Explorer 6 alleen maar werkt bij 'n link ('n <a>). Bij alle andere moderne browsers werkt hover op elk element.

En dus ontstaat er 'n probleem. Voor 'n uitklapmenu moet er 'n submenu openen als je over iets anders hovert. En dat kan bij Internet Explorer 6 dus alleen als je over 'n <a> hovert. Maar 'n <a> mag je niet nesten, dus je kunt niet bij het hoveren over 'n <a> 'n submenu met 'n lijst <a>'s laten openen. Laat staan dat je op nog meer niveaus links zou mogen nesten.

Voor alle andere browsers is 't relatief simpel. Het eerste niveau, de bovenste knoppen die altijd zichtbaar zijn, is gewoon 'n ongeordende lijst. Bij het hoveren over een van de <li>'s uit die lijst opent 'n rij links. Of eventueel 'n andere lijst (<ul>), 'n submenu, waarin dan de links staan. In dit menu gaat 't niet dieper dan twee niveaus maar technisch gezien is er geen reden waarom 't niet dieper zou kunnen. Of 't dan nog gebruiksvriendelijk is, is 'n ander verhaal.

Zolang er submenu's zijn wordt 'n ongeordende lijst genest, en zodra je op 't laatste niveau bent aangekomen gebruik je 'n link, 'n <a>. Er wordt dus nooit 'n <a> genest. En omdat de hele lay-out via css wordt gedaan, heb je zonder css 'n serie ongeordende lijsten met daarin per <li> 'n rij links: heel overzichtelijk.

Omdat het om behoorlijk wat links gaat (meer dan 192), staat aan het begin van de html 'n skip-link. Dat is 'n link waarmee je in één keer alle links passeert en naar de tekst (of wat dan ook) op de pagina gaat. Zodat mensen met bijvoorbeeld 'n spraakbrowsers niet eerst het opwindende rijtje 'engel-1' tot en met 'engel-40' krijgen voorgelezen, als ze dat niet willen.

Om dezelfde reden heb ik 'n onderverdeling gemaakt in <h1>, <h2> en <h3>. De meeste speciale programma's hebben een mogelijkheid om een lijst met alle kopregels op 'n pagina te laten zien. Op die manier kun je redelijk snel van groep naar groep gaan.

Dit is 'n mooi verhaal, maar je hebt er dus niets aan voor Internet Explorer 6. En daar komt de truc van bovengenoemde site om de hoek kijken. De truc houdt het volgende in:

Open 'n <a>. Zet in die <a> 'n tabel met daarin 'n cel. Zet in die cel het submenu (dus de <ul> met de <a>'s die bij dat submenu horen). Sluit de tabel af en sluit dan pas de eerste <a>.

Dit is absoluut volledig foute code, waar elke fatsoenlijke browser volledig van uit z'n bol gaat. Maar Internet Explorer 6 is geen fatsoenlijke browser, dus die vreet dit gewoon. En gedraagt zich dan net als alle andere browsers bij dit menu.

Het is fout omdat je binnen de eerste <a> 'n <table> en 'n <ul> zet. Beide zijn blok-elementen, en 'n <a> is 'n inline-element. 'n Blok-element mag nooit zonder meer in 'n inline-element worden gezet: je zet ook geen boekenkast in je boek.

Verder wordt er 'n hele serie <a>'s, het submenu, in de eerste <a> genest, iets wat ook problemen op hoort te leveren. Deze volledig foutieve code in combinatie met alle bugs in Internet Explorer 6 blijkt 'n werkend uitklapmenu op te leveren.

Nu is 't alleen nog zaak om deze verschrikkelijke code voor alle andere browsers te verbergen op zo'n manier, dat de code ook in de toekomst geen problemen gaat opleveren.

In html kun je commentaar neerzetten tussen <!-- en -->. Dat wordt genegeerd door alle browsers. Een van de weinige echte slimmigheden van Microsoft op 't gebied van html is 't toevoegen van eigen speciale codes binnen dat commentaar, waar alleen Internet Explorer op reageert: conditional comments. En dat is volledig geldig, want binnen commentaar mag je alles neerzetten wat je wilt, al wil je er de gezamenlijke wartaal van Wilders, Verdonk en Kamp parkeren.

De code voor Internet Explorer 6 wordt dus in 'n conditional comment gezet, wat alleen door Internet Explorer 6 wordt gelezen.

De css is ook veel uitgebreider dan nodig zou zijn zonder Internet Explorer 6. Voor alle browsers wordt hoveren over 'n <li> gebruikt, maar voor Internet Explorer 6 is overal 'n aparte selector nodig die hoveren over 'n <a> gebruikt.

Andere browsers dan Internet Explorer 6 hebben ook alleen maar 'n <a>, 'n link, nodig als er echt ergens naartoe wordt gelinkt. Voor deze browsers is het niet nodig om bijvoorbeeld 'Dieren', wat alleen maar 'n kopje in het menu is, op te nemen in een <a>. Maar voor Internet Explorer 6 wel, omdat hoveren anders niet wordt herkend.

Dit is code die dus volstrekt niet valid is. Ik durf dit alleen maar aan omdat alle andere andere browsers, de validator, enz. het gewoon helemaal niet zien. En omdat ik 'n methode gebruik die officieel is goedgekeurd door de maker van de browser, dus die methode blijft gewoon bestaan. En 't belangrijkste: Internet Explorer 6 verandert niet meer, er komen hooguit nog beveiligings-updates. Met bijvoorbeeld Opera zou ik dit nooit zo durven doen, omdat je er vergif op kunt nemen dat met 'n update een van de afwijkingen van de standaard of een van de bugs wordt verbeterd, en dan zou het hele kaartenhuis in elkaar storten.

Verder staat om alle onderdelen van het menu nog 'n kadertje. En bij hoveren over 'n ingang in het menu kleurt die ingang grijs. De hele serie ingangen die naar 'n link leidt blijft grijs, zodat je duidelijk kunt zien waar 'n ingang 'n onderdeel van is.

Door het gebruik van em als maateenheid op vrijwel alle plaatsen kun je de lettergrootte veranderen, terwijl de lay-out van 't menu intact blijft (met wat kleine problemen bij zoomen, zie Bekende problemen).

Het verschil tussen li:hover en a:hover

In veel regels staan twee selectors, die erg op elkaar lijken. Selectors worden gescheiden door een komma.

De linker selector is steeds voor alle browsers behalve Internet Explorer 6, de rechter is voor Internet Explorer 6.

Internet Explorer 6 negeert de :hover bij de <li> in de eerste selector, omdat hij dat gewoon niet kent.

De andere browsers negeren de tweede selector, omdat alleen in de code voor Internet Explorer 6 'n <ul> in 'n <a> voorkomt. Andere browsers kunnen die opdracht dus onmogelijk uitvoeren bij gebrek aan 'n <ul> in 'n <a>.

Behalve Internet Explorer 6 herkennen alle moderne browsers een :hover over alle elementen, ook over een <li>. Aan de linkerkant staat dus regelmatig li:hover: doe iets als ik over 'n <li> hover. Voordeel van het hoveren over 'n <li> in 'n <ul> is dat je 'n <li> gewoon mag nesten. Dat wil zeggen: je mag de <ul> nesten, en dus ook de daarin liggende <li>'s.

Omdat 'n <ul> van 'n niveau lager dus gewoon 'n onderdeel is van 'n <li> van 'n hoger niveau, zal die <li> ook netjes wit blijven als ik over de daarin zittende <ul> hover.

Internet Explorer 6 herkent dat hoveren over 'n <li> echter niet, die herkent alleen hoveren over 'n <a>. En daar komt de truc met de geneste <a>'s en de tabellen daarin om de hoek kijken: die blijkt wel te werken bij Internet Explorer 6. Maar omdat die code zwaar fout is, moet die wel worden verborgen voor alle andere browsers.

De tweede selector is voor Internet Explorer 6. In de basis is hij hetzelfde als de eerste selector, maar er zijn wat <a>'s toegevoegd zodat Internet Explorer 6 het hoveren kan herkennen.

In de beschrijving van code en css beschrijf ik steeds alleen maar de eerste selector, omdat ze in wezen hetzelfde werken. Overal waar over 'n <li> wordt gehoverd, moet je voor Internet Explorer 6 'n <a> lezen. Als je de tweede selector met de eerste vergelijkt, worden eventuele verdere kleine verschillen gelijk duidelijk.

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

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

Dit voorbeeld zou ideaal zijn om ook :focus en :active te gebruiken, maar helaas werkt dit niet op lijsten en lijstingangen. Zou het wel werken, dan zou de toegankelijkheid voor mensen die de Tab-toets gebruiken gelijk ook goed zijn, maar helaas...

Beschrijving van code en css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<style type="text/css">

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

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

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


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

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

Slim om te doen, is soms wat afwijkend in verschillende browsers.

font-family: Arial, Helvetica, sans-serif;

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

color: black;

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de tekstkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en tekstkleur geen van beide.

background: #ff9;

Gewoon 'n lichtgeel achtergrondkleurtje.

a#skipper

De link met id="skipper". Deze link staat boven het menu en linkt naar een anker aan het begin van de 'gewone' tekst in de pagina, dus helemaal voorbij het menu.

Normaal genomen zie je deze link niet, omdat hij links buiten het scherm staat geparkeerd. Maar spraakbrowsers en dergelijke 'zien' de link wel en lezen hem dus gewoon voor. Pas als de link focus heeft (als je op Enter drukt, wordt de link gevolgd), wordt hij op het scherm zichtbaar.

Dit is belangrijk voor mensen die de muis niet goed kunnen gebruiken en van link naar link gaan met de Tab-toets (of 'n soortgelijke toets). Zodra deze link wordt bereikt en dus focus heeft, wordt hij zichtbaar.

De link wordt hier al helemaal opgemaakt, maar dat zie je dus pas allemaal als hij focus heeft.

position: absolute;

Om de link op 'n bepaalde plaats neer te kunnen zetten.

left: -2000px;

Ver links buiten het scherm parkeren. Mensen die 'n gewone browser met css gebruiken, zien de link niet. Maar speciale programma's zoals spraakbrowsers lezen hem wel gewoon voor. Dat is ook precies de bedoeling, want mensen die 'n gewone browser gebruiken, hebben deze link niet nodig.

Ik zet de link liever buiten het scherm dan hem onzichtbaar te maken met display: none; of zoiets, omdat sommige spraakbrowsers en dergelijke hem anders negeren.

top: 0;

Bovenaan het venster neerzetten.

z-index: 50;

De link moet altijd zichtbaar zijn, dus 'n hoge z-index.

width: 10.5em; height: 4.8em;

Hoogte en breedte van het venstertje waar de link in staat. Als eenheid neem ik em, zodat het venstertje mee verandert met de lettergrootte.

border: red solid 3px; background: white;

Knalrode brede rode rand rondom een witte achtergrond, zodat de link goed opvalt en mensen hem niet missen. Dat dit foeilelijk is, maakt niets uit: het is alleen zichtbaar als de link focus heeft.

line-height: 4.8em;

Regelhoogte even hoog als het venstertje. Omdat tekst altijd in het midden van de regelhoogte wordt neergezet, staat de tekst van de link hierdoor verticaal gecentreerd.

text-align: center;

Tekst van de link horizontaal centreren.

a#skipper:focus

De link met id="skipper", maar alleen als deze focus heeft.

Als een link focus heeft, wordt de link gevolgd als je op Enter drukt. Mensen die de muis niet (goed) kunnen gebruiken, kunnen van link naar link springen met behulp van de Tab-toets (of een soortgelijke toets). Op het moment dat ze bij deze link aankomen, heeft de link focus.

Als nogmaals op de Tab-toets wordt gedrukt, heeft de link geen focus meer en werkt de bij deze selector horende css dus niet meer.

left: 0;

De link is bij a#skipper ver links buiten het scherm geparkeerd en dus niet zichtbaar. Hiermee wordt hij op het scherm gezet en dus zichtbaar.

div#afbeeldingen

De div met id="afbeeldingen". De div waar het hele menu in staat. Dit geeft de mogelijkheid om het hele menu te centreren en om te positioneren ten opzichte van deze div.

position: relative;

Door een positie te geven aan deze div kan ik de kind-elementen positioneren ten opzichte van deze div. Zelfs als ik verder niets invul bij deze positie.

width: 700px;

Deze breedte past ook nog op 800x600-schermen.

margin: 15px auto 0;

Omdat hier maar drie waarden zijn ingevuld, wordt links automatisch hetzelfde genomen als rechts. Hier staat dus eigenlijk 15px auto 0 auto in de volgorde boven - rechts - onder - links. 15 px marge aan de bovenkant, onderaan niets, en links en rechts auto oftewel: evenveel, oftewel: horizontaal gecentreerd. Deze manier van horizontaal centreren werkt alleen maar als het te centreren element een breedte heeft.

Algemene instellingen

Hier staan de instellingen die (min of meer) voor het hele menu gelden.

h1, h2, h3

Alle kopregels nummer 1 tot en met 3. Andere kopregels worden niet gebruikt op deze pagina.

Het gebruik van kopregels heeft twee voordelen. Zoekmachines geven meer gewicht aan de inhoud van 'n kopregel, en binnen de kopregels weer meer aan 'n <h1> dan aan 'n <h2>, enz.

Het tweede voordeel: bijzondere programma's zoals spraakbrowsers kunnen meestal een lijstje van kopregels laten zien en van kopregel naar kopregel springen. Mensen die niet kunnen hoveren of die css uit hebben staan, hoeven dus niet alle ruim 192 links een voor een door te worstelen, maar kunnen in één keer naar de juiste groep.

Ik gebruik de kopregels hier alleen maar om structuur in het menu aan te brengen, niet voor het uiterlijk. Dat uiterlijk pas ik hieronder aan, zodat de kopregels er als gewone normale tekst uit komen te zien.

margin: 0;

Een kopregel heeft van zichzelf een marge aan boven- en onderkant. Die zitten hier in de weg, want ik gebruik de kopregels alleen maar om structuur aan te brengen in het menu, niet voor het uiterlijk.

font-size: 1em; font-weight: normal;

Kopregels hebben, behalve de minst belangrijke zoals <h6>, een grotere letter, en ze worden vet weergegeven. Ook dat wil ik niet.

Door em als eenheid te nemen kunnen ook gebruikers van Internet Explorer de lettergrootte aanpassen.

De kopregels die binnen het eigenlijke menu komen te staan (<h2> en <h3>) worden verderop nog kleiner gemaakt. Ik had dus in dit geval de lettergrootte ook kunnen instellen bij de aparte instellingen voor <h1> hieronder.

h1

De belangrijkste kopregel. Hier staat daar alleen maar 'Kies een afbeelding' in. Normaal genomen is het wel handig om daar, met oog op bijvoorbeeld een zoekmachine, een iets duidelijker tekst in te zetten, die beter omschrijft waar het om gaat.

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

Randje rondom de kopregel, behalve aan de onderkant. Deze kopregel staat boven de <ul> waarin het eigenlijke menu staat. Omdat die <ul> ook een border krijgt, zou je anders aan de onderkant 'n dubbele lijn krijgen.

padding: 3px 0;

Omdat hier maar twee waarden zijn ingevuld, krijgt onder automatisch dezelfde waarde als boven en links dezelfde waarde als rechts. Hier staat dus eigenlijk 3px 0 3px 0 in de volgorde boven - rechts - onder - links. 'n Kleine afstand boven en onder tussen tekst en rand. Margin is hier ongeschikt, omdat 'n marge buiten de border wordt gezet en je dus 'n kier zou krijgen tussen de border rondom de <h1> en de border rondom de <ul> die daaronder staat.

text-align: center;

Tekst horizontaal centreren.

color: black;

Tekstkleur zwart.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de tekstkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en tekstkleur geen van beide.

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

background: #cf9;

Achtergrondkleurtje. 'n Blok-element zoals 'n <h1> krijgt in de regel automatisch dezelfde breedte als het ouder-element. Dat is hier div#afbeeldingen. Omdat die div 700 px breed is, wordt deze kopregel dat ook en vult de achtergrondkleur dus de volle breedte van div#afbeeldingen.

ul

Alle ongeordende lijsten.

list-style-type: none;

Ik wil hier natuurlijk niet de bolletjes en dergelijke die bij 'n lijst horen.

margin: 0; padding: 0;

Er zit verschil tussen de verschillende browsers, hiermee stel ik het voor allemaal hetzelfde in. Min of meer in ieder geval...

font-size: 0.85em;

Alle letters binnen het menu wil ik iets kleiner hebben dan standaard, omdat de woorden anders te veel ruimte innemen. Ik heb bij body 'n iets grotere letter dan normaal opgegeven vanwege m'n leeftijd en opa z'n ogen, dus in feite krijg ik hier nu 'n soort standaardgrootte.

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

height: 6.5em;

De achtergrond van het menu moet groen worden. Als ik geen hoogte opgeef, krijg ik alleen maar 'n dun groen lijntje (behalve in Internet Explorer 6, maar die doet 't dus gewoon hartstikke fout).

Normaal genomen zou de inhoud van de <ul> zorgen voor de hoogte, maar omdat ik nogal gebruik maak van float en absolute posities gaat dat hier niet goed. Zonder hoogte zou bovendien de tekst op de pagina gedeeltelijk rechts van de naar links gefloate <li>'s komen te staan.

Met deze simpele opdracht voorkom ik dus bergen ellende. En ik gebruik 't ook om onderaan 'n extra strookje groen te maken, gewoon voor 't mooie (vind ik).

Door als eenheid em te nemen verandert de hoogte mee met de lettergrootte, en blijft de lay-out dus min of meer intact bij 'n andere lettergrootte.

background: #cf9;

Achtergrondkleurtje.

border: black solid 1px;

Randje rondom de hele lijst, dus rondom 't hele menu. Dit randje sluit naadloos aan op de rand rondom de <h1> die boven deze <ul> staat.

ul li

Elke <li> binnen een <ul>. Omdat elke <li> binnen 'n <ul> móét staan, geldt dit dus voor elke <li> binnen het menu. Dus ook voor de <li>'s die binnen geneste <ul>'s staan. Op deze manier kan ik heel veel basis-instellingen in één keer opgeven. Als dat nodig is, kan ik voor de <li>'s binnen de geneste <ul>'s bepaalde instellingen later weer overrulen.

In dit voorbeeld staat binnen elke <li> een serie links of een sub-<ul>. Die sub-<ul> bevat dan weer <li>'s met daarin een serie links. Ook staat er nog 'n <h2> of <h3> in met de groepsnaam van de afbeeldingen, zoals Dieren en Kinderen. In eerste instantie is alleen die groepsnaam zichtbaar.

float: left;

Binnen elke <li> staat onder andere de groepsnaam van de afbeeldingen, zoals Dieren en Kinderen. In eerste instantie is alleen die groepsnaam zichtbaar. 'n <li> is een blok-element, dus elke <li> zou normaal genomen op 'n nieuwe regel komen te staan.

Door ze naar links te floaten komen ze naast elkaar te staan en gaan pas naar 'n nieuwe regel als het niet meer past. Hierdoor komen dus ook de groepsnamen netjes naast elkaar te staan, want die staan in de <li>'s.

width: 7.5em;

Normaal genomen vult een blok-element de volle breedte van het ouder-element. Hier niet, omdat ik ze float. Hier krijgen ze alleen de breedte die nodig is voor de tekst, dus dat levert 'n foeilelijk schots en scheef gedoe op. Door ze allemaal dezelfde breedte te geven krijg ik 'n aantal rechte kolommen met daarin de groepsnamen netjes onder elkaar.

Door als eenheid voor de breedte em te nemen verandert deze mee met de lettergrootte en blijft de lay-out dus min of meer intact bij 'n andere lettergrootte.

margin: 0 10px;

Omdat geen waarde voor onder en links is opgegeven, krijgen die automatisch de waarde van boven en rechts. Hier staat dus eigenlijk 0 10px 0 10px in de volgorde boven - rechts - onder - links. De marge links en rechts geeft 'n afstand tussen de kolommen.

Die afstand is niet alleen voor het oog nodig. Als ik over een van de witte vlakken met 'n groepsnaam hover, opent 'n rij links of 'n submenu. Ik moet dus ruimte hebben waar ik de cursor kan bewegen zonder dat er iets opent, anders zijn de middelste groepsnamen volstrekt onbereikbaar. Wel aardig als je 'n site maakt voor iemand aan wie je 'n hekel hebt, grinnik. 'Het winnende nummer bevindt zich onder het middelste witte veld.'

text-align: center;

Tekst horizontaal centreren. Het gaat hier om álle tekst binnen de <li>'s, dus ook om de tekst binnen links, spans, enz. Voor zover dat nodig is kan ik dat later weer overrulen voor elementen binnen de <li>'s.

color: black;

Tekstkleur zwart.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de tekstkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en tekstkleur geen van beide.

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

background: white;

Witte achtergrond.

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

Randje rondom elke <li>, en dus rondom elke groepsnaam die daarin staat. Behalve aan de bovenkant. Omdat de <li>'s tegen elkaar aan komen te staan, zou ik anders 'n dubbele lijn krijgen waar twee <li>'s elkaar raken.

De bovenste <li>'s staan helemaal bovenin de <ul>. En omdat die <ul> ook 'n randje heeft, hebben alle <li>'s dus volledig rondom 'n rand.

ul li.sub-een

De <li>'s met id="sub-een" binnen 'n <ul>. Dit zijn de <li>'s van de groep Ruimte, in dit voorbeeld de enige ingang met een submenu.

height: 2.5em;

Omdat de namen van de subgroepen binnen de groep Ruimte nogal lang zijn, vond ik het beter om ze over twee regels te verdelen. Bijvoorbeeld 'Ruimtewezens lopend' worden dus twee onder elkaar staande woorden. Maar de laatste groepsnaam is 'Ruimteschepen', dus maar één woord. En de <li> wordt uit zichzelf niet hoger dan nodig is voor de tekst.

In dit geval zouden dus de eerste vijf <li>'s 2 regels hoog worden, en de laatste maar één regel. De laatste <li> wordt dus twee keer zo laag als de eerste vijf. Dat is lelijk. En het levert 'n probleem op bij het hoveren.

Als ik over 'n groepsnaam hover, opent 'n rij met links. Als ik daarna over die links hover, opent 'n afbeelding. Bij de eerste vijf gaat dat goed, maar omdat de laatste <li> zo laag is, ontstaat er 'n kier tussen de <li> en de rij met links. En als de cursor over die kier hovert, sluiten de links. Ongeveer vergelijkbaar met 'n onbeantwoorde liefde: hartstikke mooi, maar onbereikbaar.

1,2 em is ongeveer de normale regelhoogte. 2,5 em zorgt er dus voor dat alle <li>'s even hoog zijn en dat er (enigszins ruim) twee regels binnen passen. Door als eenheid em te nemen verandert de hoogte mee met de lettergrootte en blijft de lay-out dus min of meer intact bij 'n andere lettergrootte.

Alle andere groepsnamen moeten juist wel op één regel komen te staan. Als 'n groepsnaam uit meerdere woorden bestaat, zet Internet Explorer 7 die om een of andere reden soms opeens onder elkaar in plaats van naast elkaar. Daarom hebben alle andere groepsnamen die uit meerdere woorden bestaan 'n vaste spatie &nbsp; in plaats van 'n gewone spatie, zodat de woorden naast elkaar blijven staan.

Maar bij de groepsnamen onder Ruimte gebruik ik dus juist 'n gewone spatie, want hier moeten de woorden juist wel onder elkaar komen te staan.

Niveau 1 (de kolommen met witte vlakken met groepsnamen)

Gestripte html voor alle browsers behalve Internet Explorer 6:

<ul>(Niveau 1) <li> <h2>Dieren</h2> <a id="aap">Aap<span></span></a> (...)(Hele serie links) <a id="vis-2">Vis 2<span></span></a> </li> (...)(Hele serie <li>'s) <li> <h2>Sneeuwmannen</h2> <a id="sneeuwman">Sneeuwman<span></span></a> (...) (Hele serie links) <a id="sneeuwman-6">Sneeuwman 6<span></span></a> </li> </ul>

Gestripte html voor Internet Explorer 6:

<ul>(Niveau 1) <li> <h2> <a>Dieren </h2> <table><tr><td> <a id="aap">Aap<span></span></a> (...)(Hele serie links) <a id="vis-2">Vis 2<span></span></a> </td></tr></table> </a>(Deze </a> hoort bij de <a> voor Dieren) </li> (...)(Hele serie <li>'s) <li> <h2> <a>Sneeuwmannen </h2> <table><tr><td> <a id="sneeuwman">Sneeuwman<span></span></a> (...)(Hele serie links) <a id="sneeuwman-6">Sneeuwman 6<span></span></a> </td></tr></table> </a>(Deze </a> hoort bij de <a>
voor Sneeuwmannen)
</li> </u>

Bij de html voor alle browsers behalve Internet Explorer 6 staat een serie links in een <li>. Dat is volkomen valide html. En omdat hoveren over 'n <li> bij deze browsers werkt, is deze constructie voldoende.

Bij de html voor Internet Explorer 6 wordt een link geopend, dan een tabel, dan komt een hele serie links, en dan wordt pas weer de eerste link gesloten. Hartstikke fout dus. Maar zonder deze rommel kun je geen <a>'s nesten in Internet Explorer 6, en zou dit menu dus niet werken in deze browser.

ul li:hover, ul li a:hover

Verschil tussen eerste en tweede selector zie Het verschil tussen li:hover en a:hover.

Als ik hover over een <li> binnen een <ul>. Omdat elke <li> binnen een <ul> móét liggen, geldt dit dus voor elke <li>. Als ik instellingen voor de <li>'s binnen een dieper liggende geneste <ul> anders wil hebben, kan ik die later overrulen.

background: #ddd;

Maak de achtergrond grijs.

cursor: default;

Omdat dit geen links zijn, moet de cursor niet veranderen in een handje, maar gewoon de standaardcursor blijven.

Niveau 2 (submenu's. In dit voorbeeld alleen onder Ruimte)

Gestripte html voor alle browsers behalve Internet Explorer 6:

<ul>(Niveau 1) <li> <h2>Dieren</h2> <a id="aap">Aap<span></span></a> (...)(Hele serie links) <a id="vis-2">Vis 2<span></span></a> </li> (...)(Hele serie <li>'s) <li> <h2>Ruimte</h2> <ul>(Niveau 2) <li class="sub-een"> <h3>Ruimtewezens lopend</h3> <a id="lopend">Lopend 1<span></span></a> (...)(Hele serie links) <a id="lopend-6">Lopend 6<span></span></a> </li> (...)(Hele serie <li>'s) <li class="sub-een"> <h3>Ruimteschepen</h3> <a id="schip">Schip 1<span></span></a> (...)(Hele serie links) <a id="schip-9">Schip 9</span></span></a> </li> </ul> </li> (...) (Hele serie <li>'s) <li> <h2>Sneeuwmannen</h2> <a id="sneeuwman">Sneeuwman<span></span></a> (...) (Hele serie links) <a id="sneeuwman-6">Sneeuwman 6<span></span></a> </li> </ul>

Gestripte html voor Internet Explorer 6:

<ul>(Niveau 1) <li> <h2> <a>Dieren </h2> <table><tr><td> <a id="aap">Aap<span></span></a> (...)(Hele serie links) <a id="vis-2">Vis 2<span></span></a> </td></tr></table> </a>(Deze </a> hoort bij de <a> voor Dieren) </li> (...)(Hele serie <li>'s) <li> <h2> <a>Ruimte </h2> <table><tr><td> <ul>(Niveau 2) <li class="sub-een"> <h3> <a>Ruimtewezens lopend </h3> <table><tr><td> <a id="lopend">Lopend 1<span></span></a> (...) (Hele serie links) <a id="lopend-6">Lopend 6<span><span></a> </td></tr></table> </a>(Deze </a> hoort bij de <a>
voor Ruimtewezens lopend)
</li> (...)(Hele serie <li>'s) <li class="sub-een"> <h3> <a>Ruimteschepen </h3> <table><tr><td> <a id="schip">Schip 1<span></span></a> (...)(Hele serie links) <a id="schip-9">Schip 9</span></span></a> </td></tr></table> </a>(Deze </a> hoort bij de <a>
voor Ruimteschepen)
</li> </ul> </td></tr></table> </a>(Deze </a> hoort bij de <a> voor Ruimte) </li> (...)(Hele serie <li>'s) <li> <h2> <a>Sneeuwmannen </h2> <table><tr><td> <a id="sneeuwman">Sneeuwman<span></span></a> (...) (Hele serie links) <a id="sneeuwman-6">Sneeuwman 6<span></span></a> </td></tr></table> </a>(Deze </a> hoort bij de <a>
voor Sneeuwmannen)
</li> </ul>

ul li ul

Elke <ul> die binnen een <li> staat die weer binnen een <ul> staat.

De <ul> van het eerste niveau valt af, want deze staat zelf niet binnen een <ul>, en dat is een voorwaarde.

De <ul> van het tweede niveau (waarin het submenu staat, in dit voorbeeld alleen onder de knop Ruimte), voldoet aan deze voorwaarde: deze <ul> staat én binnen 'n <ul>, én binnen 'n <li>.

Hier 'n eind boven heb ik instellingen voor alle <ul>'s opgegeven bij ul. Voor zover die hier niet worden overschreven, gelden die instellingen dus ook voor deze <ul> van het tweede niveau.

display: none;

Verbergen. Dit moet pas zichtbaar worden als er gehoverd wordt over de bij deze <ul> horende knop.

background: #ef9;

Deze <ul> een iets andere kleur groen geven als achtergrond, zodat duidelijk is welke vlakken met groepsnamen binnen deze <ul> vallen.

font-size: 0.94em;

Bij de instellingen voor alle <ul>'s hierboven staat font-size: 0.85em;. Dat geldt voor elke <ul>, dus ook voor de <ul>'s van het tweede niveau. In de <ul> van het eerste niveau is de lettergrootte teruggebracht naar 0,85 em. In deze <ul> van het tweede niveau gebeurt dat nogmaals, waardoor de lettergrootte 0,85 x 0,85 = 72,25 em zou worden. Nou zijn de namen in de <ul> van het tweede niveau (in dit voorbeeld alleen onder Ruimte) tamelijk lang, dus 'n nog niets kleinere letter komt wel goed uit, maar 72,25 em is wel heel erg klein.

Door hier 0.94 op te geven wordt niet verkleind met 0,85, maar met 0,94. Deze letter is niet zo klein als wanneer ik hier niet had gecorrigeerd, maar wel zo klein (0,799 em) dat de groepsnamen van Ruimte nog net naast elkaar op één regel passen.

Door als eenheid em te nemen kunnen ook gebruikers van Internet Explorer de lettergrootte veranderen.

ul li:hover ul, ul li a:hover ul

Verschil tussen eerste en tweede selector zie Het verschil tussen li:hover en a:hover.

Als ik over 'n <li> binnen 'n <ul> hover, doe dan iets met de <ul> die binnen die <li> ligt. Dat kan dus alleen een <ul> van het tweede niveau zijn, want de <ul> van het eerste niveau ligt niet binnen 'n <ul>. Dit is dus de <ul> met het submenu, in dit voorbeeld alleen bij de knop Ruimte. Bij alle andere knoppen kan deze selector niet werken, omdat er stomweg geen tweede <ul> aanwezig is.

display: block;

Hierboven was deze <ul> onzichtbaar gemaakt met display: none;. Als ik over de bovenliggende <li> hover, moet de <ul> zichtbaar worden.

position: absolute;

Om hem op de goede plaats neer te kunnen zetten. Ik gebruik ook 'n absolute positie omdat andere delen van menu en de rest van de pagina dan niet opzij worden geduwd als dit submenu wordt geopend. 'n Absolute positie heeft geen invloed op de rest van de pagina.

Het eerste ouder-element met een positie is div#afbeeldingen, dus er wordt gepositioneerd ten opzichte van die div.

left: 0;

Helemaal links zetten in div#afbeeldingen. Als je naar het voorbeeld kijkt, zie je dat er toch ruimte zit aan de linkerkant. Dat komt door de marge die ik hieronder opgeef.

width: 638px;

638 px breed maken. div#afbeeldingen is 700 px breed. Bij deze 638 px komen nog 'n padding links en rechts van 20 px en 'n marge links van 11 px. Samen is dat dus 11 + 20 + 638 + 20 = 689 px. Voor het oog blijft er rechts ook 'n marge van 11 px over en staat deze <ul> netjes in het midden van div#afbeeldingen, met 'n marge links en rechts van 11 px.

height: 3.5em;

Bij de instellingen voor alle <ul>'s heb ik 'n hoogte van 6.5 em opgegeven. Dat is te hoog voor deze <ul>, dus dat overrule ik hier. Als eenheid gebruik ik em, zodat de hoogte mee verandert met de lettergrootte en de lay-out min of meer intact blijft bij 'n andere lettergrootte.

margin: 0 0 0 11px;

Alleen links 'n marge. Door de breedte niet al te groot te nemen ontstaat er rechts vanzelf 'n marge. Die marge rechts is er dus niet echt, maar voor 't oog is er geen verschil.

padding: 10px 20px;

Omdat hier geen waarden voor onder en links zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 10px 20px 10px 20px in de volgorde boven - rechts - onder - links.

Bij de instellingen voor alle <ul>'s heb ik al opgegeven dat er 'n zwarte rand rondom deze lijst moet komen. Met deze padding ontstaat er afstand tussen die rand en de inhoud (de inhoud van deze lijst bestaat uit de witte vlakken met de groepsnamen uit Ruimte, zoals Ruimtewezens lopend).

Deze tamelijk brede padding zorgt ervoor dat ik de cursor kan bewegen binnen deze <ul>, zonder dat er afbeeldingen en zo openen. Het hoveren werkt immers alleen maar op de witte vlakken, deze <ul> zelf is er niet gevoelig voor. Via deze padding kan ik dus van groepsnaam naar groepsnaam gaan met de cursor zonder dat er van alles openfloept.

ul li ul li

Elke <li> binnen een <ul> die weer binnen een <li> ligt binnen een <ul>. Kortom: elke <li> van het tweede niveau, want <li>'s van het eerste niveau liggen niet twee keer binnen 'n <ul>. Dit zijn de <li>'s waarbinnen de <h3>'s met de subkopjes zoals Ruimtewezens lopend liggen.

border: black solid 1px;

Zwart randje eromheen. Hierboven is bij ul li al 'n zwarte rand om álle <li>'s ingesteld, maar niet aan de bovenkant, omdat dat 'n dubbele rand zou opleveren als twee <li>'s tegen elkaar aan liggen. Hier liggen de <li>'s naast elkaar en is de rand aan de bovenkant wel nodig, dus ik geef gewoon 'n nieuwe rand op, maar nu aan alle vier de kanten.

De rijen met links en de links zelf

ul li div.tabs, ul li:hover ul li div.tabs, ul li a:hover ul li.div.tabs

Dit zijn drie selectors, gescheiden door 'n komma. Het ziet er ingewikkelder uit dan het is. De derde selector is hetzelfde als de tweede, maar dan voor Internet Explorer 6. Verschil tussen tweede en derde selector zie Het verschil tussen li:hover en a:hover.

Dat ruimt op, blijven er nog maar twee over.

De eerste: ul li div.tabs:

De div met id="tabs" binnen 'n <li> binnen 'n <ul>. Binnen deze div staan de rijtjes met links. Omdat elke div.tabs binnen 'n <li> staat, die weer binnen 'n <ul> staat, geldt dit dus voor élke div.tabs in het hele menu, dus ook de submenu's.

De tweede: ul li:hover ul li div.tabs:

Doe met de div met class="tabs" die binnen 'n <li> ligt die weer binnen 'n <ul> ligt die weer binnen 'n <li> ligt die weer binnen 'n <ul> ligt (hèhè) iets, maar alleen als ik over de eerste <li> hover.

Omdat er twee <ul>'s aanwezig moeten zijn, geldt dit alleen maar voor de <ul>'s van het tweede niveau, dus ook alleen maar voor de div.tabs die daarbinnen liggen. Dat zijn de submenu's, die in dit voorbeeld alleen onder de knop Ruimte zitten.

Dit lijkt dubbelop. want de eerste selector is ook al geldig voor alle div.tabs. Maar verderop geef ik met de selector ul li:hover div.tabs de opdracht om iets te doen met div.tabs als er over 'n <li> wordt gehoverd. Die opdracht geldt voor álle div.tabs. Terwijl de div.tabs van het tweede niveau, de submenu's, nog niets moeten doen. Die moeten pas iets doen als ik over 'n <li> van het tweede niveau hover.

Daarom voeg ik hier een tweede selector toe. Deze tweede selector heeft meer gewicht dan de hover-opdracht verderop omdat er meer elementen in staan. Hierdoor zal de hover-opdracht verderop niet werken op de submenu's. En dat is precies de bedoeling: voor die submenu's wordt later een eigen, aparte opdracht gegeven.

position: absolute;

Om de div op 'n bepaalde plaats neer te kunnen zetten. Bovendien blijft door het gebruik van 'n absolute positie de lay-out van de rest van het menu en de pagina hetzelfde als deze div zichtbaar wordt, omdat 'n element met 'n absolute positie daar geen invloed op heeft.

Het eerste ouder-element met een positie is de <ul> waar deze div in staat, er wordt dus gepositioneerd ten opzichte van die <ul>.

left: -2000px;

Ver links buiten het scherm parkeren, zodat hij onzichtbaar is. Ik hoef dan alleen maar deze positie te veranderen om de div op het scherm te zetten en dus zichtbaar te maken. Ik gebruik dit liever dan iets als display: none; omdat sommige spraakbrowsers en dergelijke het anders helemaal negeren.

width: 638px;

De breedte.

De breedte van div#afbeeldingen, waar alles in staat, is 700 px. Bij deze breedte komt nog 'n marge links van 11 px, en links en rechts 'n padding van 20 px. De totale breedte van deze div wordt dus 11 + 20 + 638 + 20 = 689 px. Aan de linkerkant blijft dus 'n ruimte van 11 px over. Voor het oog is er links en rechts gewoon 'n marge van 11 px en staat deze div netjes in het midden.

margin: 0 0 0 11px;

Alleen aan de linkerkant 'n marge van 11 px.

padding: 0 20px 15px;

Omdat voor links geen waarde is ingevuld, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 0 20px 15px 20px in de volgorde boven - rechts - onder - links. Deze padding zorgt voor een afstand tussen buitenkant van de div en de rij links die daarin komt te staan.

Aan de bovenkant geef ik geen padding. Daarvoor gebruik ik later een marge aan de bovenkant van de links. Dan heb ik gelijk afstand tussen de links als er meer dan één rij links staat.

Deze ruimte is niet alleen voor het mooie nodig, het is ook nodig om de cursor veilig te kunnen bewegen, zonder dat er van alles openfloept. Als je over 'n link hovert, opent een afbeelding. Deze padding zorgt voor 'n baan rondom de links, zodat je de cursor rustig naar 'n bepaalde link kunt bewegen.

border: black solid 1px;

Randje rondom de div. In dit geval helpt deze rand ook om de verschillende tinten groen beter te kunnen onderscheiden, wat mensen die problemen hebben met kleuren kan helpen.

background: #ef9;

Andere tint groen om duidelijk te maken bij welke links deze div hoort.

div#afbeeldingen ul li:hover ul li div.sub-tabs

De div met class="sub-tabs" die binnen 'n <li> ligt die weer binnen 'n <ul> ligt die weer binnen 'n <li> ligt. Doe daar iets mee als ik over die <li> hover. En die <li> moet weer binnen 'n <ul> liggen, die binnen de div met id="afbeeldingen" ligt.

Als je dit van links naar rechts leest, is 't misschien makkelijker. Je daalt dan steeds verder in de html af, tot je uitkomt bij de div met class="sub-tabs". Dat is de div waarbinnen de groepsnamen van Ruimte liggen, dus de groepsnamen van 't tweede niveau.

Waarom is deze selector zo onwijs lang? Hierboven bij ul li div.tabs heb ik van alles ingesteld voor de divs met class="tabs". De divs met class="sub-tabs" hebben ook deze class, ze vallen binnen beide classes: binnen de html staat <div class="tabs sub-tabs">. De instellingen die hierboven voor de div.tabs zijn opgegeven gelden dus ook voor deze div.sub-tabs.

Hierboven gebruik ik voor div.tabs de selector ul li:hover ul li div.tabs. Daarom moet ik in deze selector meer elementen opnemen, zodat hij meer gewicht heeft dan de selector van hierboven. Dat doe ik door aan het begin div#afbeeldingen toe te voegen. Vandaar de lengte. Nu kan ik hierboven voor alle divs met links de basis-instellingen opgeven, en voor de divs uit het submenu hoef ik hier dan alleen nog maar 'n paar kleine aanpassingen op te geven.

De :hover heeft een andere reden. Voor Internet Explorer 6 zijn de instellingen die ik hier opgeef verkeerd, die heeft afwijkende instellingen. Dat betekent dat ik voor Internet Explorer 6 'n nóg langere selector zou moeten maken om deze al zo lange selector te overrulen. Maar Internet Explorer 6 kent geen li:hover. Door hier dus dat toe te voegen, zorg ik dat Internet Explorer 6 deze selector gewoon negeert.

width: 618px;

In deze div staan de links uit het submenu. Die rij links maak ik weer 20 px smaller dan die van 'n menu van het eerste niveau. En omdat de instellingen voor marge en padding voor div.tabs ook voor div.sub-tabs gelden (elke div.sub-tabs heeft immers ook de class .tabs), hoef ik hier alleen maar de breedte te veranderen.

margin-top: 0.8em;

Iets lager zetten, zodat de groepsnamen van Ruimte zichtbaar zijn. Die groepsnamen bestaan voor 't grootste deel uit twee woorden, die onder elkaar staan. Zonder extra afstand zou het onderste woord niet leesbaar zijn.

Als eenheid neem ik em, zodat de marge mee verandert met de lettergrootte en de lay-out dus min of meer intact blijft bij 'n andere lettergrootte.

ul li:hover div.tabs, ul li a:hover div.tabs

Verschil tussen eerste en tweede selector zie Het verschil tussen li:hover en a:hover.

Als ik over 'n <li> binnen 'n <ul> hover, doe dan iets met de divs met class="tabs". Dit zijn de divs waar de rijtjes met links in staan. Omdat elke <li> binnen 'n <ul> móét liggen, geldt dit voor elke <li>.

left: 0;

Hierboven heb ik bij ul li div.tabs div.tabs ver links buiten het scherm geparkeerd. Ook heb ik daar de hele lay-out al opgegeven. Hier hoef ik deze div dus alleen nog maar binnen het scherm te zetten en hij wordt zichtbaar.

Het eerste ouder-element met een positie is de <ul> waar deze div in staat, dus er wordt gepositioneerd ten opzichte van die <ul>.

ul li ul li:hover div.tabs, ul li ul li a:hover div.tabs

Verschil tussen eerste en tweede selector zie Het verschil tussen li:hover en a:hover.

Als ik hover over 'n <li> binnen 'n <ul> die weer binnen 'n <li> ligt binnen 'n <ul>, doe dan iets met div.tabs. Omdat het 'n <ul> binnen 'n <ul> is, gaat het hier om de divs met de groepsnamen van het tweede niveau, hier alleen aanwezig onder Ruimte.

De selector ul li:hover div.tabs hierboven is hiervoor niet zwaar genoeg, want ik heb eerder bij ul li div.tabs de selector ul li:hover ul li div.tabs gebruikt om de div.tabs van het tweede niveau links buiten het scherm te parkeren. En die bevat meer elementen, dus die wint van ul li:hover div.tabs.

Daarom gebruik ik hier 'n selector met genoeg gewicht om die selector weer te overrulen. Dat is in dit geval heel makkelijk: ik gebruik gewoon dezelfde selector met toevoeging van :hover.

Het gebruik van 'n eigen selector voor de div.tabs van het tweede niveau geeft gelijk de mogelijkheid om eigen instellingen op te geven, want op 'n aantal punten verschillen ze van de div.tabs van het eerste niveau.

left: -2px;

Hierboven heb ik bij ul li div.tabs div.tabs ver links buiten het scherm geparkeerd. Ook heb ik daar de hele lay-out al opgegeven.

(De divs van het tweede niveau, waar het hier om gaat, hebben ook nog de class .sub-tabs. Met behulp van die class heb ik later de lay-out bij div#afbeeldingen ul li:hover ul li div.sub-tabs op 'n paar puntjes nog aangepast voor deze divs van het tweede niveau.)

Het eerste ouder-element met een positie is de <ul> waar deze div in staat, dus er wordt gepositioneerd ten opzichte van die <ul>.

Omdat deze div ook weer 'n eigen border heeft, en dus links en rechts 1 px breder wordt dan de div.tabs uit het eerste niveau, moet ik hem 2 px verder naar links zetten om goed te centreren.

top: 2.3em;

Deze div wordt zichtbaar als ik over 'n groepsnaam uit Ruimte hover. Goed laten aansluiten daarop. Als eenheid neem ik em, zodat de plaats mee verandert met de lettergrootte en de lay-out dus min of meer intact blijft bij 'n andere lettergrootte.

background: #efb;

Andere tint groen, zodat duidelijk is welk deel bij deze groepsnamen hoort en waar je de cursor dus moet bewegen.

ul li a

Alle links binnen 'n <li> binnen 'n <ul>. Oftewel: alle links van dit voorbeeld, behalve het hulpschermpje, want de <a> daarvan ligt niet binnen 'n <li>

float: left;

Zorgt ervoor dat alle <a>'s in 'n blok-element veranderen en naast elkaar worden gezet. Als ze niet meer op de regel passen, wordt naar 'n volgende regel gegaan. 'n <a> is van zichzelf 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als marge gebruiken.

padding: 0 7px;

Omdat voor onder en links geen waarde is ingevuld, krijgen deze automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 7px 0 7px in de volgorde boven - rechts - onder - links. Links en rechts wat afstand tussen buitenkant van de link en tekst in de link, zodat het wat minder vol lijkt.

Ik gebruik padding omdat dan ook de achtergrondkleur breder wordt en hoveren ook werkt. (Bij hoveren over deze link moet een afbeelding openen.) Bij 'n marge zou ik geen achtergrondkleur hebben onder de marge en werkt hoveren boven de marge niet.

margin: 10px 1px 0 0;

Onder en links geen marge. Aan de rechterkant 'n marge van 1 px. Omdat om de links 'n zwart randje staat, zou dit randje dubbeldik worden waar de links elkaar raken. Door 'n minieme afstand van 1px aan te brengen krijg je net twee losstaande lijntjes in plaats van één dubbeldikke.

De marge aan de bovenkant is om afstand te scheppen tussen de links als er meer dan één rij is. Anders zouden twee links die boven elkaar staan elkaar raken. Op deze manier ontstaat er ruimte om de cursor te bewegen zonder dat er 'n afbeelding opent, want boven deze marge werkt hoveren niet.

background: white;

Witte achtergrond.

border: black solid 1px;

Zwart randje rondom de link.

overflow: hidden;

Opera onder Windows had 'n eigenaardigheid waar ik lichtelijk overspannen van ben geworden voor ik had gevonden wat 't was. Zodra er 'n afbeelding opent, vertoont Opera op Windows 'n verticale scrollbar. Ook als dat totaal niet nodig is omdat 't grootste deel van 't browservenster nog steeds hartstikke leeg is. Wat er nou precies gebeurt is me niet duidelijk, maar door overflow op hidden te zetten voorkom je 't.

Dit was nogal hinderlijk omdat, op het moment dat de verticale scrollbar verschijnt, het hele menu de breedte van de scrollbar naar links floept.

(Opmerking 15 december 2010: inmiddels is dit niet meer nodig voor Opera. Maar omdat het verder geen kwaad kan en werkt, laat ik het gewoon staan. Dat spaart 'n hele batterij tests uit.)

ul li a:hover

Bij hoveren over 'n link binnen 'n <li> binnen 'n <ul>. Oftewel: elke link behalve die van 't hulpschermpje, want die ligt niet binnen 'n <li>.

background: #ddd;

Achtergrond grijs maken, zodat te zien is waar de afbeelding bij hoort.

div.tabs a:hover

Bij hoveren over 'n link binnen 'n div met class="tabs". Dit zijn de <a>'s waarachter 'n echte link naar 'n pagina zit.

cursor: pointer;

Hierboven heb ik bij ul li:hover gezegd dat de cursor bij hoveren over 'n <a> of <li> niet in 'n handje mag veranderen, omdat het geen echte links zijn. Maar dit zijn wel echte links, dus hier moet de cursor wel in 'n handje veranderen.

De spans waarin de afbeeldingen worden getoond

ul li a span

Elke span binnen 'n link die weer binnen 'n <li> binnen 'n ongeordende lijst ligt.

Binnen deze spans wordt later de afbeelding neergezet in de vorm van 'n background-image.

display: none;

Verberg de span.

Deze span en de bijbehorende afbeelding moeten zichtbaar worden bij hoveren over de link. Omdat dit toch niet werkt in spraakbrowsers en dergelijke, kan ik in dit geval display: none; gebruiken. Bij de links heb ik dat niet gedaan, zodat dat soort programma's de pagina's achter de afbeeldingen in ieder geval kunnen bereiken via klikken op de links (of op 'n soortgelijke manier).

Om te begrijpen wat ik bedoel is het hier echt handig om even te kijken hoe deze pagina er zonder css uit ziet. (Dat is altijd verstandig, maar hier extra super heel erg.)

Bij De spider van 'n zoekmachine kun je zien hoe je dat kunt doen.

Bij het zichtbaar maken gebruik ik display: block; waardoor het inline-element span verandert in 'n blok-element en ik attributen als hoogte kan gebruiken.

position: absolute;

Om de span, en dus de bijbehorende afbeelding, op de juiste plaats neer te kunnen zetten. Het gebruik van 'n absolute positie zorgt er ook voor dat de rest van het menu. 'n Element met 'n absolute positie heeft geen invloed op de rest van de pagina, het is 'n volstrekt asociaal element wat zich nergens iets van aantrekt en andere elementen straal negeert. 'n Soort bankier die z'n bank naar de kloten helpt maar wel z'n woekerbonus incasseert.

Het eerste ouder-element met 'n positie is de <ul> waarbinnen deze span staat, dus er wordt gepositioneerd ten opzichte van deze <ul>.

bottom: -380px;

De onderkant van de span 380 px onder de onderkant van de <ul> neerzetten.

left: -12px;

12 px naar links zetten. In combinatie met de hieronder opgegeven breedte staat de span nu precies gelijk met de menubalk.

height: 380px;

Omdat de onderkant 380 px onder de onderkant van de <ul> is neergezet, komt de bovenkant van de span nu precies tegen de onderkant van de <ul> aan.

width: 698px;

div#afbeeldingen, waar de hele handel in staat, is 700 px breed. Bij deze 698 px komt nog 'n border links en rechts van 1 px, waarmee deze span dus ook precies 700px breed wordt.

border: black solid 1px;

Zwart randje rondom de span.

ul li ul li.sub-een a span

De spans die bij 'n submenu horen liggen binnen 'n <li> met class="sub-een", zodat ik ze kan onderscheiden van de spans van het eerste niveau.

De spans die binnen een link liggen, die weer binnen <li> met class="sub-een" ligt, die weer binnen 'n <ul> binnen 'n <li> binnen 'n <ul> ligt.

Mogelijk is .sub-een hier niet nodig, maar die class bestaat toch al om andere redenen. Bij 't uitwerken van deze uitleg zie ik dit staan, 't werkt, 't zijn maar acht extra lettertekens, dus foei, ik heb geen zin om te kijken of 't misschien weg kan. Soms lijk ik net 'n echt mens. Iets serieuzer: je moet alle code kritisch bekijken. Er zijn ongetwijfeld dingen die efficiënter of beter kunnen.

left: -22px;

De span wordt gepositioneerd ten opzichte van het eerste ouder-element met 'n positie. Dat is bij deze spans van het tweede niveau de <ul> van het tweede niveau. En die staat 11 px meer naar rechts dan de <ul> van het eerste niveau, dus moet de span 11 px meer naar links dan 'n span van het eerste niveau om netjes onder de menubalk te komen staan.

display: none;

Verderop maak ik de spans zichtbaar met de selector ul li a:hover span. Omdat alle spans binnen 'n <a> staan, die weer binnen 'n <li> en <ul> staat, geldt dat voor alle spans. Dus ook die van het tweede niveau. Om te voorkomen dat die voortijdig openen, geef ik hier nogmaals de opdracht om onzichtbaar te zijn. En omdat deze selector meer elementen heeft dan die waarmee de spans zichtbaar worden gemaakt, wint deze selector. Om de spans van het tweede niveau zichtbaar te maken geef ik later 'n aparte opdracht met 'n eigen, lange, selector, die voldoende gewicht heeft.

ul li a#aap:hover span

De spans binnen 'n link met id="aap", die weer binnen 'n <li> ligt binnen 'n <ul>, als ik over die link hover. Dit is de span waar de afbeelding met de aap in moet verschijnen.

Bij ul li a span (voor het eerste niveau) en ul li ul li.sub-een a span (voor het tweede niveau) heb ik alle basis-instellingen voor de spans al opgegeven. Hier hoef ik alleen nog maar de dingen op te geven die voor elke span anders zijn.

background: url(048-pics/aap.gif) no-repeat 50% 50% white;

De span is eerder al veranderd in een blok-element met 'n bepaalde hoogte en breedte, die voor al deze spans hetzelfde is, ongeacht de grootte van de afbeelding. Wel zo simpel en rustiger voor het oog.

Bij hoveren over de link moet deze span als achtergrond de afbeelding met de aap krijgen.

Omdat de grootte van de afbeelding onbekend is, zou deze worden herhaald om de hele achtergrond te vullen. Dat wil ik niet: één keer is genoeg: no-repeat.

Afbeelding horizontaal en verticaal in het midden zetten: 50% 50%.

Witte achtergrondkleur om het deel van de achtergrond te vullen dat de afbeelding niet vult: white.

Nu heb ik dus bij alle afbeeldingen, ongeacht de grootte, 'n even groot wit vlak.

Ik kan helaas die no-repeat 50% 50% white niet één keer opgeven bij de basis-instellingen voor de spans, omdat ik voor elk span 'n andere achtergrond-afbeelding moet gebruiken. Dus bij elke span komt uiteindelijk 'n eigen background: url(...) of background-image: url(...) te staan. En daardoor valt de no-repeat 50% 50% white weg als ik die bij de basis-instellingen voor de spans neerzet. Dus moet ik die voor elke span apart herhalen.

Ik gebruik achtergrond-afbeeldingen, omdat die niet gelijk worden geladen bij het openen van de pagina. Bij 4,3 MB aan afbeeldingen is dat niet helemaal onbelangrijk... Door voor elke <a> 'n aparte :hover-opdracht te geven, en door geen gewone <img> maar 'n background-image te gebruiken, worden de afbeeldingen pas geladen bij hoveren over de link.

Alle andere spans met afbeeldingen werken precies hetzelfde. Alleen de id van de span en de naam van de afbeelding veranderen. Twee willekeurige voorbeelden:

ul li a#hert:hover span {background: url(048-pics/hert.gif) no-repeat 50% 50% white;} ul li a#hoofd-8:hover span {background: url(048-pics/hoofd-8.gif) no-repeat 50% 50% white;}
ul li a:hover span

De spans binnen 'n link binnen 'n <li> binnen 'n <ul>, bij hoveren over die link.

Dit zijn alle spans binnen het menu, behalve de span die hoort bij het hulpschermpje, want die ligt niet binnen 'n <li>.

display: block;

Bij de algemene instellingen voor spans is zijn deze met display: none; onzichtbaar gemaakt. Nu moeten ze zichtbaar worden, en dus de daarin staande achtergrond-afbeelding ook. Omdat dit voor alle spans hetzelfde is, hoef ik dit niet voor elke span apart te herhalen.

ul li ul li a:hover span

De spans binnen 'n link binnen 'n <li> binnen 'n <ul>, die weer binnen 'n <li> binnen 'n <ul> liggen, bij hoveren over die link. Dit zijn de spans van het tweede niveau, van de submenu's, want alleen die liggen binnen twee ongeordende lijsten.

display: block;

Om te voorkomen dat deze spans te vroeg zouden openen, heb ik ze bij ul li ul li.sub-een a span onzichtbaar gemaakt met display: none;. Die selector is tamelijk lang en daardoor heeft de selector ul li a:hover span die ik hierboven gebruik om de spans weer zichtbaar te maken niet genoeg gewicht om ook te werken voor deze spans van het tweede niveau.

De selector die ik hier gebruik heeft wel genoeg gewicht, dus nu worden ook de spans van het tweede niveau zichtbaar bij hoveren over de bijbehorende link.

(Ik had deze selector kunnen samenvoegen met die hierboven, maar dat vond ik in dit geval te lastig om uit te leggen.)

a#hulp

De link met id="hulp". Dit is de <a> waarbinnen het hulpschermpje met uitleg staat.

position: absolute;

Om op de goede plaats neer te kunnen zetten. Het eerste ouder-element met 'n positie is div#afbeeldingen, dus er wordt gepositioneerd ten opzichte van die div.

'n <a> is een inline-element. Door het absoluut te positioneren verandert het in een blok-element en kan ik ook eigenschappen als hoogte gebruiken.

right: 0; top: 0;

In de rechterbovenhoek neerzetten.

width: 1.2em; height: 1.2em;

'n Klein vierkantje ervan maken. Als eenheid gebruik ik em, zodat de grootte mee verandert met de lettergrootte en de lay-out min of meer intact blijft bij 'n andere lettergrootte.

border: black solid 1px;

Randje rondom de link.

color: black;

Normaal genomen heeft 'n link 'n afwijkende kleur, dat wil ik hier niet.

background: white;

Witte achtergrond.

text-decoration: none;

Normaal genomen wordt 'n link onderstreept, dat wil ik hier niet.

text-align: center;

Tekst van de link horizontaal centreren.

font-size: 1.2em;

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

a#hulp span

De span binnen de link met id="hulp". Dit is de span waarbinnen de eigenlijke tekst van het hulpschermpje met de uitleg staat.

position: absolute;

Om het op de goede plaats neer te kunnen zetten. Door 'n absolute positie te gebruiken blijft de rest van de pagina gewoon op z'n plaats staan bij openen van het hulpschermpje. Door 'n absolute positie verandert het inline-element span ook in 'n blok-element en kan ik eigenschappen als padding gebruiken.

Het eerste ouder-element met 'n positie is a#hulp, dus er wordt gepositioneerd ten opzichte van die <a>.

width: 650px;

Breedte van het schermpje. In tegenstelling tot veel andere plaatsen gebruik ik hier px, zodat de breedte niet mee verandert met de lettergrootte. Anders zou het hulpschermpje bij 'n grotere letter en 'n iets kleiner browservenster heel snel deels buiten het browservenster komen te staan.

De hoogte geef ik niet op, zodat deze zich automatisch aanpast aan de omvang van de tekst en aan de lettergrootte.

left: -8000px;

Ruim links buiten het scherm parkeren, dus onzichtbaar. Omdat ik hier al de hele lay-out en zo opgeef, hoef ik later alleen maar de span op het scherm te zetten om hem zichtbaar te maken.

top: 1.2em;

Het eerste ouder-element met positie is a#hulp. Deze is 1.2 em hoog. Door de span 1.2 em vanaf de bovenkant neer te zetten, komt hij dus precies tegen de onderkant van a#hulp. Als eenheid gebruik ik em, zodat de positie mee verandert met de lettergrootte en de lay-out min of meer intact blijft bij 'n andere lettergrootte.

border: groove #999 10px;

Weer 'ns wat anders dan 'n rechte lijn als border...

padding: 5px;

Kleine afstand tussen de buitenkant van de span en de tekst.

font-size: 0.8em;

Deze span staat in a#hulp, waarvan de font-size is veranderd in 1.2 em. Dat wordt geërfd door de kinderen van a#hulp, zoals deze span, maar dat is veel te groot voor de tekst in deze span. Dus verklein ik hier de letters weer.

Door als eenheid em te nemen kunnen ook gebruikers van Internet Explorer de lettergrootte veranderen.

text-align: left;

De tekst binnen a#hulp, waarbinnen deze span staat, is gecentreerd. Dat is geen gezicht voor de tekst in dit hulpscherm, dus zet ik de tekst hier weer gewoon links uitgelijnd neer.

color: black;

Tekstkleur zwart.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de tekstkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en tekstkleur geen van beide.

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

background: white;

Witte achtergrond.

a#hulp:hover

Bij hoveren over de link met id="hulp".

cursor: default;

Normaal genomen verandert de cursor boven 'n link in 'n handje, maar dit is geen echte link, dus hier wil ik de gewone standaardcursor houden.

a#hulp:hover span

Als ik hover over de link met id="hulp" doe dan het volgende met de daarin staande spans:

left: -630px;

Hierboven bij a#hulp span is deze span ver links buiten het scherm geparkeerd. Daar is ook al de hele lay-out opgegeven. Het enige wat ik hier hoef te doen om deze span zichtbaar te maken is de span, en dus de daarin staande tekst van het hulpschermpje, weer op het scherm te zetten.

Het eerste ouder-element met een positie is a#hulp, dus er wordt gepositioneerd ten opzichte van die link. Omdat a#hulp helemaal rechts in div#afbeeldingen staat, moet ik het hulpscherm 'n behoorlijk eind naar links zetten, zodat het niet grotendeels rechts buiten het scherm komt te staan.

div#content

De div met id="content". Dit is de div waar de rest van de pagina in staat, hier alleen maar de Latijnse opvultekst.

padding: 0 30px;

Omdat onder en links niet zijn ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 30px 0 30px in de volgorde boven - rechts - onder - links. Links en rechts kleine afstand tussen buitenkant van de div de tekst daarin.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> ul li h2 a, ul li h3 a {display: block; float: none; padding: 0; margin: 0; border: 0; color: black; text-decoration: none; cursor: default;} ul li h3 a {height: 2.4em;} ul li a:hover span {border: 0} ul li a a:hover span {border: black solid 1px;} ul li a:hover div.tabs a {display: inline;} ul li ul {height: auto;} div#afbeeldingen div.sub-tabs {width: 618px; top: 3em;} div#afbeeldingen div.sub-tabs span {border: 0;} div#afbeeldingen div.sub-tabs a:hover span {border: black solid 1px;} </style> <![endif]-->

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

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

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

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

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

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

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

ul li h2, ul li h3

De <h2>'s en <h3>'s die binnen een <li> binnen 'n <ul> liggen. Dit zijn de kopregels waarbinnen de groepsnamen van het eerste en tweede niveau staan. Het grootste deel van de lay-out hiervoor is al opgegeven in de gewone css bij h1, h2, h3.

Voor Internet Explorer 6 staan binnen deze kopregels ook de links die nodig zijn omdat Internet Explorer 6 geen hoveren over 'n <li> kent.

width: 7.5em;

'n Kopregel is 'n blok-element en zou automatisch de volle breedte van het ouder-element moeten vullen, hier de <li> die in de algemene css bij ul li is ingesteld op 7.5 em. Om een of andere reden gebeurt dat niet, waardoor de links hierbinnen ook niet de volle breedte krijgen en niet over de volle breedte reageren op hoveren. Voor Internet Explorer 6 moet ik dus ook deze kopregels even breed maken als de <li>.

('t Is eigenlijk nog vreemder: als ik 'n breedte opgeef worden de kopregels ook 'n heel klein beetje hoger. 't Blijft toch verbazen, dit wanproduct.)

ul li h2 a, ul li h3 a

De links die liggen binnen een <h2> of <h3>, die weer binnen een <li> binnen een <ul> liggen. Dit zijn de links waar de groepsnamen in staan: in de <h2>'s die van het eerste niveau, in de <h3>'s die van het tweede niveau (in dit voorbeeld alleen onder Ruimte).

Bij alle andere browsers is dit niet nodig, want hoveren werkt daar ook bij 'n <li>, maar in Internet Explorer 6 werkt hoveren alleen bij 'n <a>, dus moeten we voor deze browser 'n <a> gebruiken. En daarvoor aparte instellingen opgeven, want anders zouden de groepsnamen als gewone links worden weergegeven. En dit zijn geen gewone links: ze zijn alleen nodig om hoveren bij Internet Explorer 6 mogelijk te maken.

Omdat hierboven in de algemene css bij ul li a alle <a>'s binnen 'n <li> naar links worden gefloat, zijn ook deze <a>'s al in blok-elementen veranderd en kan ik attributen als breedte gebruiken.

width: 7.5em;

Hoewel 'n blok-element de volle breedte van het ouder-element zou horen te vullen, gebeurt dat niet. Hierboven heb ik de <h2> en <h3> 'n breedte van 7.5 em gegeven, dus deze links moeten die breedte ook hebben. Als ik dat niet doe, werkt hoveren alleen maar boven de tekst in de links en aan de linkerkant van die tekst. Nu werkt het over het hele witte vlak.

padding: 0; margin: 0; border: 0;

Bij ul li a in de algemene css heb ik 'n padding, 'n margin en 'n border ingesteld. Die gelden ook voor deze links, want ook deze liggen binnen 'n <li> binnen 'n <ul>. Maar dit zijn geen echte links, dus verwijder ik voor deze nep-links de hele handel weer.

color: black;

'n Link heeft standaard 'n afwijkende kleur, dat wil ik hier niet.

text-decoration: none;

Ook de onderstreping van 'n link wil ik niet.

cursor: default;

Omdat het 'n nep-link is die alleen wordt gebruikt om te kunnen hoveren, moet de cursor niet in 'n handje veranderen boven deze links.

ul li h3 a

De links binnen 'n <h3> binnen 'n <li> binnen 'n <ul>. Dit zijn de links waarbinnen voor Internet Explorer 6 de groepsnamen van Ruimte staan, zoals Ruimtewezens lopend.

height: 2.4em;

In dit voorbeeld bestaan de eerste vijf groepsnamen van Ruimte uit twee woorden, die onder elkaar zijn gezet. De zesde groepsnaam (Ruimteschepen) bestaat maar uit één woord en beslaat dus ook maar één regel. Daardoor werkt bij die zesde groepsnaam het hoveren alleen maar in de bovenste helft van het witte vlak, omdat de <a> niet hoger wordt dan nodig is om de tekst te kunnen weergeven. Door de <a> kunstmatig deze hoogte te geven werkt ook bij de zesde groepsnaam het hoveren over het hele vlak, van onder tot boven.

ul li a:hover span

Als ik over 'n link binnen 'n <li> binnen 'n <ul> hover, doe dan iets met de daarin liggende span.

border: 0

Binnen die span moet de afbeelding verschijnen. Om een of andere reden geeft Internet Explorer 6 de border al weer als ik over 'n groepsnaam hover. Waarom is me eerlijk gezegd 'n raadsel, want bijvoorbeeld de witte achtergrond wordt niet weergegeven. Maar goed, 't is Internet Explorer 6 en dit voorkomt 't. Je moet ook niet te lang over dit soort dingen nadenken, want met de vrije marktwerking in de zorg staat 't helemaal niet vast dat je dan nog de psychische hulp krijgt die je nodig hebt na nadenken over het waarom bij deze browser.

ul li a a:hover span

Eigenlijk zou je voor de afwijkingen en fouten van Internet Explorer 6 'n nieuw soort Esperanto of zo moeten ontwikkelen. Maar ik ga 't proberen in gewoon Nederlands.

Als ik over 'n link hover, doe dan iets met de daarin liggende span. Dit is 'n echte link.

Die link moet zelf weer binnen 'n andere link liggen. Dat moet dus per definitie 'n nep-link zijn die alleen nodig is om hoveren mogelijk te maken.

Het geheel moet dan ook nog binnen 'n <li> binnen 'n <ul> liggen.

border: black solid 1px;

Door de opdracht hierboven bij ul li a:hover span verschijnt er nu helemaal geen border meer, ook niet als de afbeelding wordt getoond. Nu wel.

ul li ul

De <ul> die binnen 'n <li> binnen 'n <ul> ligt. Dit is de ongeordende lijst van het tweede niveau, waarin het menu onder Ruimte zit.

height: auto;

Zonder deze opdracht sluiten de witte vlakken niet meer, hoewel de daarin staande tekst wel netjes verdwijnt. Waarom? Geen flauw idee. Maar dit lost 't op. Soms denk ik wel 'ns dat Internet Explorer 6 het eerste werkverschaffingsproject van het Centrum voor Werk en Inkomen was.

div#afbeeldingen div.sub-tabs

De divs met class="sub-tabs" binnen de div met id="afbeeldingen". Binnen deze div staan de groepsnamen van het submenu onder Ruimte.

De div#afbeeldingen in de selector is alleen maar toegevoegd om de selector genoeg gewicht te geven, anders werkt hij niet.

top: 3em;

De balk met links van het tweede niveau staat te hoog voor Internet Explorer 6, corrigeren.

div#afbeeldingen div.sub-tabs span

De spans binnen de divs met class="sub-tabs" binnen de div met id="afbeeldingen". Binnen deze span staan de afbeeldingen die horen bij het submenu onder Ruimte.

De div#afbeeldingen in de selector is alleen maar toegevoegd om de selector genoeg gewicht te geven, anders werkt hij niet.

border: 0;

Binnen die span moet de afbeelding verschijnen. Om een of andere reden geeft Internet Explorer 6 de border al weer als ik over 'n groepsnaam hover. Waarom is me eerlijk gezegd 'n raadsel, want bijvoorbeeld de witte achtergrond wordt niet weergegeven. Maar goed, 't is Internet Explorer 6 en dit voorkomt 't.

div#afbeeldingen div.sub-tabs a:hover span

De spans binnen 'n link binnen 'n div met class="sub-tabs", die weer binnen de div met id="afbeeldingen" ligt, als ik hover over de link. Binnen deze span staan de afbeeldingen die horen bij het submenu onder Ruimte.

De div#afbeeldingen in de selector is alleen maar toegevoegd om de selector genoeg gewicht te geven, anders werkt hij niet.

border: black solid 1px;

Door de opdracht hierboven bij div#afbeeldingen div.sub-tabs span verschijnt er nu helemaal geen border meer, ook niet als de afbeelding wordt getoond. Nu wel.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> div.ie-7 {width: 638px;} ul li a {overflow: visible;} </style> <![endif]-->

Dit werkt alleen voor Internet Explorer 7, uitleg bij Speciaal voor Internet Explorer 6.

div.ie-7

De divs met class="ie-7". Dit is een extra div die alleen maar is neergezet om de onderstaande regel opdracht mogelijk te maken.

width: 638px;

Als 'n rijtje met links te lang is, wordt het teveel op een volgende regel gezet. Als het kort genoeg is, wordt alles op één regel gezet. Maar als het maar 'n heel klein beetje te lang is, wordt het toch op één regel gezet en wordt de laatste link afgekapt.

Dit zorgt ervoor dat in die gevallen de laatste link, die dus eigenlijk niet meer op de regel past, op de volgende regel wordt gezet.

Ik heb dit niet in de algemene css gezet omdat het om 'n tamelijk exotisch probleem gaat.

ul li a

De links binnen 'n <li> binnen 'n <ul>. Dat zijn alle links behalve die voor het hulpschermpje, want die ligt niet binnen 'n <li>.

overflow: visible;

'n Even exotisch probleem als hierboven. 't Verhaal is hetzelfde, maar nu wordt afgekapt bij waar de padding rechts begint. Dit zorgt ervoor dat de afgekapte link op de volgende regel wordt gezet, zoals ook de bedoeling is.

Speciale html voor Internet Explorer 6

<li><h2><!--[if IE 6]><a href="#"><![endif]-->Dieren</h2> <!--[if IE 6]><table cellpadding="0" cellspacing="0"><tr><td><![endif]--> <div class="tabs"> <div class="ie-7"> <a href= ....><span></span></a>

(rijtje met links)

<a href= ....><span></span></a> </div> </div> <!--[if IE 6]></td></tr></table></a><![endif]--> </li>

Dit is de griezelcode die het mogelijk maakt dat dit menu in Internet Explorer 6 werkt.

Los van alle toeters en bellen en zonder de code voor Internet Explorer 6 staat hier:
<li>
<h2>Dieren</h2>
<div>
<div>
<a></a> (rijtje met links) <a></a>
</div>
</div>
</li>

Een ingang in een lijst met daarin een kopregel, 2 divs en 'n rij met links. Niets bijzonders tot zover. En omdat in alle browsers behalve Internet Explorer 6 hoveren over 'n <li> werkt, werkt deze code ook.

Voor Internet Explorer 6 is echter een <a> nodig om hoveren te laten werken. Voor deze browser is de code zonder toeters en bellen:

<li> <h2> <a></h2> <table><tr><td> <div> <div> <a></a> (...) <a></a> </div> </div> </td></tr></table> </a>(Deze </a> hoort bij de allerbovenste </a>) </li>

Mensen hebben van minder nachtmerries gekregen, maar 't werkt. De gruwelijkheden op 'n rijtje:

* In de <h2> staat een wel geopende, maar niet gesloten <a>.

* In de eerste <a> staat een table. Dat is een blok-element binnen een inline-element.

* Binnen de eerste <a> staat een hele serie andere <a>'s.

Elke normale browser gaat volledig uit z'n dak van deze code, maar bij Internet Explorer 6 zorgt het ervoor dat dit menu werkt.

Regel voor regel:

<li><h2><!--[if IE 6]><a href="#"><![endif]-->Dieren</h2> <li><h2> ... </h2>

Dit zijn gewoon de opening van 'n <li> en de opening en afsluiting van 'n kopregel. Met daartussen code voor Internet Explorer 6:

<!--[if IE 6]><a href="#"><![endif]-->

Deze hele regel staat tussen <!-- en -->. Daarom wordt dit door alle browsers als commentaar gezien. Behalve door Internet Explorer. Microsoft heeft iets bijzonder slims bedacht, wat bovendien volkomen valide code is: het deel tussen [if] en [endif] wordt wel gelezen door Internet Explorer. In dit geval door de toevoeging van IE 6 alleen door Internet Explorer 6.

Het deel <a href="#"> wordt dus wel gelezen door Internet Explorer 6, maar niet door alle andere browsers. Waarmee we de begintag voor de <a> hebben, die Internet Explorer 6 nodig heeft om te kunnen hoveren. Aan de "#" kun je zien dat 't 'n nep-link is: dit leidt nergens naartoe.

<!--[if IE 6]><table cellpadding="0" cellspacing="0"><tr><td><![endif]-->

Na het bovenstaande is dit natuurlijk 'n fluitje van 'n cent: alle browsers zien dit als commentaar, behalve Internet Explorer.

[if IE 6]

Als het Internet Explorer 6 is. Dus alleen Internet Explorer 6 voert de tussenliggende code uit: het openen van de tabel met daarin 'n rij en 'n cel. De cellpadding en cellspacing zijn instellingen om standaardmarges en dergelijke in cellen in 'n tabel uit te schakelen.

<div class="tabs"> <div class="ie-7"> <a href= ....><span></span></a>

(rijtje met links)

<a href= ....><span></span></a> </div> </div>

Dit deel van de code wordt gewoon door alle browsers gelezen.

En dan het laatste, afsluitende deel:

<!--[if IE 6]></td></tr></table></a><![endif]--> </li>

Internet Explorer 6 heeft nog vier begintags openstaan, die nog moeten worden gesloten. En als laatste de gewone </li>, die weer gewoon voor alle browsers geldt.

Het gaat hierboven om de html voor het eerste niveau, maar die voor het tweede niveau is precies hetzelfde, behalve dat je h2 moet vervangen door h3. Het ziet er wat ingewikkelder uit omdat het bij het tweede niveau om 'n geneste <ul> gaat, maar feitelijk is er toch geen enkel verschil.

De <ul> van het tweede niveau staat in z'n geheel in de <li> die bij Ruimte hoort. Daarom staat het afsluitende deel van de html voor die <li> helemaal achter de geneste <ul>. Daardoor lijkt het misschien wat ingewikkelder, maar als je de geneste <ul> apart bekijkt zie je dat hij echt volledig hetzelfde werkt.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

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

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

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

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 22 november 2011.

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

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

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

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, Jaws en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. Jaws is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan bij Opmerkingen.

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

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

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

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

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

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

2 december 2008:

Nieuw opgenomen.

1 april 2009:

15 december 2010:

22 november 2011:

Bekende problemen

Opera en Internet Explorer 7

Zonder zoomen wordt het menu goed weergegeven, ook met een andere lettergrootte. Als je gaat uitzoomen (verkleinen), dus niet als je alleen de lettergrootte verandert in Internet Explorer 7, verdwijnen er kadertjes rondom de witte vlakken. Daar is niets aan te doen. Ik neem aan dat het komt door afrondingen bij het verkleinen van blokken en dergelijke. Alles blijft wel gewoon bruikbaar.

Safari en Firefox

Als de letters meer dan 180% worden vergroot (dus niet bij alleen zoomen), zijn niet meer alle witte vlakken te bereiken, omdat sommige helemaal buiten de groene achtergrond komen te staan. Dit geldt waarschijnlijk voor álle browsers, maar alleen Firefox en Safari kunnen tekst zo sterk vergroten.

Internet Explorer 6

In 'n heel enkel geval is 'n rij witte vlakken iets breder dan zou mogen. Ik heb geen flauw idee waarom dat is, wel 'n vermoeden. Het schijnt te gebeuren als de rij vlakken niet breder is dan de toegestane ruimte, maar wel in de padding terecht komt. Of zoiets, want ook stoeien met de padding levert geen genezing op.

Nauwelijks 'n echt probleem, want het gaat maar om 'n hele kleine verbreding: zodra de witte vlakken echt te breed zouden worden, wordt het teveel keurig op 'n nieuwe regel gezet.