Uitleg sitemap met ronde hoeken en doorzichtigheid. Opent bij hoveren

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.

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.

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.

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.

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.

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

Achtergrond wit.

Tekst horizontaal centreren.

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.

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.

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

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.

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.

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

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.

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.

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.

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

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.

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.

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

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.

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.

Zwart kadertje rondom elke geneste lijst.

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.

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.

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.

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 ul#titel ook een border heeft.

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.

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.

Deze regel heeft alleen invloed op <ul>'s die twee keer of meer genest zijn, dus niet op de twee meest linkse <ul>'s in bovenstaande afbeelding, maar wel op de rechter.

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.

Alle lijst-items. Een aantal instellingen zijn voor alle lijst-items 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.

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.

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:

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.

De lijst-items 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.

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

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

Het lijst-item met id="home". Dit is het allereerste lijst-item, dat waar 'Home' in staat.

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

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

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

Als ik de buitenste <ul> een achtergrond ozu geven, is die over een veel te groot oppervlak zichtbaar.

Als ik de achtergrond alleen aan de <li> geef, gaat het wel goed.

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.

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

Zonder correctie voor de hoogte van de <li>'s denken ze, dat ze 1.8 em hoog zijn.

Bij li heb ik alle lijst-items 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-items 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.

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

Zwart randje rondom het lijst-item.

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

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.

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.

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.

Alle links.

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.

Zonder negatieve marge links.

Bij li is aan alle lijst-items een links padding van 4 px gegeven. Deze padding zorgt voor wat afstand tussen buitenkant van het lijst-item 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 het lijst-item plus 2 px van zichzelf, samen 6 px. Terwijl tekst die geen link is aan de linkerkant alleen de padding van het lijst-item 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 het lijst-item te staan, waardoor alles netjes links is uitgelijnd.

Met een padding van overal 2 px.

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.

Met padding: 2px 4px;

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.

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.

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

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.

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.

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.

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.

Als ik over een lijst-item hover.

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:

maar dat is iets langer.

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.

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.

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

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.

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

Het effect van dezelfde selector zonder >

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

Lijst-items, 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 elk eerste lijst-item binnen een lijst.

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.

Lijst-items, 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 elk laatste lijst-item binnen een lijst.

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.

Als een lijst-item 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.

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.

Boven 'Head' staat een dubbele border, als ik geen only-child gebruik.

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.

Het lijst-item met id="home", maar alleen als ik erover hover. Dit is het bovenste lijst-item, dat waar 'Home' in staat.

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.

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.

Een deel van de sitemap als álles zichtbaar is.

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:

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

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

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-item liggen, en die moet ook weer binnen een lijst-item liggen.

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

Als ik over het lijst-item met 'Afbeelding' hover, hover ik automatisch ook over het lijst-item 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-items. 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 het lijst-item met 'Afbeelding' zit, geopend wordt als ik over 'Afbeelding' hover. Dat is de <ul> met 'Imagemap', 'Overig', enz.

Maar binnen de lijst-items 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.

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

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.

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:

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

Bovendien moet over beide lijst-items 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.

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.

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.

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

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:

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.

Het lijst-item met id="home" (dat is het lijst-item waar 'Home' in staat).

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

Om redenen die mij niet geheel duidelijk zijn, vertonen Internet Explorer 7 en 8 een nogal eigenaardig gedrag bij hoveren over sommige lijst-items. 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 het eerste lijst-item (dat met 'Home') en in sommige andere lijst-items 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!

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

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.

Als over een lijst-item 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.

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.

Alle links.

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.

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

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.

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

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.

Zwart randje om de link.

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

Witte achtergrond.

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.

Zonder (links) en met (rechts) een marge van 5 px aan de bovenkant. De <ul>'s zijn van elkaar te onderscheiden door de verschillende achtergrondkleur.

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.

Links zonder, rechts met een kleine negatieve marge aan de onderkant.

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.

Alle ongeordende lijsten krijgen ronde hoeken.

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.

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

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.

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.

Breedte.

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.

Randje rondom de hele <ul>.

Links zonder, rechts met padding onderaan.

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-items naar voorbeelden en artikelen in staan. Op de afbeelding hierboven zijn die lijst-items 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.

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.

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.

Donkergrijze achtergrondkleur.

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.

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.

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.

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.

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.

Iets lichtere achtergrondkleur dan die van ul#content.

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.

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.

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

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.

Een lijst-item 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-items waarbinnen de langere teksten over voorbeelden en artikelen staan.

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

Bij ul ul ul is een lettergrootte van 0.85 em opgegeven. Hier verklein ik die iets voor deze lijst-items. 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.

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.

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

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.

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

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

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

Bij ul ul ul ul is een lettergrootte van 0.83 em opgegeven. Hier verklein ik die iets voor deze lijst-items. 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.

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

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

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

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-items) dieper genest zijn. Daarom hebben lijst-items 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...)

Alle lijst-items.

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.

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

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.

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.

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.

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-items met de daarin staande tekst.

Witte achtergrond.

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

Internet Explorer 7 en 8 zonder correctie. De onderste stippellijn is volkomen overbodig.

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.

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.

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.

Zonder (links) en met (rechts) wat padding bovenaan.

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.

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.

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.

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

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

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

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.

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

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.

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.

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.

Er staan hoogstens twee links in een lijst-item 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 lijst-items 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-items 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.

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.

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

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.

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.

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.

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

Speciaal voor Internet Explorer 7

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

Alle lijst-items.

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 elk lijst-item 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

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

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.

Er staan hoogstens twee links in een lijst-item 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.