Skip links en inhoudsopgave

Laatst aangepast: .

Sitemap met ronde hoeken en doorzichtigheid. Opent bij hoveren

Korte omschrijving

Sitemap die opent als je over 'n ingang hovert. Maakt gebruik van ronde hoeken en doorzichtigheid. Met alternatief voor toetsenbord-gebruikers.

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

Als je alle css weghaalt, zijn beide pagina's uit dit voorbeeld vrijwel hetzelfde: gewoon een serie geneste ongeordende lijsten. In de buitenste lijst staan de belangrijkste onderdelen van de site, in de eerste geneste lijst de onderverdeling daarvan, enz.

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

Hoewel beide pagina's dus volkomen verschillend lijken, is alleen de css en daarmee de opmaak verschillend. De inhoud is exact hetzelfde (op de link over en weer na).

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

Dezelfde sitemap met alleen de ingang waarover wordt gehoverd volledig zichtbaar
Dezelfde sitemap met alleen de ingang waarover wordt gehoverd volledig zichtbaar.

Nogmaals dezelfde sitemap. Alles is zichtbaar, maar wel met opmaak.
Nogmaals dezelfde sitemap. Alles is zichtbaar, maar wel met opmaak.

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

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

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

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

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

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

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

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

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

Voor mensen die het toetsenbord gebruiken, is deze sitemap volstrekt ontoegankelijk (behalve in Opera). Daarom is een tweede pagina gemaakt, waarbij de hele sitemap gewoon is geopend en met behulp van de Tab-toets van link naar link kan worden gegaan.

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

Op de pagina voor het toetsenbord staat als eerste een link naar de pagina voor de muis, maar deze is gewoon altijd zichtbaar. Maar op deze pagina zijn alle links gewoon altijd zichtbaar.

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

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

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

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

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

In Internet Explorer 9 werkt alles wel zoals het hoort.

De feitelijke inhoud van deze twee pagina's, de html binnen <body>, is exact hetzelfde. Op één klein detail na: de link die naar de andere pagina verwijst. Daarom zijn twee verschillende pagina's voor in wezen dezelfde inhoud eigenlijk onzin. Bovendien heeft het allerlei nadelen. Als je bijvoorbeeld iets wijzigt aan de sitemap, is het heel makkelijk die wijziging te vergeten bij een van de pagina's.

Met behulp van PHP, SSI, of iets soortgelijks kun je zien, vanaf welke link de bezoeker binnenkomt. Dit geeft de mogelijkheid om alle css en html in één pagina te zetten. Dit is gedaan bij www.css-voorbeelden.nl/lijst/lijst-096. Uiterlijk enz. van de sitemap is precies hetzelfde als hier, maar alles zit in één pagina.

Omdat nu maar één pagina hoeft te worden onderhouden in plaats van twee, loop je niet meer het risico dat er per ongeluk twee verschillende versies van dezelfde pagina naast elkaar bestaan.

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 gebruikt om naar 'n link te gaan.

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

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

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

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

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

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

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

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

Speciaal bij dit voorbeeld

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

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

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

Beschrijving van code en css

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

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

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

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

<!DOCTYPE html> <html lang="nl">

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

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

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

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

<meta charset="utf-8">

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

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

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

<link rel="stylesheet" href="../../css/naam-van-stylesheet.css"> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" 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> en </style> staat (zonder deze begin- en eindregel).

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

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

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

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

De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer die uit de algemene stylesheet dan in principe overrulen.

<style>

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 <style> en </style> staat.

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

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


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

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

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

margin: 0; padding: 0;

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

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

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

font-size: 100%;

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

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

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

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

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

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

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

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

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

background: #ff9;

Achtergrondkleurtje.

Css voor 095-muis-dl.html

a#toetsenbord Link naar pagina voor toetsenbord

De link met id="toetsenbord". Dit is de link naar 094-toetsenbord-dl.html, de pagina voor het toetsenbord.

Deze link is normaal genomen onzichtbaar. Alleen als hij focus heeft (als je op Enter drukt, wordt de link gevolgd), is hij zichtbaar.

position: absolute;

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

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

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

left: -2000px;

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

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

top: 20px;

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

z-index: 200;

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

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

width: 10.5em;

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

background: white;

Achtergrond wit.

text-align: center;

Tekst horizontaal centreren.

a#toetsenbord:focus, a#toetsenbord:active

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

Dit is de link naar 094-toetsenbord-dl.html, de pagina voor het toetsenbord. Normaal genomen is deze link onzichtbaar, maar als hij focus heeft of actief is, wordt hij op het scherm gezet.

left: 10.5em;

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

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

border: red solid 3px;

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

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

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

ul

Alle ongeordende lijsten.

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

position: relative;

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

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

width: 18em;

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

margin: 0 0 0 20px;

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

Boven, rechts en onder geen marge.

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

border-radius: 7px;

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

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

padding: 0;

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

list-style-type: none;

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

ul#content

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

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

height: 60em;

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

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

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

margin-top: 20px;

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

ul ul

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

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

margin-top: -0.25em;

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

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

border: black solid 1px;

Zwart kadertje rondom elke geneste lijst.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ul.titel

De ongeordende lijsten met class="titel".

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

border: 0;

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

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

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

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

ul ul ul

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

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

margin: -0.73em 0 0 6em;

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

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

li

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

height: 1.6em;

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

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

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

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

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

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

Doorzichtige border.

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

Ik had ook kunnen schrijven:

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

maar dat is iets langer.

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

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

border-radius: 7px;

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

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

padding: 2px 2px 2px 4px;

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

line-height: 1.6em;

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

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

li#home

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

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

border: black solid 1px;

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

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

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

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

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

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

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

ul.titel li

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

height: auto;

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

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

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

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

padding-left: 1em;

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

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

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

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

border: black solid 1px;

Zwart randje rondom de lijst-ingang.

text-indent: -0.8em;

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

line-height: 1.2em;

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

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

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

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

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

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

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

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

a

Alle links.

border-radius: 7px;

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

margin-left: -2px;

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

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

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

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

padding: 2px 4px;

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

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

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

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

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

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

span.meer

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

position: absolute;

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

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

right: 8px;

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

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

visibility: hidden;

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

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

font-size: 1.5em;

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

li:hover

Als ik over een lijst-ingang hover.

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

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

Ik had ook kunnen schrijven:

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

maar dat is iets langer.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

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

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

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

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

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

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

ul.titel li:hover

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

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

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

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

Bij ul.titel li geef ik een achtergrondkleur op. Deze selector kent 2 elementen (ul en li) en 1 class (titel).

Bij li:hover verander ik de achtergrondkleur. Maar deze selector kent maar 1 element (li) en 1 pseudo-class (:hover).

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

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

li:hover > span.meer

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

visibility: visible;

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

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

li:first-child

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

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

border-width: 0 0 1px;

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

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

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

li:last-child

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

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

border-width: 1px 0 0;

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

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

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

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

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

li:only-child

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

border: 0;

Laat geen border zien.

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

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

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

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

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

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

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

li#home:hover

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

background: white;

Witte achtergrond geven.

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

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

In li#home:hover zit 1 element (li), 1 id (#home) en 1 pseudo-class (:hover). Daardoor heeft dit wel genoeg specificiteit om de achtergrondkleur van li#home te kunnen veranderen.

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

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

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

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

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

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

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

De selectors apart:

li ul ul {left: -2000px;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

li:hover li:hover ul ul {left: -2000px;}

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

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

Gelijktijdig over meerdere lijst-ingangen hoveren

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

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

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

Dit toont aan hoe sociaal css eigenlijk is. In de grote boze buitenwereld worden bejaarden en kinderen opgeborgen in tehuizen en naschoolse opvang, maar in css leeft de hele familie nog gezellig in één groot huis. Zoals trouwens in grote delen van de wereld nog steeds heel normaal is.

(Wat zal Wilders het daar moeilijk mee hebben: enge buitenlandse invloeden op z'n eigenste website. Misschien een onderzoek naar de islamisering van w3c, de organisatie die de standaard voor css bijhoudt? En wanneer gaat Hero Brinkman ferme Kamervragen stellen over de invloed van Al Qaida op css? De PVV maakt zich inmiddels ook al druk over islamitische meeuwenpoep in Den Haag, dus dit lijkt me dan ook wel interessant genoeg. Mogen valken straks trouwens nog hoofddoekjes dragen? Of mogen alleen mannelijke valken dat straks nog?)

(Ja, sorry hoor, maar híj is begonnen met dat geëmmer over hoofddoekjes.)

Waar waren we gebleven.

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

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

Te veel onderdelen gelijktijdig geopend

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

Gelukkig is dit simpel te voorkomen.

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

li:hover li:hover li:hover ul ul {left: -2000px;}

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

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

li:hover li:hover li:hover ul

Daarin zitten 4 elementen (li en ul) en drie pseudo-classes (:hover).

In li:hover li:hover ul ul, dat ik hierboven gebruik, zitten maar 4 elementen (li en ul) en twee pseudo-classes (:hover). Dat verliest dus altijd van li:hover li:hover li:hover ul.

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

li:hover li:hover ul, li:hover li:hover li:hover ul, li:hover li:hover li:hover li:hover ul {left: 20px;}

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

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

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

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

De selectors apart:

li:hover li:hover ul {left: 20px;}

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

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

Gelijktijdig over meerdere lijst-ingangen hoveren

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

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

li:hover li:hover li:hover ul {left: 20px;}

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

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

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

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

li:hover li:hover li:hover li:hover ul {left: 20px;}

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

Speciaal voor Internet Explorer 7 en 8

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

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

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer die uit de algemene stylesheet dan in principe overrulen.

Dit stukje geldt voor versies ouder dan Internet Explorer 9 (lt betekent less than: minder dan, hier dus ouder dan Internet Explorer 9). Maar je kunt het ook voor andere versies aangeven.

(In feite is deze css alleen voor Internet Explorer 7 en 8, want oudere versies van Internet Explorer herkennen hoveren over een <li> niet, dus daar werkt heel dit voorbeeld niet.)

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

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

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

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

li#home, ul ul

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

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

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

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

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

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

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

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

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

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

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

ul.titel li

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

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

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

ul.titel li:hover, li:hover

Als over een lijst-ingang wordt gehoverd.

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

In li:hover zit maar 1 element (li) en 1 pseudo-class (:hover). Dat heeft daarom te weinig specificiteit (gewicht) om de bij ul.titel li opgegeven achtergrond-afbeelding te wijzigen.

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

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

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

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

a

Alle links.

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

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

Css voor 095-toetsenbord-dl.html

a#muis

De link met id="muis". Dit is de link naar de pagina voor de muis.

display: inline-block;

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

width: 750px;

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

margin: 3px 0 0 20px;

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

border: black solid 1px;

Zwart randje om de link.

padding: 2px;

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

background: white;

Witte achtergrond.

ul

Alle ongeordende lijsten.

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

margin: 5px 0 -1px 26px;

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

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

Rechts geen marge.

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

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

border-radius: 10px;

Alle ongeordende lijsten krijgen ronde hoeken.

padding: 2px 0 0 4px;

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

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

list-style-type: none;

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

font-size: 2em;

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

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

ul#content

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

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

width: 750px;

Breedte.

margin: 5px 0 20px 20px;

Kleine marge van 5px aan de bovenkant.

Rechts geen marge.

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

Links ook een kleine marge van 20 px.

border: black solid 1px;

Randje rondom de hele <ul>.

padding-bottom: 26px;

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

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

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

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

Marges aan linkerkant van de lijsten

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

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

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

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

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

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

background: #bbb;

Donkergrijze achtergrondkleur.

ul ul

Elke ongeordende lijst die binnen een andere ongeordende lijst staat.

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

border: black solid;

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

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

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

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

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

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

padding: 4px 0 0 8px;

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

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

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

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

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

background: #ccc;

Iets lichtere achtergrondkleur dan die van ul#content.

font-size: 0.9em;

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

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

ul ul ul

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

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

background: #ddd;

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

font-size: 0.85em;

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

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

ul ul ul.titel li

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

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

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

font-size: 0.75em;

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

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

ul ul ul ul

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

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

background: #eee;

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

font-size: 0.83em;

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

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

ul ul ul ul.titel li

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

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

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

font-size: 0.88em;

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

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

ul ul ul ul ul.titel li

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

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

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

font-size: 1.1em;

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

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

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

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

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

li

Alle lijst-ingangen.

position: relative;

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

span.meer

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

display: none;

Deze tekens zijn alleen nodig op de pagina voor de muis, niet op deze pagina. Verbergen dus.

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

ul.titel

De ongeordende lijsten met class="titel".

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

border-radius: 12px 0 0 12px;

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

padding: 2px 4px;

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

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

background: white;

Witte achtergrond.

ul.titel li

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

bottom: -3px;

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

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

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

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

margin-left: 20px;

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

border-bottom: black dotted 1px;

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

padding: 4px 9em 2px 2px;

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

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

Links staan over tekst heen

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

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

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

text-indent: -20px;

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

ul.titel li:first-child

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

padding-top: 0;

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

ul.titel li:last-child

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

border: 0;

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

ul.titel a

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

position: absolute;

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

right: 3px; bottom: 3px;

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

ul.titel a:last-child

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

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

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

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

right: 5.2em;

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

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

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

ul#artikelen ul.titel li

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

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

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

padding-right: 3px;

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

text-align: right;

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

ul#artikelen a

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

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

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

display: block;

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

position: static;

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

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

padding-bottom: 2px;

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

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style> li {line-height: 1.2em;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 7. Uitleg zie bij Speciaal voor Internet Explorer 7 en 8.

li

Alle lijst-ingangen.

line-height: 1.2em;

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

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

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

Speciaal voor Internet Explorer 7 en 8

<!--[if lt IE 9]> <style> ul.titel a + a {right: 5.2em;} </style> <![endif]-->

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

ul.titel a + a

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

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

right: 5.2em;

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

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

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

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

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

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

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

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

Enkele tips die helpen bij toegankelijkheid:

Specifiek voor dit voorbeeld

Zonder css ziet de sitemap eruit als een serie geneste ongeordende lijsten <ul>). Het is zonder css dus gewoon toegankelijk voor spraakbrowsers en dergelijke.

In spraakbrowsers en dergelijke wordt, afhankelijk van het programma en de instellingen daarvan, de schermtekst en/of de titel van de link weergegeven.

Een menu of een soortgelijke constructie zoals een sitemap kan in de regel het best in een <ul> worden gezet, omdat veel spraakbrowsers en dergelijke een menu binnen een <ul> herkennen. Daardoor is het makkelijker om in één keer het hele menu te passeren. Een andere mogelijkheid is het gebruik van een zogenaamde skip-link.

Getest in

Laatst gecontroleerd op 15 mei 2012.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan hieronder bij Bekende problemen. Het is belangrijk dat te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt! Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Dit voorbeeld is getest op de volgende systemen:

Er is steeds getest met de laatste versie van de browsers op de hierboven genoemde controledatum, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In resoluties groter dan 800x600 is ook in- en uitzoomen en – voor zover de browser dat kan - een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Er is getest met behulp van muis en toetsenbord, behalve op de iPad en in Android.

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

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

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld ’n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

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

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

Bekende problemen

Touchscreen (Android en iPad)

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

Internet Explorer 7

Internet Explorer 8

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

Internet Explorer 7 en 8

Internet Explorer 9

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

Google Chrome en Safari

Op de pagina voor de muis verschijnt, bij gebruik van de Tab-toets, als eerste een link naar de pagina voor het toetsenbord. Deze link werkt in niet, als je erop klikt, maar wel als je op Enter drukt. Dit is een bug, die is doorgegeven.

Google Chrome

Op beide pagina's verdubbelen bij uitzoomen (verkleinen) sommige horizontale lijntjes. Dit zijn afrondingsverschillen, waar niets aan te doen is.

Opera

Safari en Firefox

Op de beide pagina's verdubbelen bij uitzoomen (verkleinen) sommige horizontale lijntjes. Dit zijn afrondingsverschillen, waar niets aan te doen is.

Wijzigingen

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

:

Nieuw opgenomen.

17 april 2011:

Bij li links een padding van 4 px gegeven (was 2 px). Bij a links een negatieve marge van 2 px gegeven. Als gewone tekst en links in dezelfde lijst stonden, stonden de links iets meer naar rechts dan de gewone tekst. Nu is alles netjes links uitgelijnd.

15 mei 2012: