Skip links en inhoudsopgave

Laatst aangepast: 20 december 2011

Slideshow met horizontale rij thumbnails en foto's. Gebruikt weinig bandbreedte

Korte omschrijving

Bij hoveren over 'n thumbnail opent de bijbehorende grote foto. Je kunt van foto naar foto gaan door te scrollen, door te klikken of met de Tab-toets. Alleen de grote foto's die worden getoond worden gedownload, dus er wordt zo weinig mogelijk bandbreedte gebruikt.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Opmerkingen

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Dit voorbeeld valt in twee grote delen uiteen: de thumbnails en de grote foto's. Daarnaast is er nog het hulpvenstertje, maar dat is niet wezenlijk van belang voor dit voorbeeld. Ik reken het wel tot de essentiële code, omdat het nogal lastig was om het vraagteken op de goede plaats te zetten en te houden. 'n Vraagteken met karakter, zogezegd. (Altijd nog beter dan 'n karakter met 'n vraagteken trouwens...)

Bij het openen van de pagina worden alle thumbs ingelezen. Omdat het thumbs zijn, gaat dat relatief snel. De grote foto's worden nog niet gedownload.

Aan de bovenkant staat 'n horizontale rij thumbs. Omdat niet alle thumbs in het browservenster passen, kun je door de thumbs scrollen met behulp van de scrollbalk.

De horizontale scrollbalk ontstaat door twee divs binnen elkaar te zetten. De buitenste div is 650 px breed. De binnenste div is breed genoeg om er alle thumbs naast elkaar in te kunnen zetten, dus veel breder dan de buitenste. Door bij de buitenste div overflow op auto te zetten ontstaat een horizontale scrollbalk.

Alle thumbs worden in de binnenste div neergezet. Dat klinkt simpeler dan het is, want je kunt ze niet simpelweg allemaal naast elkaar neerzetten, omdat diverse browsers heel andere ideeën hebben over wat 'naast elkaar' betekent.

In de html staan de thumbs (en alles wat bij elke thumb hoort) onder elkaar. Op het scherm moeten ze naast elkaar staan. Maar er moet ook op allerlei manieren naar elke thumb gelinkt worden, en de thumb waarnaar wordt gelinkt moet dan zichtbaar worden. Dit blijkt veel en veel moeilijker te zijn bij zo'n horizontale rij thumbs dan bij 'n verticale rij.

Elke thumbnail staat in een link. Die link verwijst naar de volgende link met thumb. Door dus op 'n thumb te klikken, ga je naar de volgende thumb. Als je op de laatste link klikt, ga je weer terug naar het begin.

Elke link met thumb staat in een span. Die span stond er oorspronkelijk voor heel iets anders en zou inmiddels overbodig moeten zijn. Maar zonder deze span en wat css daarvoor werkt Internet Explorer 7 niet goed. Bij dit voorbeeld is er trouwens 'n hele serie van dit soort dingen, en niet alleen voor Internet Explorer, die in verschillende browsers op 'n andere manier werkt. Dat wordt in de code steeds uitgelegd.

Onder elke span met link en thumb staat een rechtstreekse link naar de grote afbeelding. Die zie je normaal genomen niet omdat hij ver buiten het scherm wordt gepositioneerd. Maar als css uit staat, verschijnt hij wel op het scherm. Dit geeft de mogelijkheid om, als css uit staat, 'n rechtstreekse link naar 'n grote afbeelding te volgen.

Behalve bij de eerste acht (daar is dit niet nodig) staan onder elke span met link en thumb vervolgens nog twee links. Alle eerste links hiervan vormen samen 'n soort 'cirkel', en de tweede links ook.

De eerste links linken steeds naar de volgende link uit de eerste serie. De laatste linkt weer terug naar de eerste. Als je dus alle links achter elkaar aanklikt, heb je 'n soort cirkel afgelegd. Deze links zetten het teken > op de balk bovenin: eentje verder. Elke keer als je op > klikt, verschijnt de volgende >. Dat zie je niet, omdat ze er allemaal hetzelfde uit zien, maar in werkelijkheid gaat het dus om 22 verschillende >'s. (22, want de eerste acht spans met thumb hebben er geen nodig, en er zijn er in dit voorbeeld dertig.)

Ook al zie je dat niet, bij elke klik schuif je dus een > naar rechts.

Omdat deze links in de code ónder 'n span met 'n bepaalde thumb staan, maar bóven de daarop volgende span met thumb, 'dwingen' ze die volgende span met thumb om mee te schuiven. Dus je ziet 'n nieuwe > verschijnen, én 'n nieuwe thumb. En die nieuwe thumb is precies de bedoeling!

De andere kant uit, terug naar voren, werkt precies zo. Dat is de tweede serie links waar het teken < bij hoort. Enige verschil is dat deze < niet naar de vorige link linkt, maar naar acht links terug. Het teken < dat je ziet hoort namelijk bij de laatste zichtbare thumb, en als je gewoon naar de vorige < zou linken, zou er niets verschuiven, maar zou alleen de focus een < naar links verschuiven. En die < hoort bij een span met thumb die nog zichtbaar is.

Door acht < naar links te linken, wordt gelinkt naar een plaats net voor de eerste niet zichtbare span met thumb, die daardoor binnen de scrollbalk wordt gezet.

Dit linken naar voren werkt niet in Opera, wat ik ook heb geprobeerd. Bij Opera moet je met de scrollbalk of met Shift+Tab terug naar links. Meer hierover bij Bekende problemen.

Omdat elke span met thumb dus z'n eigen < en > heeft, die bovenaan in de navigatiebalk worden gepositioneerd, zou je 'n hele rij <'s en >'s te zien krijgen. Om dat te voorkomen worden alle <'s en >'s afgedekt, behalve de laatste twee.

Dit levert dan weer grappige andere problemen op, want die <'s en >'s moeten wel worden afgedekt, maar niet de titels van de afbeeldingen, die op dezelfde plaats verschijnen zodra 'n thumb focus heeft. Maar als je dan weer over 'n andere thumb hovert, moet de titel daarvan weer 'winnen' van <, >, afdekking en titel van de thumb met focus. En natuurlijk moet het hulpschermpje het daar weer van winnen. Dat bereik je allemaal met z-index. Dus wat betreft de z-index heeft het in dit voorbeeld bepaald voordelen als je aanleg hebt voor boekhouden. Nogmaals: niet echt iets voor beginners.

In dezelfde link waar de thumb in staat, staat ook een titel. Die titel wordt bovenin de navigatiebalk gepositioneerd. Omdat de titel in dezelfde span staat als de thumb, is het zichtbaar of onzichtbaar zijn van de titel te koppelen aan het wel of niet focus hebben van de link (en dus de thumb) en hoveren. En omdat de grote afbeelding hier ook aan is gekoppeld, zijn titel en grote afbeelding dus via de link met de thumb ook (indirect) aan elkaar gekoppeld. Precies de bedoeling.

Als 'n link met thumb focus heeft, wordt de titel zichtbaar. Als er over 'n andere link dan die focus heeft wordt gehoverd, wordt de titel (en de grote afbeelding) die bij die thumb horen zichtbaar, omdat die 'n hogere z-index hebben.

Elke thumb die focus heeft of waarover wordt gehoverd krijgt 'n witte omlijsting, zodat je duidelijk kunt zien op welke positie je in de scrollbalk bent.

De grote foto's zijn background-images. Deze staan in een span, die als blok-element wordt weergegeven. Deze span staat binnen 'n link, waarbinnen ook de thumb staat. Bij hoveren over de thumb wordt de span - en dus de grote foto - zichtbaar. Zolang je niet boven de thumb komt met de cursor, wordt de grote foto niet geopend, ook niet als je klikt op de pijltjes bovenaan de thumb of als je klikt op de scrollbalk. (Internet Explorer 7 wijkt iets af, zie Hoe het hoort te werken en hoe het blijkt te werken.)

Door het gebruik van :active en :focus kun je ook met de Tab-toets van thumb naar thumb, en dus van grote foto naar grote foto, gaan. Omdat de Tab-toets de links afgaat in de volgorde zoals ze in de html voorkomen, heb ik de links met de thumbs met behulp van tabindex 'n nummer gegeven. Daardoor worden eerst de links met de nummers 'bezocht', en pas daarna alle andere links zonder nummer. Anders zouden na elke thumb steeds eerst de < en > worden bezocht en de link die rechtstreeks naar de foto verwijst, en zou je dus vier keer moeten tabben om bij de volgende thumb te komen.

Hierdoor krijg je dus eerst 30 keer 'n thumb, en daarna zou je 90 keer 'n 'waardeloze' link bezoeken (waardeloos voor de gebruiker van de Tab-toets). Dat zou nog niet zo erg zijn, maar tijdens het bezoeken van die 90 'waardeloze' links gebeuren er in sommige browsers de wildste dingen (in sommige browsers krijgt de scrollbar iets weg van 'n tango). Daarom heb ik een 31e link toegevoegd die alleen zichtbaar wordt als je de Tab-toets gebruikt. Die laat 'n venstertje zien dat je niet verder moet tabben en wat je wel moet doen.

Daarnaast heb ik de links die bij de < en > horen 'n tabindex van -1 gegeven. Hierdoor worden deze gewoon helemaal niet meer bezocht bij het tabben, zodat je nog maar 30 'waardeloze' links hebt. De links die rechtstreeks naar de foto's verwijzen en normaal genomen onzichtbaar zijn kan ik geen negatieve tabindex geven, want die kunnen nodig zijn als css uitstaat en iemand de muis niet kan gebruiken.

De tabindex laat ik steeds met 10 oplopen, zodat je er later makkelijk nog iets tussen kunt stoppen zonder dat je alle tabs opnieuw moet gaan nummeren. (Afdeling schade en schande: ooit zo'n 1000 tabs voorzien van 'n tabindex, en toen moest er helemaal aan het begin iets worden tussengevoegd. Zo'n fout maak je maar één keer...)

Normaal genomen zouden in html met css alle afbeeldingen gelijk worden gedownload. Dat is hier niet goed voor je populariteit, omdat dat bij 'n wat trage verbinding vele minuten kan gaan duren met de dertig afbeeldingen uit dit voorbeeld. Laat staan bij 'n echt grote serie foto's.

De thumbs worden vrij snel gedownload, maar dat geldt niet voor de grote afbeeldingen. De thumbs moeten trouwens hoe dan ook worden gedownload, anders kun je ze niet zien. Maar van de grote foto's hoeven alleen degene die je echt wilt zien te worden gedownload.

Elke grote foto heeft 'n eigen span. De grote foto is 'n background-image binnen die span. Door bij elke span expliciet te zeggen dat die background-image pas wordt getoond bij :hover, :focus of :active, wordt de grote foto pas gedownload als over de thumb wordt gehoverd, als op de thumb wordt geklikt of als via de Tab-toets de thumb is bereikt. Alleen de grote foto's die daadwerkelijk worden bekeken worden dus gedownload.

Zonder deze expliciete opdracht downloaden sommige browsers álle grote foto's bij het openen van de pagina, en daar word je niet echt gelukkig van, hoe mooi de foto's ook zijn.

Dan resten nog drie dingen: ?, << en >>.

Het vraagteken hoort bij een hulpschermpje waarin staat hoe alles werkt. In feite drie hulpschermpjes: eentje voor Internet Explorer 6, eentje voor Internet Explorer 7, eentje voor Internet Explorer 8 en 9, en eentje voor serieuze browsers.

Het vraagteken (en dus het hulpschermpje) staan helemaal los van de rest van de code. Het vraagteken had ook linksboven, rechtsonder of bij de buren gepositioneerd kunnen worden.

Ook << en >> staan helemaal los van de rest van de code. Het zijn gewoon simpele links naar de eerste en de laatste thumb, die hierdoor binnen de balk met de thumbnails worden gezet. In Opera werkt << niet, zie verder bij Bekende problemen. Door << en >> binnen de navigatiebalk te positioneren, staan ?, <<, >>, < en > allemaal netjes naast elkaar.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Speciaal bij dit voorbeeld

In dit geval gebruik ik ook :focus en :active, omdat de afbeeldingen geen andere delen van de pagina bedekken. Als 'n thumbnail focus heeft gekregen door gebruik van de Tab-toets, blijft de afbeelding geopend. Maar door verder te tabben, opent gewoon weer 'n andere afbeelding. In sommige browsers blijft de afbeelding ook geopend als je op 'n thumb klikt, ook in dat geval opent gewoon weer 'n nieuwe afbeelding als je op 'n andere thumb klikt.

Als 'n afbeelding open blijft omdat de thumb focus heeft, opent er bij hoveren over 'n andere thumb gewoon 'n andere afbeelding. In dit geval heeft het gebruik van :focus en :active volgens mij meer voor- dan nadelen.

Hoe het hoort te werken en hoe het blijkt te werken

Ik beschrijf eerst per onderdeel hoe dit onderdeel zou horen te werken in een ideale situatie. Daarna beschrijf ik per onderdeel de afwijkingen en problemen die elke browser heeft. 'n Afwijking is gewoon 'n andere manier om iets af te handelen, niet noodzakelijk beter of slechter. 'n Probleem is iets wat echt verkeerd of niet werkt.

Bij Bekende problemen staan nog wat problemen die niet binnen dit onderwerp vallen. Daar worden ook alle problemen die hier worden genoemd nog 'ns kort opgesomd, zodat je alle 'echte' problemen bij elkaar hebt staan.

Scrollbalk

Werkt precies zoals je zou verwachten, in alle browsers.

>

Bij klikken hierop moet de eerste niet-zichtbare thumb aan de rechterkant zichtbaar worden. Als die er niet meer zijn, moet naar de eerste thumb worden teruggegaan. De grote afbeelding moet niet worden getoond.

Alle browsers

Bij gebruik van scrollbalk of Tab-toets kunnen > en < verkeerd komen te staan. Hoewel je maar twee tekens ziet, is dit in werkelijkheid 'n lange rij met <'s en >'s. In sommige browsers levert dit kleine problemen op, dat staat hieronder.

Firefox

Werkt prima.

Internet Explorer 7

Werkt prima. Alleen verschuiven er niet 1, maar 8 thumbs, de complete lengte van de balk met thumbs. Omdat Internet Explorer 7 de grote afbeelding toont als je op > klikt, komt dit eigenlijk niet slecht uit. De grote afbeeldingen worden pas gedownload als ze worden getoond, en nu downloadt Internet Explorer 7 maar 1 van de 8.

Internet Explorer 8 en 9

Het klikken op > werkt precies zoals bedoeld. De grote afbeelding wordt wel getoond, helaas, want dit kost dus veel bandbreedte.

Safari en Google Chrome

Werkt goed.

Na gebruik van de Tab-toets of de scrollbalk kunnen de < en de > verkeerd om staan. In dat geval reageren ze niet op klikken, omdat ze dan linken naar 'n al zichtbare thumb. Klikken op de laatst zichtbare thumb of de scrollbalk 'n klein stukje verschuiven lost dit op. Maar ik zie mensen eigenlijk niet zo snel omschakelen tussen Tab-toets en klikken. Bovendien kennen de meeste mensen deze werking van de Tab-toets niet.

Opera

Werkt goed, alleen ga je aan het einde niet terug naar de eerste thumb. Bovendien verschuift Opera niet 1, maar 8 thumbs, de complete lengte van de balk met humbs.

Internet Explorer 6

Heeft geen >. Dat is dan vermoedelijk ook de enige reden dat deze grossier in nagels aan doodskisten er geen problemen mee heeft.

<

Bij klikken hierop moet de eerste niet-zichtbare thumb aan de linkerkant zichtbaar worden. Als die er niet meer zijn, moet naar de laatste thumb worden gegaan. De grote afbeelding moet niet worden getoond.

Firefox

Werkt prima.

Internet Explorer 7

Werkt prima. In tegenstelling tot bij de > verschuift nu steeds maar 1 thumb. Alleen springt de focus (het witte kadertje) van afbeelding 30 terug naar afbeelding 22. De tussenliggende afbeeldingen worden niet getoond. Maar omdat de tussenliggende thumbs wel gewoon zichtbaar zijn, zal dit geen problemen opleveren. De grote afbeelding wordt getoond. De grote afbeelding wordt getoond.

Internet Explorer 8

Werkt prima. De tussenliggende afbeeldingen worden niet getoond. Maar omdat de tussenliggende thumbs wel gewoon zichtbaar zijn, zal dit geen problemen opleveren. De grote afbeelding wordt getoond.

Safari en Google Chrome

Werkt goed.

Na gebruik van de Tab-toets of de scrollbalk kunnen de < en de > verkeerd om staan. In dat geval reageren ze niet op klikken, omdat ze dan linken naar 'n al zichtbare thumb. Klikken op de laatst zichtbare thumb of de scrollbalk 'n klein stukje verschuiven lost dit op. Maar ik zie mensen eigenlijk niet zo snel omschakelen tussen Tab-toets en klikken. Bovendien kennen de meeste mensen deze werking van de Tab-toets niet.

Opera

Doet niets.

Internet Explorer 6

Heeft geen >.

>>

Moet naar de laatste thumb gaan.

Alle browsers

Werkt goed.

<<

Moet naar de eerste thumb gaan.

Alle browsers behalve Opera

Werkt goed.

Opera

Doet niets.

?

Moet een hulpschermpje met uitleg openen.

Alle browsers

Werkt prima.

Tabben

Door het indrukken van de Tab-toets worden een voor een alle grote afbeeldingen geopend. De thumbs moeten meeschuiven. De thumb die focus heeft moet een witte rand hebben. Na de laatste thumb moet een venstertje verschijnen met de waarschuwing dat hierna 30 'technische' links volgen en dat verder tabben dus geen nut heeft. 't Kan wel, maar na 30 tabs kom je dan weer gewoon bij de eerste thumb, dus erg zinvol is zo'n operatie nou niet te noemen.

Met Shift+Tab ga je terug.

Firefox

Werkt prima.

Internet Explorer 6, 7, 8 en 9

Werkt prima.

Safari, Google Chrome en Opera

Werkt goed. Als het zichtbare deel van de balk met thumbs is afgewerkt, verspringen de thumbs vier plaatsen, en dan gaat 't weer gewoon verder.

Bij Opera wordt na de 30e thumb weer gewoon vooraan begonnen, de 30 'technische' links worden overgeslagen.

Hoveren

Hoveren over 'n thumb moet de grote afbeelding openen. Als 'n andere thumb al focus heeft, moet de thumb waarover wordt gehoverd toch 'winnen'.

Alle browsers

Werkt prima.

Klikken op thumb

Bij klikken op de laatste thumb moet de volgende thumb zichtbaar worden. Als dat de laatste is, moet opnieuw worden begonnen met de eerste thumb.

Firefox, Safari, Google Chrome en Internet Explorer 8 en 9

Werkt prima.

Internet Explorer 7

Werkt prima. Alleen is het aantal thumbs dat wordt verschoven afhankelijk van de plaats waar je klikt. Als je helemaal links klikt wordt 1 thumb opgeschoven, als je op de tweede thumb klikt 2 thumbs, enz.

Opera

Werkt goed. Bij te snel achter elkaar klikken opent een of ander contextueel menu. Als het de laatste thumb is wordt niet terug naar het begin gegaan.

Internet Explorer 6

Werkt goed.

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

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

Het hier gebruikte doctype is dat van html 5. 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" type="text/css" href="../../css/naam-van-stylesheet.css"> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

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

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

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

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

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

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

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

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

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

<style type="text/css">

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

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

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


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

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

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

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

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

font-size: 110%;

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

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

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

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

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

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

color: black;

Letterkleur zwart.

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

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

background: #ff9;

Achtergrondkleurtje.

overflow: hidden;

Dit heeft alleen maar invloed als de grote afbeelding niet in het venster van de browser past. Het voorkomt dat er dan een scrollbalk verschijnt.

Bij Opera verschijnt sowieso nooit 'n scrollbalk, wat hier ook staat. In Internet Explorer 6 en 7, Safari, Google Chrome en Firefox verschijnt wel 'n scrollbalk, maar zodra je daarop klikt sluit de grote afbeelding, omdat je dan de focus wegneemt van de thumb. Het scrollwieltje van de muis werkt wel, maar heeft eigenlijk meer weg van 'n behendigheidsspelletje, want zodra de cursor buiten de thumb komt, sluit die. Je moet dus heel snel zijn. Hetzelfde geldt voor de ↓-toets.

Ook in Internet Explorer 8 en 9 verschijnt nooit 'n scrollbalk door het gebruik van position: fixed voor de grote afbeeldingen.

Ik kies ervoor om de scrollbalk helemaal uit te schakelen, omdat deze bij Firefox, Google Chrome en Safari de grote afbeelding en de balk met thumbnails de breedte van de scrollbalk naar links doet opschuiven, wat knap irritant is. Internet Explorer 6 en 7 hebben hier geen last van, want daar staat altijd 'n scrollbalk, of dat nou nodig is of niet. (Die scrollbalk kun je weghalen door bij Internet Explorer 6 en 7 ook html op overflow: hidden te zetten.)

div#navigatie

De div met id="navigatie". Dit is de bovenste grijze balk, de navigatiebalk, waar ?, < en dergelijke in staan.

width: 650px;

Deze navigatiebalk is even breed als de balk met thumbnails, zodat het er netjes uitziet. Deze breedte past nog ruim op 'n 800x600-scherm.

height: 23px;

Hoogte. Deze zelfde hoogte komt steeds terug bij alle dingen als ? die op de navigatiebalk worden gepositioneerd.

margin: 5px auto 0;

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

Boven 'n kleine afstand tot de bovenkant van het venster van de browser, onder geen marge. Links en rechts auto oftewel evenveel, waardoor de balk in het midden van het venster van de browser komt te staan, ongeacht hoe breed dit is. Deze manier van horizontaal centreren van een blok-element werkt alleen maar als dit een breedte heeft.

border: black solid 1px;

Zwart randje rondom de hele balk.

background: #ddd;

Grijze achtergrond. Deze zelfde achtergrondkleur komt terug op allerlei elementen die op de navigatiebalk worden gepositioneerd.

a#eerste, a#laatste

De link met id="eerste" en de link met id="laatste". Dit zijn de links die ij << en >> horen. Ze linken naar de eerste en de laatste link, dus indirect naar de eerste en laatste thumb, want die staan in die link.

position: relative;

Om een z-index te kunnen gebruiken, moet een element worden gepositioneerd, ook al vul ik verder niets in bij die positie. Ik geef verder ook geen z-index op, maar door deze elementen te positioneren krijgen ze al automatisch een z-index met de waarde auto.

Verderop in de code bij div#thumbs a.vorige, div#thumbs a.volgende worden < en > ook op de navigatiebalk neergezet. Dat gebeurt door 'n negatieve marge. Omdat die < en > later in de html staan dan << en >>, zouden de <'s en >'s óver de << en >> heen komen te staan, waardoor je deze niet meer ziet. De < en > worden gefloat.

Omdat a#eerste, a#laatste, < en > geen van vieren 'n ouder hebben met positie, werken de z-indexen allemaal ten opzichte van het venster van de browser, want dat is nu de gemeenschappelijke ouder, en worden de z-indexen dus rechtstreeks met elkaar vergeleken.

Volgens de standaard komt een element met positie, ook al vul je daar verder niets in, boven 'n element dat is gefloat te staan. Door deze relatieve positie toe te voegen zorg je er dus voor dat de << en >> 'winnen' van de < en > en zichtbaar zijn. Dit werkt alleen maar omdat de z-indexen ten opzichte van dezelfde ouder worden vergeleken: het venster van de browser.

float: right;

Zo hoog mogelijk en dan zo ver mogelijk naar rechts neerzetten.

Van zichzelf is een <a> een inline-element. Door het te floaten, verandert het in een blok-element, waardoor ik attributen als breedte en hoogte kan gebruiken. Je kunt het ook op andere manieren in een blok-element veranderen, maar door ze te floaten staan ze gelijk netjes naast elkaar.

In de html moeten "eerste" en "laatste" in omgekeerde volgorde staan, omdat je naar rechts float. "laatste" komt bovenaan, die wordt eerst naar rechts gefloat, en daartegenaan komt dan "eerste". Op het scherm staan ze dan in de juiste volgorde.

width: 30px;

30 px breed.

height: 23px;

Even hoog maken als de navigatiebalk waar ze in staan. Hierdoor zijn de staande zwartje randjes ook even hoog. En ook de achtergrondkleur van de links dekt nu de hele navigatiebalk af. Anders blijft er onderaan 'n kiertje over, en in dat kiertje zou je de hele rij <'s en >'s zien verschuiven. Die rij wordt afgedekt door de achtergrondkleur van deze links, mits die even hoog is als de navigatiebalk.

color: black;

Normaal genomen heeft de tekst in de link 'n andere kleur, dat wil ik hier niet. (In deze links is de tekst alleen << en >>, maar dat zijn gewone tekens.)

text-decoration: none;

De normale onderstreping onder de links wil ik hier ook niet.

text-align: center;

Tekst horizontaal in het midden zetten.

background: #ddd;

Zelfde achtergrondkleur als de navigatiebalk.

a#eerste

De link met id="eerste". Dit is de link waar << in staat, de link naar de eerste link, dus indirect naar de eerste thumb.

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

Zwart randje rondom de link zetten. Aan boven- en onderkant die rand gelijk weer weghalen, want de navigatiebalk heeft al 'n rand en anders zou je boven en onder 'n dubbele rand zien.

Je houdt dus alleen de staande streepjes links en rechts van << over. Dit blijkt beter uit te komen dan << en >> beide 'n rechterrand te geven.

div#thumbs

De div met id="thumbs". Binnen deze div staat nog 'n andere div: div#thumbs-binnen. Binnen die div staan alle thumbnails en dergelijke, die div is dan ook behoorlijk breed: 2405 px. Als ik daar nou 'n tweede div omheen zet die smaller is, levert dat 'n horizontale scrollbalk op. Dat is de enige belangrijke functie van deze div#thumbs: zorgen voor dat die horizontale scrollbalk verschijnt. Daarnaast gebruik ik hem nog om te centreren en zo.

width: 650px;

Zelfde breedte als de navigatiebalk. Door deze div vervolgens op dezelfde manier als de navigatiebalk horizontaal te centreren, komen ze precies onder elkaar te staan.

margin: -25px auto 0;

Omdat voor links geen waarde is ingevuld, krijgt die automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk -25px auto 0 auto in de volgorde boven - rechts - onder - links.

Onder geen marge.

Links en rechts auto oftewel evenveel, waardoor de balk in het midden van het venster van de browser komt te staan, ongeacht hoe breed dit is. Deze manier van horizontaal centreren van een blok-element werkt alleen maar als dit een breedte heeft.

Aan de bovenkant staat een negatieve marge van 25 px. Hiermee wordt de balk met de thumbs een heel eind omhoog gezet, feitelijk zelfs tot boven het venster van de browser. Om dit weer te corrigeren geef ik hier gelijk onder 'n padding aan de bovenkant.

Normaal genomen zou je de balk met thumbs met 'n relatieve of absolute positie op de goede plaats zetten. Maar dat werkt hier niet goed, omdat het in verschillende browsers tot verschillende problemen leidt. Eén van die dingen is bijvoorbeeld dat de grote afbeelding tussen scrollbalk en thumbs wordt gezet. Daardoor wordt die hele scrollbalk 'n enorm eind omlaag geduwd. Als de grote afbeelding weer sluit, schiet de scrollbalk weer omhoog. Aangezien ik geen aandelen heb in anti-zeeziektemiddelenfabrieken, leek me dit niet zo'n goed idee.

Met andere probeersels werden bijvoorbeeld alle thumbs voortdurend zichtbaar.

De combinatie van 'n negatieve marge aan de bovenkant die weer wordt opgeheven door 'n padding aan de bovenkant lost all problemen op.

padding-top: 28px;

28 px afstand tussen bovenkant van de div en inhoud. De uitleg staat hierboven bij Aan de bovenkant... De padding is 3 px meer dan de marge aan de bovenkant, omdat anders 'n deel van de zwarte rand rondom de navigatiebalk wegvalt. Dit levert ook 'n kleine afstand op tussen navigatiebalk en de balk met de thumbs, wat ik ook mooier vind.

Ongetwijfeld kun je die kier wegkrijgen op 'n manier dat ook de rand rondom de navigatiebalk intact blijft, maar ik vind dit er prima uitzien, dus ik laat 't zo.

overflow: auto;

De standaardwaarde van overflow is visible. Dat zou betekenen dat álle thumbs zichtbaar zijn, voor zover ze in het venster van de browser passen. Deze regel zorgt ervoor dat er 'n scrollbalk verschijnt als de inhoud niet in de div past.

De inhoud van deze div bestaat onder andere uit alle thumbs, die samen 2405 px breed zijn, zoals hieronder opgegeven. Dus dat past bij lange niet in deze div, die maar 650 px breed is. Er verschijnt dus 'n horizontale scrollbalk aan de onderkant van de balk met de thumbnails.

div#thumbs-binnen

De div met id="thumbs-binnen".

width: 2405px;

Een div wordt automatisch even breed als z'n ouder, in dit geval 650 px, de breedte van div#thumbs. Dan komen de thumbs niet naast elkaar, maar in regels onder elkaar te staan. Door 'n breedte op te geven waar alle thumbs naast elkaar in passen, in combinatie met 'n breedte van 650 px voor de ouder div#thumbs, komen de thumbs naast elkaar te staan en verschijnt 'n horizontale scrollbalk voor de thumbs die niet zichtbaar zijn.

height: 60px;

Een div krijgt de hoogte van wat erin staat. Maar in dit geval wordt alles wat erin staat naar links gefloat, en wat wordt gefloat telt niet meer mee voor de hoogte van de div. De div zou dus geen enkele hoogte hebben, dus 'n achtergrondkleur zou ook geen hoogte hebben en onzichtbaar zijn. Daarom geef ik 'n hoogte van 60 px.

background: #444;

Donkergrijze achtergrondkleur.

padding: 2px 0 0 3px;

Kleine afstand tussen inhoud (thumbs) en bovenkant van de div.

Rechts en onder geen padding.

Links 'n kleine padding van 3 px. Dit zorgt ervoor dat ook de meest linkse thumb aan de linkerkant 'n kleine afstand tot de linkerkant van de div heeft, waardoorheen je de donkergrijze achtergrond van de div ziet.

span.wrap, span#eind

Alle spans met class="wrap" en de span met id="eind". Om elke link met thumb staat 'n span met class="wrap". Na de laatste link met thumb staat span#eind. Deze staat alleen maar om het venstertje met de melding dat verder tabben geen nut heeft. Hij heeft precies dezelfde functie als de spans met class="wrap", maar voor de duidelijkheid heb ik 'm 'n andere naam gegeven.

Oorspronkelijk stonden deze spans er om 'n heel andere reden, maar dat was niet meer nodig. Zonder deze span blijkt Internet Explorer 7 de ene keer wel en de andere keer niet te reageren op 'n klik op <, > of 'n thumb. Met deze span werkt 't wel goed. Waarom? Geen flauw idee.

float: left;

Zet elke span zo hoog mogelijk en dan zo ver mogelijk naar links. Daardoor komen ze achter elkaar te staan. Dit floaten is alleen nodig voor Internet Explorer 7.

div#thumbs a

Alle links binnen de div met id="thumbs". Dit zijn de links waar de thumbnail, de < en >, enz. in staan. Voor zover 'n bepaald soort link andere instellingen nodig heeft, overrule ik deze regel verderop in de css weer voor die links.

display: inline-block;

Van zichzelf is 'n <a> 'n inline-element. Maar als ik het gewoon zo laat, verschuiven de thumbs niet in Safari en Google Chrome. Als ik er 'n blok-element van maak, flipt Opera. Hiervan worden ze alle drie gelukkig en tevreden.

Een inline-block is een inline-element, dat zich gedraagt als 'n blok-element.

width: 80px;

De thumbs zijn 60 px breed, dit geeft wat ruimte tussen de thumbs.

text-decoration: none;

Zonder deze regel onderstrepen Google Chrome en Safari de thumbnail.

div#thumbs a:focus

Als een link binnen de div met id="thumbs" focus heeft. Dit wordt in alle browsers aangegeven door een kader rondom de link te zetten. Als je op Enter drukt en een link heeft focus, wordt die link gevolgd.

outline: solid transparent 0;

In Firefox, Opera, Google Chrome en Safari wordt met behulp van outline aangegeven of een link focus heeft of niet. Internet Explorer 6 en 7 doen dit op een andere manier, daar heb je geen invloed op. Voor Firefox, Google Chrome en Safari is outline: 0; voldoende, maar Opera is kennelijk zo trots op z'n foeilelijke knalblauwe outline, dat daarvoor de volledige regel nodig is.

Normaal genomen is het een heel slecht idee om de outline weg te halen, omdat mensen die bijvoorbeeld de Tab-toets gebruiken om de links af te gaan nu geen enkele indicatie meer hebben waar ze zijn. Maar in dit geval heb ik de outline vervangen door een witte rand, dus er is nog steeds 'n indicatie. Alleen past die witte rand beter in het ontwerp, vind ik.

div#thumbs img

De afbeeldingen binnen de div met id="thumbs". Dit zijn de thumbnails.

height: 50px;

Hoogte van de thumbnail.

border: none;

Omdat de thumbnails in een link staan, krijgen ze 'n rand. Dat wil ik niet.

margin: 2px;

Aan alle kanten 'n marge van 2 px. Ik vind de thumbnails nu goed staan. Bovendien lost dit 'n ander probleem op: Internet Explorer 6 en 7 kennen geen outline. Als 'n link focus heeft of als ik erover hover, krijgt de daarin zittende thumbnail 'n outline van 2 px. Die outline neemt geen ruimte in.

Omdat Internet 6 en 7 dat niet kennen, gebruik ik daar 'n border van 2 px. En die neemt wel ruimte in. Daardoor zou de thumbnail 2 px naar rechts en naar links verschuiven. Maar omdat ik 'n marge van 2 px heb, kan ik dat verschuiven voorkomen door de marge weg te halen als de thumbnail 'n border krijgt.

div#thumbs a:hover img, div#thumbs a:focus img

Als ik over 'n link binnen de div met id="thumbs" hover, doe dan iets met de daarin staande afbeeldingen (dat zijn hier de thumbs). Idem als de link focus heeft. :active heeft geen zin, want ik gebruik bij deze selector alleen outline, en Internet Explorer 6 en 7 kennen dat niet. Die handel ik later af bij de css die specifiek voor die twee monstruositeiten is.

outline: white solid 2px;

Witte rand rondom de thumb zetten. In dit geval heeft outline het voordeel boven border, dat outline geen ruimte inneemt. 'n Border zou de thumbnails doen 2px naar rechts en naar onder laten verschuiven, omdat de border zelf ook ruimte inneemt.

a:hover span.plaatje, a:focus span.plaatje, a:active span.plaatje

Als ik over 'n link hover, of als die link focus heeft, doe dan iets met de spans met class="plaatje" binnen die link. Dit zijn de spans waarin, als achtergrond-afbeelding, de grote afbeelding wordt getoond.

Een groot aantal instellingen is voor al deze spans hetzelfde, die kan ik hier in één keer voor allemaal opgeven. De afwijkende instellingen geef ik dan later voor elke span apart op. Omdat alle afbeeldingen in dit voorbeeld even groot zijn, kan ik ook breedte en dergelijke hier al opgeven.

position: absolute;

Om de span, en dus de afbeelding, op de goede plaats neer te kunnen zetten. Er is geen ouder met 'n positie, dus er wordt gepositioneerd ten opzichte van het venster van de browser. Dat is prima, want ook alle andere onderdelen worden gepositioneerd ten opzichte daarvan, dus indirect worden ze dan ook ten opzichte van elkaar gepositioneerd en kan ik zorgen dat alles goed op elkaar aansluit.

Een span is van zichzelf 'n inline-element. Door haar absoluut te positioneren verandert ze in een blok-element en kan ik attributen als breedte en hoogte gebruiken.

top: 120px;

120 px vanaf de bovenkant is net onder de horizontale scrollbalk.

left: 50%;

Linkerkant van de afbeelding halverwege het venster van de browser zetten. Halverwege het browservenster is altijd halverwege het browservenster, hoe groot of hoe klein dit ook is. Dit geeft 'n vast uitgangspunt voor de horizontale positie, onafhankelijk van grootte van browservenster of scherm.

margin-left: -300px;

De afbeeldingen zijn 600 px breed. De linkerkant van de afbeelding is hierboven halverwege het venster van de browser gezet. Als ik die linkerkant nu weer de helft van de breedte van de afbeelding, dus 300 px. terugzet naar links, staat de afbeelding horizontaal precies in het midden van het venster van de browser.

width: 600px; height: 450px;

De breedte en hoogte van de grote afbeelding. Omdat 'n achtergrond-afbeelding geen maten heeft, maar alleen de achtergrond vult van het element waar hij in staat, moet ik de span zelf de juiste maten geven. Omdat er verder helemaal niets in deze span staat, zou hij anders helemaal geen hoogte krijgen en zou je dus helemaal niets zien.

a:hover span.plaatje

Als is over 'n link hover doe dan iets met de spans met class="plaatje" binnen die link. Dit is de span waarbinnen de grote afbeelding, als achtergrond-afbeelding, wordt getoond.

z-index: 10;

Hierboven bij a:hover span.plaatje, a:focus span.plaatje, a:active span.plaatje heb ik alle instellingen opgegeven die voor alle spans van deze class hetzelfde zijn. Omdat ik daar geen z-index heb opgegeven, heeft die de standaardwaarde auto. Dus als 'n link focus heeft of als je erover hovert heeft, heeft span.plaatje 'n z-index van auto.

Bij 'n gelijke z-index (en als andere ter zake doende attributen ook hetzelfde zijn) 'wint' het element dat in de html als laatste komt. Als bijvoorbeeld de achtste link, waarin onder andere de achtste thumbnail en de achtste grote afbeelding zitten, focus heeft, zal die altijd 'winnen' van link 1 t/m 7, want die staan in de html vóór link 8.

Als ik over link 1 t/m 7 hover, hebben die nog steeds 'n z-index van auto, dus hoe hard ik ook hover, link 8 blijft zichtbaar als die focus heeft. Als ik nu bij hoveren de z-index verhoog, 'wint' de link (en dus de thumbnail daarin) waarover je hovert van de link die focus heeft. Zodra je niet meer over 'n andere link hovert, wordt de grote afbeelding die bij de link met focus hoort gewoon weer zichtbaar, want dan zijn de z-indexen weer hetzelfde.

a#t-1:hover span.plaatje, a#t-1:focus span.plaatje, a#t-1:active span.plaatje

Als ik over 'n link met id="t-1" hover of als die link focus heeft, doe dan iets met de spans met class="plaatje" binnen die link.

Hierboven bij a:hover span.plaatje, a:focus span.plaatje, a:active span.plaatje heb ik de instellingen opgegeven die voor alle spans met deze class hetzelfde zijn. Hier komen de instellingen die voor elke span anders zijn. Omdat elke span.plaatje binnen 'n link met 'n unieke id staat, kan ik door 'n combinatie van die link met de span elke span apart selecteren.

background: url(055-pics/alamo.jpg) #ff9;

Grote afbeelding weergeven als achtergrond-afbeelding.

De achtergrondkleur is hetzelfde als die van de pagina. Als de grote afbeelding voor de eerste keer wordt weergegeven, moet deze worden opgehaald vanaf de server. Dat kost wat tijd, zelfs met 'n snelle verbinding. Als je door klikken op de thumbnails of door tabben een voor een alle afbeeldingen tevoorschijn tovert, zie je daardoor steeds even 'n lege span, waar nog geen achtergrond-afbeelding in staat. Daardoor zie je steeds heel even de pagina door de span heen komen. Als er iets op die pagina staat, levert dat een irritant flikkeren op: afbeelding - pagina - afbeelding - pagina - ...

De achtergrondkleur wordt wel gelijk getoond, want die hoeft niet te worden opgehaald, waardoor dit flikkeren wordt voorkomen.

a#t-2:hover span.plaatje, a#t-2:focus span.plaatje, a#t-2:active span.plaatje {background: url(055-pics/alp-house-and-mountain.jpg) #ff9;}

t/m

a#t-30:hover span.plaatje, a#t-30:focus span.plaatje, a#t-30:active span.plaatje {background: url(055-pics/sand-statue-2.jpg) #ff9;}

Alle andere spans met 'n class="naam" werken precies hetzelfde. Het enige verschil is de id van de <a> en de naam van de achtergrond-afbeelding.

a span.naam

De spans met 'n class="naam" binnen 'n link. Dit zijn de spans waarbinnen de naam van de afbeelding staat. Die naam komt bovenin de navigatiebalk te staan als de grote afbeelding wordt getoond.

Omdat deze namen absoluut worden gepositioneerd en allemaal op dezelfde plaats worden neergezet (midden links in de navigatiebalk), zou je altijd de naam zien die als laatste in de html staat. Ze komen immers allemaal over elkaar heen te staan, en bij 'n gelijke z-index (en andere ter zake doende attributen) 'wint' degene die het laatste in de html staat.

Later in de html en css komt echter nog 'n div#verberg, die bedoeld is om de op dat moment niet 'dienstdoende' <'s en >'s te verbergen. Dat is 'n simpele div met alleen 'n achtergrondkleur, die gewoon over de navigatiebalk heen staat. Deze div dekt ook de namen af, behalve die van de op dat moment zichtbare grote afbeelding.

position: absolute;

Om de span, en dus de naam, op de goede plaats neer te kunnen zetten. Er is geen ouder met 'n positie, dus er wordt gepositioneerd ten opzichte van het venster van de browser. Dat is prima, want ook alle andere onderdelen worden gepositioneerd ten opzichte daarvan, dus indirect worden ze dan ook ten opzichte van elkaar gepositioneerd en kan ik zorgen dat alles goed op elkaar aansluit.

Een span is van zichzelf 'n inline-element. Door haar absoluut te positioneren verandert ze in een blok-element en kan ik attributen als breedte en hoogte gebruiken.

top: 6px;

6 px vanaf de bovenkant van het venster van de browser, dan staat de span en dus de daarin zittende naam precies op de goede hoogte op de navigatiebalk.

left: 50%;

Linkerkant van de span halverwege het venster van de browser zetten. Halverwege het browservenster is altijd halverwege het browservenster, hoe groot of hoe klein dit ook is. Dit geeft 'n vast uitgangspunt voor de horizontale positie, onafhankelijk van de grootte van het browservenster en dus van het scherm.

width: 518px;

Met deze breedte komt de span tot aan de rechterkant (ongeveer) van het vraagteken te staan. Dat vraagteken wordt later met behulp van 'n z-index weer hier overheen gezet, zodat het altijd zichtbaar is. Deze breedte bleek het mooist te zijn wat betreft het centreren van de naam binnen de span.

height: 23px;

Even hoog maken als de navigatiebalk.

margin-left: -325px;

Hierboven heb ik de linkerkant van de span halverwege het venster van de browser neergezet. Maar die linkerkant moet daar niet blijven staan, die linkerkant moet op dezelfde plaats komen als de linkerkant van de navigatiebalk. Want daar moet de naam op komen te staan.

De navigatiebalk is 650 px breed. De navigatiebalk is ook midden in het browservenster gepositioneerd, en daarna de helft van de breedte, 325px, terug naar links gezet, zodat hij altijd horizontaal gecentreerd is.

Om de linkerkant van deze span met de naam, die ook halverwege het browservenster is neergezet, op dezelfde plaats te krijgen als de linkerkant van de navigatiebalk, moet ik deze span dus ook 325 px terug naar links zetten.

text-align: center;

Tekst centreren binnen de span. Omdat de span de lege ruimte aan de linkerkant van de navigatiebalk vult, wordt de tekst netjes horizontaal gecentreerd binnen die lege ruimte.

color: black;

De naam staat binnen 'n <a>, dus de naam zou de kleur krijgen die bij 'n link hoort. Dat wil ik hier niet.

background: #ddd;

Zelfde achtergrondkleur geven als de navigatiebalk heeft.

Als 'n link focus heeft, staat in de navigatiebalk de naam die bij die link hoort. Als ik nu over 'n andere link (thumbnail) hover, verschijnt er 'n andere afbeelding, met de naam die bij die andere afbeelding hoort. Maar de naam die bij de link met focus hoort staat er ook nog steeds. Door de span met de naam 'n achtergrondkleur te geven voorkom ik dat je twee namen door elkaar heen ziet staan: de achtergrondkleur van de bovenste naam dekt altijd de daaronder liggende naam af.

cursor: default;

Normaal genomen verandert de cursor binnen 'n link in 'n handje, hier wil ik de gewone standaardcursor houden.

a:focus span.naam, a:active span.naam

Als 'n link focus heeft, doe dan iets met de span met class="naam" binnen die link. Dit zijn de spans waarbinnen de naam staat die bovenin de navigatiebalk wordt getoond.

z-index: 10;

Normaal genomen zijn de namen afgedekt door div#verberg. Maar alle namen staan allemaal al op de juiste plaats, allemaal over elkaar heen, alleen zie je ze niet. Door simpelweg de z-index van de span binnen de link die focus heeft te verhogen, komt die naam als enige boven div#verberg te staan, en wordt dus zichtbaar.

a:hover span.naam

Als ik over 'n link hover, doe dan iets met de span met class="naam" binnen die link. Dit zijn de spans waarbinnen de naam staat die bovenin de navigatiebalk wordt getoond.

z-index: 15;

Hierboven bij a:focus span.naam, a:active span.naam heb ik span.naam 'n z-index van 10 gegeven als de bijbehorende link focus heeft, zodat hij boven div#verberg komt te staan en zichtbaar wordt.

Bij 'n gelijke z-index (en als andere ter zake doende attributen ook hetzelfde zijn) 'wint' het element dat in de html als laatste komt. Als bijvoorbeeld de achtste link, waarin onder andere de achtste naam en de achtste grote afbeelding zitten, focus heeft, zal die altijd 'winnen' van link 1 t/m 7, want die staan in de html vóór link 8.

Als ik over link 1 t/m 7 hover, hebben de spans van de class "naam" 'n z-index met de standaardwaarde auto, want ik heb nog geen z-index opgegeven. Dus hoe hard ik ook hover, de naam van de achtste link blijft zichtbaar als die focus heeft. Als ik nu bij hoveren de z-index verhoog, 'wint' de link (en dus de naam daarin) waarover je hovert van de link die focus heeft. Zodra je niet meer over 'n andere link hovert, wordt de naam die bij de link met focus hoort gewoon weer zichtbaar, want die heeft dan weer 'n hogere z-index.

div#thumbs a.vorige, div#thumbs a.volgende

De links met class="vorige" binnen de div met id="thumbs" en de links met class="volgende" binnen de div met id="thumbs".

Dit zijn de links die onder de negende en latere thumbnail staan. Ze zorgen voor de > en < in de navigatiebalk en maken het mogelijk dat je door middel van klikken op > en < vooruit en achteruit door de thumbs kunt 'lopen'.

Het grootste deel van de instellingen is voor beide soorten links hetzelfde, dus die geef ik hier op. De afwijkende instellingen voor a.volgende zet ik verderop in de css.

float: left;

Binnen div#thumbs staan nogal wat <a>'s en spans die zijn veranderd in blok-elementen. Ik heb niet verder uitgezocht welke precies verantwoordelijk is, want dat is verder niet interessant, maar een van deze zorgt ervoor dat deze twee links op 'n nieuwe regel worden gezet. Daardoor wordt van alles te hoog en zo (ook niet verder precies uitgezocht, ook niet zo interessant).

Om dit te voorkomen float ik deze <a>'s naar links. Nu komen ze op dezelfde regel als de thumbs, naam, enz. Bijkomend voordeel is dat ze door het floaten in een blok-element veranderen, waardoor ik attributen als hoogte en breedte kan gebruiken.

'n Absolute of relatieve positie bleek hier niet goed te werken.

height: 23px;

Even hoog maken als de navigatiebalk.

width: 39px;

Door er 'n breedte aan te geven kan ik de < en > horizontaal centreren.

margin: -29px 0 0 -132px;

Aan de bovenkant 29 px omhoog zetten via 'n negatieve marge, zodat de < en > op de navigatiebalk komen te staan.

Rechts en onder geen marge.

Aan de linkerkant 132 px naar links zetten via 'n negatieve marge. Door gewoon proberen uitgevonden dat dit de goede plaats is.

Met deze marges worden de < en > die bij de laatste zichtbare thumb horen zichtbaar (alle andere <'s en >'s worden verborgen door div#verberg). Voor a#volgende is de rechtermarge anders, maar dat regel ik iets verderop in de css.

Omdat de <, de link naar de vorige thumb, bij de laatst zichtbare thumb hoort, moet deze niet linken naar de vorige thumb, maar naar de thumb acht plaatsen eerder. De vorige thumb is al zichtbaar, want die staat naast de meest rechtse zichtbare thumb, dus als je daarnaartoe linkt gebeurt er helemaal niets. Je moet naar de eerste niet-zichtbare thumb linken.

> is simpel, want omdat de > bij de laatst zichtbare link hoort, is de volgende altijd onzichtbaar en kun je dus gewoon naar de volgende thumbnail linken.

(Ik heb 't hier over linken naar 'n thumbnail, eigenlijk link je naar 'n link waarin 'n thumbnail zit, maar dat levert redelijk onbegrijpelijke wartaal op als 'naar links linken naar 'n link', dus noem ik 't maar even 'n thumbnail voor 't gemak.)

border-left: black solid 1px;

Aan de linkerkant staand zwart streepje.

color: black;

Ik wil niet de kleur die 'n link normaal genomen krijgt.

text-align: center;

< en > in het midden zetten.

div#thumbs a.volgende

De link met class="volgende" binnen de div met id="thumbs".

Dit zijn de links die onder de negende en latere thumbnail staan. Ze zorgen voor de > in de navigatiebalk en maken het mogelijk dat je door middel van klikken vooruit door de thumbs kunt 'lopen'.

margin: -29px 0 0 -92px;

Het grootste deel van de instellingen is hierboven al opgegeven bij div#thumbs a.vorige, div#thumbs a.volgende. Hier moet ik alleen de rechtermarge nog even opnieuw opgeven, want die is anders dan bij div#vorige.

div#thumbs a.linkje

De links met class="linkje" binnen de div met id="thumbs". Dit zijn de rechtstreekse links naar de grote afbeeldingen, die ook werken als de css uitstaat. Juister: die alleen werken als de css uitstaat, omdat ze anders onzichtbaar zijn.

Deze link staat achter elke thumbnail.

float: left;

Binnen div#thumbs staan nogal wat <a>'s en spans die zijn veranderd in blok-elementen. Ik heb niet verder uitgezocht welke precies verantwoordelijk is, want dat is verder niet interessant, maar een van deze zorgt ervoor dat deze twee links op 'n nieuwe regel worden gezet. Daardoor wordt van alles te hoog en zo (ook niet verder precies uitgezocht, ook niet zo interessant).

Om dit te voorkomen float ik deze <a>'s naar links. Nu komen ze op dezelfde regel als de thumbs, naam, enz. Bijkomend voordeel is dat ze door het floaten in een blok-element veranderen, waardoor ik attributen als hoogte en breedte kan gebruiken.

'n Absolute of relatieve positie bleek hier niet goed te werken.

margin-left: -10000px;

Ver links buiten het scherm parkeren. Als css aan staat, zie je daardoor niets van deze link. Met css uit verschijnt hij gewoon op het scherm en geeft 'n mogelijkheid om rechtstreeks naar de bijbehorende grote afbeelding te gaan. Niet echt ideaal, want hij staat in 'n groepje van vier links, dus je moet steeds drie links overslaan voor je bij 'n link van deze class bent. Maar beter iets dan niets.

margin-top: -500px;

Hoewel deze links worden gefloat en ver links buiten het scherm worden geparkeerd, veroorzaken ze toch 'n kier tussen thumbnails en scrollbalk in Firefox, Google Chrome en Safari. Als de lettergrootte wordt verhoogd, groeit die kier snel tot enorme proporties. Door ze ook nog boven het scherm te parkeren wordt dat verholpen. Wat de oorzaak van die kier is, is me eigenlijk niet helemaal duidelijk, ik vermoed de regelhoogte. Maar 't is in ieder opgelost op deze manier.

div#verberg

De div met id="verberg". De enige functie van deze div is het verbergen van < en > (behalve de twee die bij de meest rechts thumb horen) en het verbergen van namen (behalve van de grote afbeelding die op dit moment zichtbaar is).

position: absolute;

Om op de goede plaats neer te kunnen zetten. Omdat er geen ouder met 'n positie is, wordt gepositioneerd ten opzichte van het venster van de browser. Omdat alle andere onderdelen ook ten opzichte van dat venster worden gepositioneerd, worden ze indirect ook ten opzichte van elkaar gepositioneerd en kan alles goed aansluiten en zo.

left: 50%;

Linkerkant halverwege het venster van de browser zetten. Omdat halverwege altijd halverwege is, ongeacht de breedte van het browservenster, geeft dit op elke maat browservenster en scherm hetzelfde uitgangspunt.

top: 6px;

6 px vanaf de bovenkant neerzetten. Deze div moet precies op de navigatiebalk komen te staan. Die navigatiebalk heeft 'n marge aan de bovenkant van 5 px. Maar daar komt nog 'n border van 1 px bij, samen dus 6 px. Nu staat deze div dus gelijk onder de bovenste border van de navigatiebalk.

width: 518px;

Met deze breedte komt de div aan de rechterkant iets voorbij het vraagteken te staan. Dat vraagteken wordt later met 'n z-index over deze div heen gezet, zodat het altijd zichtbaar is.

height: 23px;

Even hoog als de navigatiebalk maken, zodat de achtergrond van deze div echt de hele navigatiebalk bedekt en, waar nodig, andere elementen verbergt.

margin-left: -325px;

Hierboven heb ik de linkerkant van de div halverwege het venster van de browser neergezet. Maar die linkerkant moet daar niet blijven staan, die linkerkant moet op dezelfde plaats komen als de linkerkant van de navigatiebalk. Want daar moet deze div overheen komen te staan.

De navigatiebalk is 650 px breed. De navigatiebalk is ook middenin het browservenster gepositioneerd, en daarna de helft van de breedte, 325px, terug naar links gezet, zodat hij altijd horizontaal gecentreerd is.

Om de linkerkant van deze div, die ook halverwege het browservenster is neergezet, op dezelfde plaats te krijgen als de linkerkant van de navigatiebalk, moet ik deze div dus ook 325 px terug naar links zetten.

border-right: black solid 1px;

Omdat deze div tot voorbij de rechterkant van het vraagteken loopt, levert dit 'n staand lijntje op aan de rechterkant van het vraagteken.

Ik geef direct toe dat dit wat vreemd is. Dat heeft 'n historische oorzaak, zij het dat het om 'n korte historie gaat, namelijk de geschiedenis van het maken van dit voorbeeld.

Ik had eerst deze div en pas later kwam daar het vraagteken bij. Dat lijntje stond er dus al. En omdat het goed werkt en dat vraagteken nogal lastig te temmen was in de diverse browsers, heb ik 't zo gelaten. Ik ben wat schichtig geworden wat betreft 't sleutelen aan dat vraagteken, want ik ben als de dood dat 't kreng weer begint te steigeren en 't scherm af galoppeert of zoiets. 't Werkt allemaal prima zo, en daar gaat 't maar om.

Dit is wel typisch 'n plek waar je in de html en/of in de css even commentaar zou moeten zetten waarom dit zo is. Ik doe dat hier niet, omdat deze uitleg natuurlijk één gigantisch commentaar is...

background: #ddd;

En dan eindelijk waarvoor deze div is bedoeld: de achtergrondkleur. Zelfde kleur als van de navigatiebalk.

Deze div bedekt de hele navigatiebalk, behalve het deel waar ?, <, >, << en >> staan.

De ?, << en >> staan eigenlijk los van de rest en komen ook maar één keer voor in de html.

De < en > komen bij elke link met thumb voor, behalve bij de eerste acht. De < en > die je ziet horen bij de meest rechtse zichtbare thumb. Maar in feite staat er in de navigatiebalk een lange rij met <'s en >'s. En daar is deze div voor bedoeld: behalve de laatste twee wordt de rest verborgen door deze div.

Behalve de <'s en >'s staan ook alle namen van de grote afbeeldingen allemaal voortdurend op de navigatiebalk, allemaal over elkaar heen. Ook deze worden verstopt door deze div. Bij hoveren en focus wordt de z-index van de naam verhoogd en wordt de juiste naam zichtbaar, omdat die dan boven deze div komt te staan.

div#schermpje

De div met id="schermpje". Binnen deze div staan het vraagteken en het bijbehorende hulpschermpje.

position: absolute;

Om alles precies neer te kunnen zetten.

left: 50%;

Linkerkant van de div halverwege het venster van de browser zetten. Halverwege het browservenster is altijd halverwege het browservenster, hoe groot of hoe klein dit ook is. Dit geeft 'n vast uitgangspunt voor de horizontale positie, onafhankelijk van de grootte van browservenster of scherm.

top: 5px;

Dit blijkt de goede hoogte te zijn om deze div en dus het vraagteken erin goed op de navigatiebalk te krijgen.

margin-left: 172px;

Hierboven heb ik de linkerkant van de div halverwege het venster van de browser gezet. Door uitproberen blijkt deze marge links de div en dus het vraagteken precies op de goede plaats te zetten.

Ik kan geen position gebruiken, omdat ik de grootte van het browservenster niet weet. Maar ik heb hierboven de linkerkant halverwege het browservenster gezet, en ik weet de breedte van de navigatiebalk, dus ik kan wel aangeven hoever de div van het midden van het browservenster moet worden gezet. En dat doe ik dus met deze marge.

z-index: 25;

Het vraagteken wil ik altijd zichtbaar hebben, dus 'n vrij hoge z-index. Alleen de link waarin het schermpje met de melding over het tabben staat heeft 'n hogere z-index, maar die moet ook echt overal bovenuit komen te staan.

div#schermpje a

De links binnen de div met id="schermpje". Dat is er hier maar eentje, de link met het vraagteken erin.

text-decoration: none; color: black;

De bij 'n link horende onderstreping en kleuren wil ik hier niet.

span#vraagteken

De span met id="vraagteken". Deze span staat binnen de link van het hulpschermpje. Binnen deze span staat het vraagteken. De span is nodig om lay-out te kunnen geven aan het vraagteken.

display: block;

Van zichzelf is 'n span 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als breedte gebruiken.

width: 20px;

Breedte.

height: 24px;

Hoogte. Voor de zeer opmerkzame lezer: dit is inderdaad 1 px meer dan de hoogte van de navigatiebalk. De reden is simpel. Ik heb div#schermpje, de ouder van deze span, eigenlijk 1 px te hoog neergezet: op 5 px. Terwijl daar de border van de navigatiebalk staat, dus eigenlijk had dit 6 px moeten zijn. Maar het vraagteken staat op deze manier netjes in het midden.

Alleen heb ik nu 'n gaatje van 1 px aan de onderkant van de border aan de linkerkant van deze span, omdat hij eigenlijk 1 px te hoog staat. Gewoon de span 1 px 'te hoog' maken en opgelost.

border-left: black solid 1px;

Staand streepje aan de linkerkant.

font-size: 1.2em;

Vraagteken iets groter maken, zodat het de juist verhouding heeft ten opzichte van < en dergelijke.

text-align: center;

Vraagteken horizontaal in het midden van de span zetten.

div#schermpje a:hover

Als ik over de link binnen de div met id="schermpje" hover.

cursor: default;

Omdat dit 'n link is, zou de cursor normaal genomen in 'n handje veranderen. Maar dit is geen echte link, dus dat wil ik hier niet, gewoon de standaardcursor gebruiken. Omdat dit voor alles binnen de link geldt, geldt dit ook voor het schermpje met de hulptekst zelf.

a#hulp span.hulptekst

De span met class="hulptekst" binnen de link met id="hulp". Dit is de span waar de eigenlijke hulptekst in staat.

Deze span heeft 'n class, omdat er feitelijk vier verschillende hulpteksten zijn: eentje voor Internet Explorer 6, eentje voor Internet Explorer 7, eentje voor Internet Explorer 8 en 9, en eentje voor de serieuze browsers.

Met behulp van deze class stel ik de dingen in die voor alle drie de hulpteksten hetzelfde zijn. Daarnaast heeft elke hulptekst 'n eigen id voor alles wat afwijkt van de gemeenschappelijke instellingen.

position: absolute;

Om het venstertje op de juiste plaats op het scherm te kunnen zetten.

top: -800px; left: -8000px;

Venstertje onzichtbaar maken door het ver links buiten het scherm te parkeren. Maar hoewel het buiten het scherm staat, kan het op een klein scherm toch voor een verticale scrollbalk zorgen omdat het onder de onderkant van het venster van de browser uitkomt. Daarom zet ik het ook nog 'n eind omhoog.

width: 440px;

Breedte. 'n Hoogte geef ik niet op, zodat de hoogte mee kan veranderen met de lettergrootte.

border: black solid 2px;

Randje rondom het venstertje.

background: #fff;

Witte achtergrond voor de leesbaarheid.

padding: 5px;

Kleine afstand tussen tekst en rand van het venstertje.

a#hulp:hover span#hulptekst-alle, a#hulp:focus span#hulptekst-alle

Als ik over de link met id="hulp" hover of als deze focus heeft, doe dan iets met de daarin zittende span met id="hulptekst-alle". Dit is de hulptekst voor alle browsers behalve Internet Explorer 6, 7, 8 en 9.

top: 24px; left: -300px;

Bij a#hulp span.hulptekst zijn alle instellingen al opgegeven. Het venstertje met de hulptekst is daar buiten het scherm geparkeerd. Het enige wat ik hier moet doen is het binnen het scherm zetten en het wordt zichtbaar.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#thumbs {height: 80px;} div#thumbs-binnen {height: 62px;} div#thumbs a {float: left;} a:hover {height: 1px;} a span.naam {position: static;} a:active span.naam {position: absolute;} a:hover span.naam {position: absolute; z-index: 15;} div#thumbs a:hover img, div#thumbs a:active img {border: white solid 2px; margin: 0;} div#thumbs a.linkje {position: absolute;} a#hulp span#hulptekst-alle {display: none;} a#hulp:hover span#hulptekst-ie6 {top: 24px; left: -300px;} </style> <![endif]-->

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

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

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

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

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

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

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

div#thumbs

De div met id="thumbs".

height: 80px;

Internet Explorer 6 zet de horizontale scrollbalk bínnen deze div, waardoor die te laag wordt voor de thumbnails. Door 'n hoogte op te geven wordt dat voorkomen.

div#thumbs-binnen

De div met id="thumbs-binnen". Dit is de div die binnen div#thumbs staat en samen met deze voor de horizontale scrollbalk zorgt. Binnen deze div staan alle thumbnails en dergelijke

height: 62px;

Om een of andere reden is er een kleine kier tussen de balk met de thumbnails en de scrollbalk. Deze instelling haalt die kier weg.

div#thumbs a

De links binnen de div met id="thumbs".

float: left;

Zonder deze regel zet Internet Explorer 6 de thumb die focus heeft één te veel naar rechts, waardoor hij niet meer zichtbaar is. Je kunt er daardoor ook niet makkelijk op klikken. Dit soort dingen maakt dat 't vrij lang duurt om zoiets als dit te maken, omdat 't vaak raden is wat wel of niet werkt. Maar goed, dat maakt 't ook juist weer leuk.

a:hover

Als ik over 'n link hover.

height: 1px;

Maak de link dan 1 px hoog. Pardon? Tja. Microsoft heeft 'n geniaal iets bedacht om makers van sites geweldig te pesten: hasLayout. Afhankelijk van of 'n element hasLayout heeft of niet, is de weergave volkomen verschillend. In Internet Explorer 7 zijn de regels voor hasLayout totaal anders dan in Internet Explorer 6, dus 't gaat echt om 't pesten van sitebouwers. In Internet Explorer 8 is dit onzalige bedenksel gelukkig verdwenen.

Om Internet Explorer 6 hasLayout te geven, moet ik de link 'n hoogte van 1 px geven. Anders werkt hoveren niet. En van die hoogte trekt Internet Explorer zich vervolgens helemaal niets aan. Dus wat daar dan 't nut van is? Vragen graag richten aan Microsoft.

a span.naam

De spans met class="naam" binnen 'n link. Dit zijn de spans waar de naam van de grote afbeelding in staat, die bovenin de navigatiebalk wordt gezet.

position: static;

In de algemene css is deze span absoluut gepositioneerd. Om wat voor duistere reden dan ook geeft Internet Explorer daardoor om en om 'n naam wel en 'n naam niet weer. Dit verhelpt dat.

Pas als de naam echt moet verschijnen wordt de positie in absoluut veranderd.

a:active span.naam

Als de link actief is doe dan iets met de daarin zittende span met class="naam". :active is hetzelfde als wat bij andere browsers :focus is, Internet Explorer 6 doet dit verkeerd.

position: absolute;

In de algemene css had deze span al 'n absolute positie, maar die heb ik hierboven bij a span.naam weggehaald omdat dat problemen gaf in Internet Explorer 6. Die moet ik hier dus weer opgeven.

a:hover span.naam

Als ik over 'n link hover doe dan iets met de daarin zittende span met class="naam".

position: absolute;

In de algemene css had deze span al 'n absolute positie, maar die heb ik hierboven bij a span.naam weggehaald omdat dat problemen gaf in Internet Explorer 6. Die moet ik hier dus weer opgeven.

z-index: 15;

Om de naam bij hoveren zichtbaar te maken, ook als 'n andere link (thumbnail) focus heeft. Uitgebreide uitleg in de algemene css bij a:hover span.naam.

div#thumbs a:hover img, div#thumbs a:active img

Als ik over 'n link binnen de div met id="thumbs" hover, of als deze link focus heeft, doe dan iets met de daarin zittende afbeelding. Dat zijn hier de thumbnails.

border: white solid 2px;

Behalve Internet Explorer 6 en 7 kennen alle browsers outline. Bij alle andere browsers krijgt de thumb 'n outline als je over de erbij horende link hovert of als deze focus heeft. Dat kan dus niet bij Internet Explorer 6 en 7, dus geef ik die 'n witte border om de thumbnail van 2 px breed.

margin: 0;

Probleem is alleen dat 'n border ruimte inneemt, in tegenstelling tot 'n outline. Door 'n border van 2 px rondom de thumbnail te zetten zou deze 2 px omlaag en naar rechts springen, wat 'n erg onrustig beeld oplevert.

In de algemene css hebben de thumbs 'n marge van 2 px gekregen. Als ik nu die marge weghaal op het moment dat de thumb 'n border krijgt, blijft de thumb netjes op z'n plaats staan.

.hide-ie-6

Alles met 'n class="hide-ie-6". Dat is in dit voorbeeld alleen span#eind, de span waarin de tekst staat die waarschuwt dat verder tabben zinloos is.

display: none;

Niet tonen. Om een of andere reden sloopt dit de hele lay-out in Internet Explorer 6. Waarschijnlijk zou dit wel zijn op te lossen, maar het is ook opgelost als iedereen eindelijk 'ns die browser zou dumpen, dus ik geloof 't wel: geen waarschuwing om te stoppen met tabben in Internet Explorer 6.

a#hulp span#hulptekst-alle

De span met id="hulptekst-alle" binnen de link met id="hulp". In deze span staat de hulptekst voor alle browsers behalve Internet Explorer 6, 7, 8 en 9.

display: none;

In de algemene css is opgegeven dat deze tekst zichtbaar moet worden als ik over a#hulp hover, of als deze focus heeft. Maar Internet Explorer 6 heeft 'n eigen hulptekst, dus deze moet onzichtbaar blijven.

a#hulp:hover span#hulptekst-ie6

Als ik over de link met id="hulp" hover, doe dan iets met de daarin zittende span met id="hulptekst-ie6". Dit is de hulptekst die bij Internet Explorer 6 hoort.

Alle instellingen zijn al opgegeven bij a#hulp span.hulptekst in de algemene css, omdat die voor alle drie de hulpteksten hetzelfde zijn.

In tegenstelling tot in de algemene css voor alle browsers heb ik :active weggelaten (dat moet eigenlijk :focus zijn, een van de vele fouten in Internet Explorer 6). Dit werkt namelijk niet in Internet Explorer 6. Mogelijk zou je het wel werkend kunnen krijgen, maar ik geloof het wel voor deze verouderde browser.

'n Ander punt is dat ik er ook niet van overtuigd ben dat het wel slim is om 'n hulptekst mee te nemen bij het tabben, dus ik kan er ook niet echt rouwig om zijn dat dit niet werkt.

top: 24px; left: -300px;

De hulptekst is in de algemene css ver buiten het scherm geparkeerd, ik hoef hem nu alleen maar op het scherm te zetten en hij wordt zichtbaar.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> div#thumbs {height: 80px;} div#thumbs-binnen {height: 71px;} div#thumbs a {float: left;} div#thumbs a:hover img, div#thumbs a:active img {border: white solid 2px; margin: 0;} div#thumbs a#eind-link:active {position: absolute; top: 5px; left: 50%; width: 321px; padding: 3px; border: black solid 1px; text-decoration: none; color: black; background: white; z-index: 100;} div#thumbs a.linkje {position: absolute;} a#hulp span#hulptekst-alle {display: none;} #hulp:hover span#hulptekst-ie7 {top: 24px; left: -300px;} </style> <![endif]-->

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

div#thumbs

De div met id="thumbs".

height: 80px;

Internet Explorer 7 zet de horizontale scrollbalk bínnen deze div, waardoor die te laag wordt voor de thumbnails. Door 'n hoogte op te geven wordt dat voorkomen.

div#thumbs-binnen

De div met id="thumbs-binnen". Dit is de div die binnen div#thumbs staat en samen met deze voor de horizontale scrollbalk zorgt. Binnen deze div staan alle thumbnails en dergelijke.

height: 61px;

Om een of andere reden is er een kleine kier tussen de balk met de thumbnails en de scrollbalk. Deze instelling haalt die kier weg.

div#thumbs a

De links binnen de div met id="thumbs".

float: left;

Zonder deze regel zet Internet Explorer 7 de thumb die focus heeft één te veel naar rechts, waardoor hij niet meer zichtbaar is. Je kunt er daardoor ook niet makkelijk op klikken.

div#thumbs a:hover img, div#thumbs a:active img

Als ik over 'n link binnen de div met id="thumbs" hover, of als deze link focus heeft, doe dan iets met de daarin zittende afbeelding. Dat zijn hier de thumbnails.

border: white solid 2px;

Behalve Internet Explorer 6 en 7 kennen alle browsers outline. Bij alle andere browsers krijgt de thumb 'n outline als je over de erbij horende link hovert of als deze focus heeft. Dat kan dus niet bij Internet Explorer 6 en 7, dus geef ik die 'n witte border om de thumbnail van 2 px breed.

margin: 0;

Probleem is alleen dat 'n border ruimte inneemt, in tegenstelling tot 'n outline. Door 'n border van 2 px rondom de thumbnail te zetten zou deze 2 px omlaag en naar rechts springen, wat 'n erg onrustig beeld oplevert.

In de algemene css hebben de thumbs 'n marge van 2 px gekregen. Als ik nu die marge weghaal als de thumb 'n border krijgt, blijft de thumb netjes op z'n plaats staan.

div#thumbs a#eind-link:active

Als de link met id="eind-link" die binnen de div met id="thumbs" ligt focus heeft (Internet Explorer 7 gebruikt foutief :active in plaats van :focus).

{position: absolute; top: 5px; left: 50%; width: 321px; padding: 3px; border: black solid 1px; text-decoration: none; color: black; background: white; z-index: 30;}

Deze regel is precies hetzelfde als die in de algemene css bij div#thumbs a#eind-link:focus. Maar Internet Explorer 6 toont geen namen in de navigatiebalk als die deze css ook krijgt. In dit geval was de simpelste oplossing :active gewoon weg te laten in de algemene css en alleen in de css speciaal voor Internet Explorer 7 neer te zetten. Dan werkt 't wel in Internet Explorer 7, en Internet Explorer 6 ziet dat hele :active niet.

a#hulp span#hulptekst-alle

De span met id="hulptekst-alle" binnen de link met id="hulp". In deze span staat de hulptekst voor alle browsers behalve Internet Explorer 6, 7, 8 en 9.

display: none;

In de algemene css is opgegeven dat deze tekst zichtbaar moet worden als ik over a#hulp hover, of als deze focus heeft. Maar Internet Explorer 7 heeft 'n eigen hulptekst, dus deze moet onzichtbaar blijven.

a#hulp:hover span#hulptekst-ie7

Als ik over de link met id="hulp" hover, doe dan iets met de daarin zittende span met id="hulptekst-ie7". Dit is de hulptekst die bij Internet Explorer 7 hoort.

Alle instellingen zijn al opgegeven bij a#hulp span.hulptekst in de algemene css, omdat die voor alle drie de hulpteksten hetzelfde zijn.

In tegenstelling tot in de algemene css voor alle browsers heb ik :active weggelaten (dat moet eigenlijk :focus zijn, een van de fouten in Internet Explorer 7). Dit werkt namelijk niet in Internet Explorer 7. Mogelijk zou je het wel werkend kunnen krijgen, maar ik ben er eigenlijk niet van overtuigd dat het wel slim is om 'n hulptekst mee te nemen bij het tabben, dus ik kan er ook niet echt rouwig om zijn dat dit niet werkt.

top: 24px; left: -300px;

De hulptekst is in de algemene css ver buiten het scherm geparkeerd, ik hoef hem nu alleen maar op het scherm te zetten en hij wordt zichtbaar.

Speciaal voor Internet Explorer 8 en 9

<!--[if IE 8 | IE 9]> <style type="text/css"> a#eerste, a#laatste {z-index: 40;} div#thumbs {position: absolute; left: 50%; margin-left: -325px;} a:hover span.plaatje, a:focus span.plaatje, a:active span.plaatje {position: fixed;} a span.naam {position: fixed;} div#thumbs a#eind-link:focus {position: fixed; z-index: 50;} a#hulp:hover span#hulptekst-ie8 {top: 24px; left: -300px;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 8 en 9. In grote lijnen werkt dit hetzelfde als bij Speciaal voor Internet Explorer 6. Alleen gaat het hier om twee versies: Internet Explorer 8 en Internet Explorer 9. Het teken | betekent 'of'. Hier staat dus tussen de teksthaken, in gewone mensentaal: als het Internet Explorer 8 of Internet Explorer 9 is.

Omdat er een probleem was met de afhandeling van z-index in Internet Explorer 8, is er wat aparte css nodig voor deze browser. Om te voorkomen dat ik dit hele voorbeeld weer van voren af aan zou moeten opbouwen, heb ik de css voor Internet Explorer 8 apart gehouden. Internet Explorer 9 blijkt ditzelfde probleem te hebben.

a#eerste, a#laatste

De link met id="eerste" en de link met id="laatste". Dit zijn de links die bij << en >> horen. Ze linken naar de eerste en de laatste link, dus indirect naar de eerste en laatste thumb, want die staan in die link.

z-index: 40;

Voor Internet Explorer 8 en 9 moest div#thumbs (de div waarbinnen de div met de thumbnails staat) een absolute positie krijgen. 'n Element met 'n absolute positie trekt zich in de regel niets meer aan van de rest van de pagina, en dat geldt ook voor alles wat in die div met absolute positie staat. Dus ook voor de < en >, de link naar volgende en vorige thumbnail.

Op de navigatiebalk komen de < en de > daardoor over de << en de >> te staan, dus over a#eerste en a#laatste. Door deze 'n tamelijk hoge z-index te geven komen de << en >> toch boven de < en > te staan.

div#thumbs

De div met id="thumbs". De div waarbinnen de binnenste div met alle thumbnails staat.

position: absolute;

Absoluut positioneren. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een positie heeft. Als die er niet is, zoals hier, wordt gepositioneerd ten opzichte van het venster van de browser.

Wat ik ook probeerde, de < en > verdwenen achter de navigatiebalk. Alleen het geven van een absolute positie aan deze div loste dat probleem op.

In dit geval handelden Internet Explorer 8 en 9 de z-index (wat boven- en wat onderaan staat in de weergave) niet goed af. Zelfs met 'n relatieve positie voor deze div en 'n hoge index bleven < en > onzichtbaar.

left: 50%; margin-left: -325px;

De balk met thumbnails moet horizontaal in het midden van het venster van de browser staan. De manier uit de algemene css werkt niet bij 'n absolute positie.

Zet de linkerkant van de div halverwege het venster van de browser, ongeacht de breedte hiervan, dus ook ongeacht de grootte van het scherm.

De div is 650 px breed. Als ik hem nu weer de helft daarvan naar links terugzet, dan zal de div, en dus de balk met thumbnails, horizontaal precies in het midden staan. Ongeacht de breedte van het venster van de browser.

a:hover span.plaatje, a:focus span.plaatje, a:active span.plaatje

Als ik over 'n link hover, of als die link focus heeft, doe dan iets met de spans met class="plaatje" binnen die link. Dit zijn de spans waarin, als achtergrond-afbeelding, de grote afbeelding wordt getoond.

position: fixed;

In de algemene css hebben deze spans 'n absolute positie. Dat kan prima, omdat er geen ouder-element is met een positie. Een absoluut gepositioneerd element is ook redelijk absoluut asociaal en trekt zich weinig aan van de rest van de pagina, dus de span - en dus de grote afbeelding - wordt gewoon weergegeven, ook al heeft div#thumbs-binnen een hoogte van 60 px en ook al heeft div#thumbs overflow op auto staan.

Maar voor Internet Explorer 8 en 9 is de positie van div#thumbs op absoluut gezet. En dat verandert de hele zaak, want nu wordt deze span absoluut gepositioneerd ten opzichte van div#thumbs, omdat dat de eerste ouder is die zelf een positie heeft.

Daardoor blijft deze span, en dus de grote afbeelding, binnen div#thumbs staan. Maar omdat de span absoluut is gepositioneerd, telt hij niet mee voor de hoogte. Daardoor blijft de hoogte van div#thumbs-binnen, en dus van div#thumbs, 60px. En dat is natuurlijk veel te weinig voor de grote afbeelding.

Omdat overflow bij div#thumbs op auto staat, ontstaat er wel 'n verticale scrollbar, maar daar heb je natuurlijk weinig aan als de afbeelding 450 px hoog is en de div 60 px. Tenzij je toevallig graag mensen pest.

Door deze span 'n position: fixed te geven, haal ik hem helemaal uit de gewone lay-out en komt hij overal los van te staan. Hij wordt nu gepositioneerd ten opzichte van het venster van de browser en heeft niets meer te maken met de hoogte van divs of scrollbars of wat dan ook. Het volmaakte asociale element, de bonus-graaier onder de divs.

a span.naam

De spans met 'n class="naam" binnen 'n link. Dit zijn de spans waarbinnen de naam van de afbeelding staat. Die naam komt bovenin de navigatiebalk te staan als de grote afbeelding wordt getoond.

position: fixed;

Ook deze span is in de algemene css absoluut gepositioneerd. De eerste ouder met 'n positie is div#thumbs. Dus er zou gepositioneerd moeten worden ten opzichte van div#thumbs als ik deze span 'n absolute positie geef. Dat gebeurt echter niet. Het lijkt erop dat er helemaal niet wordt gepositioneerd en dat de titel gewoon boven de thumbnail blijft staan. Waardoor deze dus niet meer zichtbaar is na ongeveer de vijfde humbnail. Ook dit is niet zoals het hoort, maar elke browser heeft nou eenmaal wel wat bugs.

Als ik 'n position: fixed geef wordt gepositioneerd ten opzichte van het venster van de browser en gaat 't wel goed.

div#thumbs a#eind-link:focus

Als de link met id="eind-link" binnen de div met id="thumbs" focus heeft. Dit is de link waarbinnen het venstertje staat met de melding dat verder tabben zinloos is.

position: fixed;

Het venstertje met deze melding is hoger dan de hoogte van de balk met de thumbnails, daarom geldt hier precies hetzelfde als voor de spans met de grote afbeelding, zie a:hover span.plaatje.

z-index: 50;

a:eerste en a#laatste, de links waarin << en >> staan, hebben voor Internet Explorer 8 en 9 'n z-index van 40 gekregen. Daardoor zouden ze boven de waarschuwing tegen verder tabben blijven staan. Als ik die waarschuwing 'n hogere z-index geef, voorkom ik dat.

a#hulp:hover span#hulptekst-ie8

Als ik over de link met id="hulp" hover, doe dan iets met de daarin zittende span met id="hulptekst-ie8". Dit is de span waar het hulpschermpje voor Internet Explorer 8 en 9 in zit.

top: 24px; left: -300px;

De hulptekst is in de algemene css ver buiten het scherm geparkeerd, ik hoef hem nu alleen maar op het scherm te zetten en hij wordt zichtbaar.

Html speciaal voor Internet Explorer 6

<!--[if IE 6]> <span id="hulptekst-ie6" class="hulptekst"> Internet Explorer 6? Ai... In alle andere browsers heb (...) hulptekst voor Internet Explorer 6 (...) een getoond. Met Shift+Tab ga je terug. </span> <![endif]-->

Deze html wordt alleen gelezen door Internet Explorer 6, uitleg bij Speciaal voor Internet Explorer 6. De uitleg daar is voor css, maar voor html werkt het precies hetzelfde.

Dit is de hulptekst die bij Internet Explorer 6 hoort, dus alle andere browsers mogen dit negeren.

Html speciaal voor Internet Explorer 7

<!--[if IE 7]> <span id="hulptekst-ie7" class="hulptekst"> De grote afbeeldingen worden pas gedownload als je ze (...) hulptekst voor Internet Explorer 7 (...) een voor een getoond. Met Shift+Tab ga je terug. </span> <![endif]-->

Deze html wordt alleen door Internet Explorer 7 gelezen. Hoewel dit html is, werkt dit hetzelfde als bij css. Uitleg bij Speciaal voor Internet Explorer 6.

Dit is de hulptekst die bij Internet Explorer 7 hoort, dus alle andere browsers mogen dit negeren.

Html speciaal voor Internet Explorer 8 en 9

<!--[if IE 8]> <span id="hulptekst-ie8" class="hulptekst"> De grote afbeeldingen worden pas gedownload als je ze (...) hulptekst voor Internet Explorer 8 en 9(...) een voor een getoond. Met Shift+Tab ga je terug. </span> <![endif]-->

Deze html wordt alleen door Internet Explorer 8 en 9 gelezen. Hoewel dit html is, werkt dit hetzelfde als bij css. In grote lijnen werkt dit hetzelfde als bij Speciaal voor Internet Explorer 6. Alleen gaat het hier om twee versies: Internet Explorer 8 en Internet Explorer 9. Het teken | betekent 'of'. Hier staat dus tussen de teksthaken, in gewone mensentaal: als het Internet Explorer 8 of Internet Explorer 9 is.

Dit is de hulptekst die bij Internet Explorer 8 en 9 hoort, dus alle andere browsers mogen dit negeren.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

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

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

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

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 20 december 2011.

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

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

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

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

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

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

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

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

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

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

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

Wijzigingen

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

11 maart 2009:

Nieuw opgenomen.

24 maart 2009:

19 april 2009:

8 januari 2010:

6 januari 2011:

20 december 2011:

Bekende problemen

Deze lijst is nogal lang. In de praktijk zijn er eigenlijk alleen bij Opera serieuze problemen. De lijst is zo lang omdat ik op nogal veel punten test. En als dan elke browser op 'n aantal punten iets andere kleine problemen heeft, heb je al snel 'n lange lijst.

Alle browsers

Firefox, Safari, Google Chrome, Internet Explorer 6 en 7 op een 800x600-scherm

Bij klikken op een thumb (niet bij hoveren of tabben) verschuift alles iets omhoog. Daardoor valt de navigatiebalk bovenaan weg. Bij Internet Explorer 6 en 7 blijft dit zo, tot je op 'n andere plaats dan 'n thumb klikt. Bij Safari en Google Chrome blijft dit zo, tot je buiten thumb en geopende afbeelding . Bij Firefox springt alles meestal even omhoog en gelijk weer terug, in het uiterste geval staat alles weer goed als je niet meer over de thumb hovert.

Dit is er waarschijnlijk vrij makkelijk uit te halen, maar ik laat het zo omdat het voordeel is dat je nu meer van de onderkant van de afbeelding ziet.

In Internet Explorer 8 speelt dit niet door het gebruik van position: fixed.

Internet Explorer 7

Internet Explorer 6

Waarschijnlijk zijn de meeste van deze dingen wel op te lossen, maar ik vind dat mensen onderhand wel 'ns mogen updaten. En 't werkt, alleen minder dan in andere browsers.

Opera

Safari en Google Chrome

Als je de Tab-toets gebruikt en daarna op < of > klikt, reageren < en > niet meer. In de praktijk zie ik dit niet zo snel gebeuren, want de meeste mensen weten niet dat je de Tab-toets zo kunt gebruiken, en als ze 'm gebruiken zullen ze niet opeens op < of > gaan klikken.

Dit ontstaat doordat de < en > precies verkeerd om staan, waardoor ze verwijzen naar 'n thumb die al zichtbaar is. Klikken op de laatste thumb of 'n klein eindje scrollen lost het op.

Internet Explorer 9

Als je door de afbeeldingen loopt met Tab, Shift+Tab, > of <, opent soms ’n enkele afbeelding niet. De volgende afbeelding opent weer gewoon. Als je vanaf de afbeelding daarvoor of daarna teruggaat, opent de afbeelding alsnog. Ook opent de afbeelding alsnog als je op F5 (ververs pagina) klikt. Dit gebeurt alleen de eerste ronde: als je helemaal rondgaat met de genoemde toetsen, gaat het in de tweede ronde altijd goed. Ook klikken op de thumbs en hoveren werkt goed.

Ik heb geen enkele regelmaat kunnen ontdekken in het niet openen van ’n afbeelding: het lijkt volkomen willekeurig te gebeuren. Mede omdat Internet Explorer 8 dit gedrag niet heeft, denk ik dat er ’n kleine bug in Internet Explorer 9 is geslopen.