Skip links en inhoudsopgave

Laatst aangepast: 25 oktober2011

Slideshow met verticale rij thumbnails en foto's van verschillende grootte. 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.

Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook. Een link naar https://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd.

Opmerkingen

De gebruikte afbeeldingen zijn afkomstig van Public Domain Pictures.net.

In Internet Explorer 6 is maar één thumbnail zichtbaar, in alle andere browsers een verticale rij thumbnails ter hoogte van het venster van de browser. Verder werkt in Internet Explorer 6 in grote lijnen alles hetzelfde als in alle andere browsers.

Voor dit soort effecten wordt meestal JavaScript gebruikt, maar het kan vaak ook uitstekend met alleen (x)html en css. Voordelen zijn dat dit ook werkt als JavaScript uit staat en dat het meestal veel simpeler is.

Als iemand css heeft uitstaan, bijvoorbeeld omdat 'n speciale browser wordt gebruikt vanwege 'n handicap, zouden de foto's niet bekeken kunnen worden. 'n Background-image werkt immers alleen met css. Daarom is bij elke thumbnail 'n gewone link naar de foto neergezet. Door die link aan te klikken zal de foto in 'n nieuwe tab of venster openen.

Die link wordt met css ver buiten het scherm neergezet, zodat hij normaal genomen niet zichtbaar is. Als de css uitstaat wordt hij op de normale manier weergegeven en is dan dus zichtbaar.

Voor spraakbrowsers en dergelijke is deze pagina niet goed toegankelijk. Maar ik denk dat dat eigenlijk niet is op te lossen, omdat het om een slideshow gaat. En die is hoe dan ook niet om te zetten in tekst. Als toegankelijkheid voor spraakbrowsers en dergelijke belangrijk is, zou je 'n aparte pagina met omschrijvingen van de afbeeldingen kunnen maken.

Net als met andere methoden waar thumbnails bij worden gebruikt, heb je kleine afbeeldingen (thumbnails) nodig en grote. De thumbnails worden snel geladen omdat ze klein zijn. Pas als de bijbehorende grote foto wordt getoond, wordt deze gedownload, dus er wordt zo weinig mogelijk bandbreedte gebruikt.

Er wordt geen nieuwe pagina geladen of 'n nieuw venster geopend of zoiets: alles gebeurt in dezelfde pagina in hetzelfde venster.

Hoewel dat niet absoluut nodig is, is het wel heel handig als de afbeeldingen dezelfde maat hebben. Of twee maten eigenlijk: één voor liggende en één voor staande afbeeldingen. Je kunt de foto's dan desgewenst centreren, er 'n kadertje om zetten, 'n onderschrift eronder zetten, enz. Bij dit voorbeeld hebben de foto's verschillende afmetingen, ze staan dan ook niet gecentreerd.

Omdat gebruikt wordt gemaakt van position: fixed mogen de foto's niet groter zijn dan het venster van de browser, omdat anders aan de rechterkant en aan de onderkant delen van de foto verdwijnen. Er verschijnt geen scrollbar: het verdwijnt gewoon.

Bij het maken van dit voorbeeld heb ik de afbeeldingen namen als 'foto-1.jpg' gegeven. Voor dit voorbeeld maakt dat niet uit, maar normaal genomen zijn duidelijke namen als 'pauw.jpg' beter, omdat spraakbrowsers, zoekmachines, en dergelijke daar meer informatie over de afbeelding uit kunnen halen.

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.

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 linkerkant staat 'n verticale rij thumbs. Omdat niet alle thumbs op het scherm passen, kun je door de thumbs scrollen met scrollwieltje of scrollbalk. De verticale scrollbalk ontstaat door binnen een buitenste div een aantal spans, die zijn veranderd in blok-elementen, te zetten. Omdat de buitenste div op een vaste plaats staat en overflow op auto heeft staan, kun je door de spans scrollen. En in elke span staat een thumb, dus die scrolt vrolijk mee met de span.

Onder elke thumb zit 'n link naar 'n anker bij de volgende thumb. Als je op 'n thumb klikt, komt de thumb die daar gelijk onder zit bovenaan in het venster van de browser te staan.

Rechts van elke thumb worden twee pijltjes neergezet met behulp van position. Onder elk pijltje zit een link naar een anker bij de vorige of bij de volgende thumb. Bij klikken hierop komt de vorige of volgende thumb bovenaan het venster van de browser te staan.

Als naast elke thumbs twee pijltjes zichtbaar zijn, is dat wat verwarrend en rommelig. Met behulp van 'n vaststaande extra div worden daarom alle pijltjes, behalve de bovenste twee, afgedekt. Die div moet dezelfde kleur hebben als de pagina, zodat je hem niet ziet.

Omdat deze div vast op het scherm staat, moeten de pijltjes rechts van de thumbs staan. Als ze op de thumbs zelf zouden staan kun je ze niet afdekken, want dan dek je ook 'n deel van de thumb af. Als ze naast elkaar tussen de thumbs zouden staan, kun je ze ook niet afdekken, want de thumbs kunnen verschuiven, en de pijltjes dus ook.

Om de pijltjes af te dekken zou je 'n horizontale div nodig hebben. Die div zou mee moeten schuiven met de pijltjes. Maar helemaal bovenaan zou dan geen div mogen staan, want die pijltjes moeten zichtbaar blijven. Misschien zou zo'n constructie nog kunnen lukken, maar het zou vreselijk ingewikkeld worden.

Onder de rij thumbs staat de titel van de slideshow. Je zou 'm ook ergens anders kunnen zetten, maar ik vind 't wel leuk hier. De hoogte van het blok-element waar de titel in staat is opgegeven in em, zodat deze meegroeit met de lettergrootte. De onderkant van het venster met thumbs is op dezelfde afstand van de onderkant van het venster van de browser neergezet, ook opgegeven in em, zodat deze mee omhoog schuift als het element met de titel hoger wordt.

De grote foto's zijn background-images. Deze staan in een span, die als blok-element wordt weergegeven. Omdat de foto's in dit voorbeeld ongelijk van grootte zijn, heeft deze span de grootte van het volledige venster van de browser, minus een marge links voor de thumbnails en dergelijke.

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.

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 (dit werkt niet in Internet Explorer 6).Omdat de Tab-toets de links afgaat in de volgorde zoals ze in de html voorkomen, heb ik de thumbs met behulp van tabindex 'n nummer gegeven. Daardoor worden eerst de links met de thumbs bezocht.

De links met de pijltjes hebben geen enkel nut voor 'n Tab-toets, deze heb ik daarom 'n tabindex van -1 gegeven. Ze worden nu volledig genegeerd door de Tab-toets. De rechtstreekse links naar de foto's hebben geen tabindex gekregen. Deze worden daardoor bezocht ná de thumbs. Deze links moeten wel bereikbaar blijven voor de Tab-toets, omdat ze nodig zijn als de css uitstaat.

Normaal genomen zouden in html met css alle afbeeldingen gelijk worden gedownload. Dat is hier geen goed idee, omdat dat vele minuten kan gaan duren met de veertien 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.

Als iemand css heeft uitstaan, bijvoorbeeld omdat 'n speciale browser wordt gebruikt vanwege 'n handicap, zouden de foto's niet bekeken kunnen worden. 'n Background-image werkt immers alleen met css. Daarom is bij elke thumbnail 'n gewone link naar de foto neergezet. Door die link aan te klikken zal de foto in 'n nieuwe tab of venster openen.

Die link wordt met css ver buiten het scherm neergezet, zodat hij normaal genomen niet zichtbaar is. Als de css uitstaat wordt hij op de normale manier weergegeven en is dan dus zichtbaar.

Voor Internet Explorer 6 was dit niet goed werkend te krijgen. Daarom zie je in die browser geen rij met thumbnails, maar slechts eentje. Verder werkt alles in grote lijnen hetzelfde.

Misschien zou dit volledig werkend te krijgen zijn in Internet Explorer 6, maar dat zou heel erg moeilijk worden en enorm veel tijd gaan kosten. En dit is ook 'n acceptabele oplossing. Als dit op grotere schaal zou gebeuren, zou 't hopelijk ook helpen mensen te stimuleren over te stappen op Firefox, Opera, Safari, Google Chrome of desnoods Internet Explorer 7 of 8.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Speciaal bij dit voorbeeld

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 klikken of gebruik van de Tab-toets, blijft de afbeelding geopend. Maar door op 'n andere thumb te klikken of verder te tabben, opent gewoon weer 'n andere afbeelding.

In dit geval heeft het gebruik van :focus en :active volgens mij meer voor- dan nadelen.

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;

Slim om te doen vanwege kleine verschillen tussen browsers.

padding: 0 0 0 5px;

Dit wordt gelezen in de volgorde boven - rechts - onder - links. Alleen aan de linkerkant 'n kleine afstand tussen de inhoud en de zijkant van het venster van de browser.

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

Er wordt eerst gekeken of Arial aanwezig is op de computer van de bezoekers. Als dat er niet is, wordt gezocht naar Helvetica. Als dat ook niet wordt gevonden, wordt in ieder geval een letter zonder schreven (dwarsstreepjes) genomen.

font-size: 110%;

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

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

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

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

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

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

color: black;

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

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

background: #ff9;

Achtergrondkleurtje.

div#venster

De div met id="venster". De div waar alles in komt te staan, behalve de titel en het hulpvenstertje.

position: absolute;

Dit geeft de mogelijkheid om de div op het scherm te zetten met een vaste plaats voor boven- en onderkant. Als boven- en onderkant vast staan, staat dus ook de hoogte vast. In combinatie met overflow: auto hieronder ontstaat er dan 'n scrollbalk waarmee de inhoud van de div (de thumbs) gescrold kan worden. De div zelf blijft echter keurig netjes op z'n plaats staan.

Dit is beter dan 'n vaste hoogte van 'n bepaald aantal px of zo, want boven- en onderkant zullen zich nu aanpassen aan de hoogte van het venster van de browser (en dus ook van het scherm).

top: 0;

Bovenkant helemaal bovenaan zetten. Normaal genomen zal deze div uit zichzelf al hier gaan staan, omdat het de allereerste html is. Maar hieronder geef ik 'n bottom op. En 'n computer is nou eenmaal niet zo slim: als ik alleen die bottom opgeef, wordt de hele handel keurig op de opgegeven afstand van de onderkant gezet, dus grotendeels boven het venster...

bottom: 3em;

Onderkant 3 em boven de onderkant van het venster van de browser zetten. Dit levert ruimte op voor de titel, die nu onder de rij thumbs kan komen. Ik gebruik em als eenheid, net als bij de hoogte van de onder deze div staande titel, zodat bij 'n andere lettergrootte de onderkant van de div met thumbs omhoog wordt verplaatst en aan de titel blijft aansluiten.

width: 176px;

De thumbs zelf worden 'n stuk smaller. Daarnaast komen nog de pijltjes te staan. Dit is breed genoeg voor deze inhoud en 'n scrollbar.

'n Div heeft van zichzelf geen vaste breedte. Normaal genomen vult hij de volle breedte van ouder-element of venster van de browser, maar niet bij 'n absolute positie. Dan neemt hij de breedte van de inhoud aan, hier dus thumbs en pijltjes.

Bij sommige browsers komt de scrollbar echter bínnen deze aangenomen breedte te staan, dus over de inhoud heen. Grappig genoeg Firefox onder Windows, maar niet onder Linux, en Opera onder Linux, maar niet onder Windows.

(Toevoeging 15 november 2010: inmiddels klopt dit niet helemaal meer, maar omdat de code werkt, verander ik er niets aan.)

overflow: auto;

Als er teveel inhoud is, verschijnt een scrollbalk. In de hoogte is er veel te veel inhoud, want daar staan alle thumbs onder elkaar. Er verschijnt dus 'n verticale scrollbalk. Waardoor je door de thumbs kunt scrollen.

Gelijk hieronder staat bij span.wrap, de span waarin de thumbs staan, overflow: hidden;. Mogelijk zou je dus denken dat er nooit teveel inhoud voor deze div kan zijn, en dat er dus nooit 'n scrollbalk zou verschijnen. Maar dat klopt niet.

De overflow: hidden; hieronder slaat op de inhoud van elke span apart. En die wordt inderdaad niet getoond als die te groot is. Dat kun je heel goed zien bij thumb nummer 14, de laatste: daar wordt de rechterhelft van de thumb inderdaad niet getoond.

Er staat echter 'n hele serie spans onder elkaar, en die gezamenlijke spans leveren wel 'n overflow op. Dus 'n scrollbalk. En omdat die spans ónder elkaar staan, en niet naast elkaar, is er alleen 'n verticale overflow, dus alleen 'n verticale scrollbalk.

Dat sommige thumbs maar gedeeltelijk zichtbaar zijn vind ik niet zo'n probleem: je kunt toch goed zien wat de grote foto uiteindelijk gaat voorstellen. En bij foto's van twee maten (eentje voor liggend en eentje voor staand) kun je de thumbs ook allemaal precies de goede maat geven, als je dat zou willen. Dat kan trouwens ook al met deze thumbs, maar dan moet de ene in verhouding meer verkleind worden dan de andere.

span.wrap

De spans met 'n class="wrap". Binnen elke span van deze class staan 'n thumbnail, de bijbehorende grote foto, twee links met pijltjes en 'n rechtstreekse link naar de grote foto.

Elke span heeft ook nog 'n aparte id voor eigen instellingen, naast deze class, maar 'n hele reeks instellingen hebben ze gemeenschappelijk, dus die kan ik in één keer opgeven via die gemeenschappelijke class.

De css voor deze span is strikt genomen niet nodig. Hij stamt uit 'n andere versie van 'n slideshow. Ik laat hem toch staan, omdat hij de code overzichtelijker maakt (vind ik). Ik kan nu namelijk voor alle spans de class 'wrap' gebruiken, zodat gelijk duidelijk is waar zo'n wrap voor dient. Helemaal achter de serie thumbs staat nog 'n serie 'opvul'-spans. Door ze dezelfde class te geven is gelijk duidelijk waar ze voor dienen.

display: block;

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

width: 158px;

Strikt genomen is dit niet nodig maar voor de zekerheid en voor de duidelijkheid geef ik toch ook hier 'n breedte op. Dit maakt het ook mogelijk om overflow: hidden; te gebruiken.

* Duidelijkheid: div#venster, de div waarbinnen deze span staat, heeft 'n breedte van 176 px. De thumbs hebben een maximum-breedte van 133 px. Rechts van de thumbs staan blokjes met pijltjes, 'n plaatje van 'n vraagteken en (onzichtbaar) de div die de lagere pijltjes afdekt. 'n Groot deel hiervan is gepositioneerd. Deze heerlijke mix is deels verantwoordelijk voor de breedte. En alles moet binnen de linkerkolom passen. Dit levert dus 'n tamelijk chaotisch beeld op.

Als je van puzzelen houdt, kun je uitzoeken hoe alles in elkaar past. Maar door hier ook 'n breedte op te geven voorkom ik die hele puzzelarij: ongeacht de inhoud van deze span is dit gewoon de breedte. Punt. Discussie gesloten.

(Toen ik dit schreef en dus de code ook weer uitgebreid moest bekijken, heb ik me ongans gezocht waar die breedte vandaan kwam als ik dit weghaalde, dus dit is ook traumaverwerking... Serieus: als ík er al zo naar moest zoeken, is dat voor 'n ander denkelijk nog lastiger.)

* Zekerheid: bij de thumbs is een maximum-breedte opgegeven. Omdat die breedte wordt gehaald, is deze span altijd voldoende gevuld. Maar bij smallere thumbs kan dat wel 'ns anders zijn. Ik kan dat uitgebreid gaan testen, maar op deze simpele manier is 't ook opgelost voor de eeuwigheid. Wat ik verder ook voor rampen aanricht binnen deze span, het kan geen invloed hebben op de rest van de pagina, omdat ik ook hieronder nog overflow: hidden; gebruik. En Internet Explorer 6 heeft deze breedte sowieso nodig om 'n horizontale scrollbar te voorkomen, want die kent geen maximum-breedte.

overflow: hidden;

Als iets niet binnen de span past, vertoon het dan niet. Omdat alleen een breedte is opgegeven, geldt dit alleen voor de breedte.

Als er later iets aan de inhoud wordt veranderd, bijvoorbeeld nog 'n symbool erbij, kan 't nooit de hele lay-out verstoren. Niet strikt nodig dus.

Maar ik ben er ook niet helemaal gerust op dat er geen woeste dingen gebeuren bij zoomen, andere lettergrootte, en dergelijke, ondanks al het testen. Dit zorgt er in ieder geval voor dat iedereen netjes in z'n hok blijft. Mogelijk helpt het ook problemen voorkomen bij niet-geteste browsers.

Alle thumbs zijn 100 px hoog, dus in de hoogte hoef ik verder niets speciaals te doen.

a.vorige, a.volgende

De links met class="vorige" en de links met class="volgende". Dat zijn de links waarbinnen de pijltjes staan. Ze linken naar de vorige en de volgende thumb, maar dat had je misschien al opgemaakt uit de naam van de id.

display: block;

Van zichzelf is een <a> een inline-element. Door er 'n blok-element van te maken kan ik eigenschappen als breedte en hoogte gebruiken.

position: relative;

Met een relatieve positie worden de elementen eerst gewoon op de normale manier neergezet, waarna ik ze naar boven, links, enz. kan verplaatsen. Dus relatief ten opzichte van de normale positie van het element.

De pijltjes moeten rechts van de thumb komen te staan, het blokje waar het bovenste pijltje in staat gelijk met de bovenkant van de thumb.

Omdat van de <a>'s 'n blok-element is gemaakt, worden ze onder elkaar op 'n nieuwe regel gezet. Dat betekent dat ik ze allebei met dezelfde instellingen op de goede plaats kan zetten. Als de bovenste bijvoorbeeld 10 px omhoog zou moeten, zou de tweede ook 10 px omhoog moeten om ertegenaan te blijven staan.

En omdat ze beide even breed zijn, staan ze ook horizontaal op dezelfde positie en kan ik ze ook horizontaal met dezelfde instelling verplaatsen.

top: 10px;

10 px lager neerzetten dan ze van zichzelf zoude staan, dan staat de bovenste gelijk met de bovenkant van de thumb. (De thumb komt onder deze twee links te staan, die elk 25 px hoog zijn, dus samen 50 px. Verderop verplaats ik de thumb weer 40 px naar omhoog. De bovenste link en de bovenkant van de thumb staan dan op dezelfde hoogte.)

left: 133px;

Nu staan ze gelijk rechts van de thumb. Dit getal is niet helemaal toevallig: de span waar ze in staan is 158 px breed, de link zelf is 25 px breed. Om dus de linkerkant van de thumb tegen de rechterkant van de span te krijgen, moet ik hem 133 px (158 - 25) naar rechts verplaatsen.

height: 25px; width: 25px;

Vierkantje van 25 x 25 px. Dat is 'n beetje ruim, zodat je niet al te precies hoeft te mikken bij klikken. De pijltjes, die gewone tekst zijn, kunnen nu ook behoorlijk vergroot worden zonder dat ze gelijk uit het witte vierkantje knallen.

background: white;

Witte achtergrond.

color: black;

Omdat de pijltjes in een link staan, zouden ze de kleur van tekst uit 'n link krijgen, en dat is hier niet de bedoeling.

text-decoration: none;

Ook de gebruikelijke onderstreping van 'n link wil ik hier niet.

text-align: center;

Pijltjes (die zijn gewoon tekst) horizontaal in het midden van het blokje zetten.

z-index: 400;

Zonder deze z-index toont Opera de grote foto's niet. Omdat de z-index van deze links hier niets mee te maken zou moeten hebben, heb ik er geen flauw idee van waarom dit werkt. Maar het werkt, en het stoort andere browsers niet, dus...

Het getal is vrij willekeurig gekozen. Ik gebruik altijd vrij grote afstanden tussen de diverse z-indexen zodat je ze niet zo snel verwart, en zodat er later eventueel nog andere tussen gezet kunnen worden.

(Toevoeging 15 november 2010: inmiddels is dit niet meer nodig. Maar de code werkt, daarom laat ik het gewoon staan. Je weet nooit zeker of er niet elders eventueel iets misgaat, als je het gaat veranderen.)

img.thumb

De <img>'s met class="thumb". De thumbnails.

margin-top: -40px;

In de html komt dit na a.vorige en a.volgende, die elk 25 px hoog zijn. En omdat die <a>'s blok-elementen zijn, komen ze op 'n nieuwe regel te staan. Om dezelfde reden komt ook de thumb op 'n nieuwe regel te staan. De thumb staat dus 50 px onder het begin van de span waarin hij staat.

Om de thumb op de goede plaats te krijgen zet ik hem 50 px omhoog. Maar omdat de pijltjes die over de thumb heen staan 10 px omlaag staan, trek ik die van die 50 px af. Nu staan bovenkant van de thumb en het bovenste pijltje op precies gelijke hoogte.

max-width: 133px;

De breedte van de thumbs wisselt. Dat lijkt niet zo (behalve bij de smalle thumbs), omdat er rechts van de thumbs 'n div met achtergrondkleur staat om de pijltjes te verstoppen. Die div kapt dus ook te brede thumbs af. Behalve helemaal bovenaan, waar de pijltjes zichtbaar moeten worden. Daardoor wordt 'n bredere thumb daar opeens zichtbaar, wat niet echt mooi is. Met deze instelling blijven de thumbs overal even breed.

Ik vind 't niet zo'n probleem dat meestal niet de hele thumb is te zien. Er blijft genoeg over om je 'n beeld te vormen van de grote foto. Als alle foto's dezelfde grootte zouden hebben (eentje voor staande en eentje voor liggende foto's, kun je de thumbs precies de goede grootte geven, zodat ze volledig zichtbaar zijn. Dat zou nu ook al kunnen, maar dan moet je elke thumb anders gaan schalen. En dat vind ik te veel werk, ik vind 't prima zo.

span#t-6 img.thumb

'n Afbeelding met class="thumb" binnen 'n span met id="t-6".

Dit is 'n span die ook als class 'wrap' heeft. Door al die spans ook 'n aparte id te geven, naast die class, kan ik ze ook apart benaderen. Dit is de zesde span, dus de thumbnail binnen de zesde span, dus de zesde thumbnail.

margin-left: 20px;

Dit is een staande thumb. Ik kan die niet op de normale manier centreren, omdat span wrap 158 px breed is. Maar daarvan zie je maar 133 px, de rest wordt afgedekt door de div rechts die wordt gebruikt om de pijltjes te verstoppen (behalve helemaal bovenaan).

Als ik zou centreren zou de thumb in het midden van de 158 px komen te staan. Technisch gezien precies in 't midden, voor het oog volledig uit het midden. Voor het oog moet ik centreren ten opzichte van de zichtbare 133 px, maar dat kan niet, want er is geen ouder-element met deze breedte.

Dus geef ik 'n marge links, zodat de thumb voor het oog in het midden staat.

span#t-7 img.thumb, span#t-11 img.thumb margin-left: 25px;

Zelfde verhaal als bij "span#t-6 img.thumb, maar nu met de zevende en elfde thumb. Omdat de breedte iets anders is, is de marge links ook iets anders.

img

Alle afbeeldingen.

border: 0;

Een afbeelding die als link wordt gebruikt (hier de thumbs) krijgt normaal genomen 'n blauwe rand. Dat is hier foeilelijk. (Ik vind 't persoonlijk trouwens overal foeilelijk, maar smaken verschillen kennelijk.)

a.klikker

De links met class="klikker". Dit zijn de links voor als mensen css uit hebben staan. Deze links linken direct naar de foto's.

position: absolute;

Om de link buiten het scherm te kunnen zetten.

left: -10000px;

Aan de linkerkant van het scherm parkeren. Dit moet genoeg zijn, zelfs voor het grootste scherm. Als je css gebruikt zie je deze link nu niet, maar als css niet wordt gebruikt wordt de link gewoon op het scherm gezet, gelijk na de thumbnail. En kunnen mensen er dus op klikken om toch de bijbehorende grote foto te zien.

span.opvul

De spans met class="opvul". Deze spans hebben ook allemaal de class 'wrap', waardoor ze al de instellingen van die class hebben gekregen. Door ze daarnaast nog deze class te geven, kan ik deze groep nog wat extra instellingen geven.

Als ik door de thumbs scrol of klik, kunnen de onderste thumbs nooit bovenaan komen te staan, omdat de onderste thumb altijd onderaan het venster blijft staan. Die komt gewoon niet hoger. Daarom zet ik 'n aantal 'nep-thumbs' onder de echte thumbs. Die zijn verder gewoon leeg, maar ze zorgen ervoor dat alle thumbs> bovenaan kunnen komen te staan.

Bij elkaar hebben deze 'nep-thumbs' genoeg hoogte om ook in 'n hoger browservenster te zorgen dat alle thumbs bovenaan kunnen komen.

height: 100px;

Omdat deze spans leeg zijn, hebben ze geen hoogte. De thumbs zijn 100 px hoog, dus maak ik deze spans even hoog, zodat het zoveel mogelijk 'echte' thumbs lijken. Dat werkt het makkelijkste.

Omdat deze spans ook de class 'wrap' hebben, zijn het al blok-elementen en hebben ze al 'n breedte.

Waarom niet één hoge span? Omdat dat tijdens het ontwikkelen van dit voorbeeld problemen gaf. En dit bleek wel te werken. Mogelijk zou één hoge span inmiddels wel werken, maar soms lijk ik net 'n mens en ben ook 'n beetje lui...

Mogelijk zou ook 'n padding of border onder de onderste thumb werken, maar dat heb ik verder ook niet uitgezocht.

div#verberg

De div met id="verberg". Naast elke thumb staan twee pijltjes. Dat is nogal verwarrend en ook niet erg fraai. De taak van deze div is om alle pijltjes te verbergen, behalve bovenaan in het venstertje met thumbs. Zoals vaker is 't dus allemaal weer gigantisch nep: de pijltjes staan er allemaal al, maar ik verstop ze. Ja, inderdaad, als kind heb ik gegoocheld. Vandaar dat nu, als je goed kijkt, 'n enkel pijltje in 'n enkele browser ook iets te vroeg zichtbaar wordt. Net als in m'n kindertijd met goochelen. Hoewel, toen was 't meer dat de blokjes altijd allemaal veel te vroeg zichtbaar werden. Er is veel verborgen kinderleed.

Als je dat iets te vroeg zichtbaar worden van 'n heel klein stukje van 't blokje waar 't pijltje in zit niet wilt, maak dan deze div iets hoger. Dat doe je door de waarde bij top iets te verlagen.

Als je dit hele verhaal nou niet begrijpt, verander de achtergrondkleur van deze div dan even, dan zie je gelijk hoe 't werkt. Of verander de achtergrondkleur even in #transparent.

position: fixed;

Vast op het scherm zetten. Omdat het venster met de thumbs ook vast op het scherm staat, kan ik deze div heel precies neerzetten ten opzichte van de thumbs.

top: 113px;

De bovenkant vrijlaten, zodat de pijltjes bovenaan wel zichtbaar zijn. Dit heb ik gewoon uitgeprobeerd.

left: 138px;

Naast de thumbs neerzetten. Alleen de pijltjes naast de thumbs moeten worden afgedekt, niet de thumbs. Aan de linkerkant van de body is een padding van 5 px, de thumbs zijn 133 px breed, samen 138 px.

bottom: 0;

Tot aan de onderkant van het venster van de browser laten lopen. Onder de thumbs komt de titel nog. Maar omdat deze bínnen deze div staat, zal deze toch gewoon zichtbaar zijn.

width: 25px;

Omdat deze div 'n fixed positie heeft, wordt hij niet automatisch even breed als venster van de browser of ouder-element. Dus moet ik hem zelf 'n breedte geven: even breed als de blokjes met de pijltjes.

background: #ff9;

Zelfde achtergrondkleur als de pagina, zodat je de div niet ziet. Had ik in m'n goocheltijd deze truc maar gekend. Zucht.

z-index: 500;

Omdat Opera om een of andere duistere reden geen grote foto's toont, als er geen z-index bij a.volgende en a.vorige staat, moet ik hier nu 'n hogere z-index opgeven. Anders zouden de blokjes met de pijltjes altijd zichtbaar zijn.

(Toevoeging 15 november 2010: inmiddels is de z-index bij a.volgende en a.vorige niet meer nodig. Dus deze z-index is inmiddels eigenlijk ook overbodig. Maar de code werkt, daarom laat ik het gewoon staan. Je weet nooit zeker of er niet elders eventueel iets misgaat, als je het gaat veranderen.)

p#titel

De paragraaf met id="titel": de paragraaf waar de titel in staat, onder de rij thumbs.

position: fixed;

Dit werkt hier verreweg het makkelijkste. Ik kan de titel dan ten opzichte van het venster van de browser neerzetten, zodat deze altijd onderaan komt te staan.

top: 100%;

Zet de bovenkant van de paragraaf op 100 % vanaf de bovenkant van het venster van de browser. Oftewel: de bovenkant van deze paragraaf komt precies onder het venster van de browser te staan en is dus onzichtbaar. Maar iets zegt mij dat deze titel toch zichtbaar gaat worden, uiteindelijk.

De titel staat nu dus onderaan, ongeacht de hoogte van scherm en venster van de browser. Dat geeft wat houvast, 'n uitgangspunt.

left: 1px;

Helemaal links neerzetten, met alleen 1 px ruimte om het zwarte randje goed zichtbaar te maken.

height: 3em;

Binnen deze hoogte blijkt de titel goed te passen. Door als eenheid em te nemen, verandert de hoogte - ook in Internet Explorer - mee met de lettergrootte.

Omdat het venster met de thumbs div#venster ook op deze afstand vanaf de onderkant van het venster van de browser staat, blijft de titel altijd tegen de rij met thumbs aan staan, ongeacht de lettergrootte.

width: 177px;

Met deze breedte is de paragraaf met de titel ongeveer even breed als de rij met thumbs. Ongeveer, want er zitten minieme verschillen tussen de diverse browsers.

margin-top: -3.1em;

Ik had nog beloofd de titel, die nu nog onder het scherm staat, zichtbaar te maken. Door aan de bovenkant een negatieve marge te geven, wordt de paragraaf - en dus de titel - naar boven verplaatst. En dus zichtbaar.

Je zou denken dat je in plaats hiervan bottom met 'n bepaalde waarde kunt gebruiken. top: 100%; zou dan ook kunnen vervallen. Maar Internet Explorer 7 zet de titel dan op alle denkbare plaatsen neer, behalve op de goede. Kennelijk gebruikt Internet Explorer 7 'n ander uitgangspunt als je bottom gebruikt, maar ik heb niet kunnen uitvinden welk dat dan is. Maar goed, dit werkt prima, dus...

border: black solid 1px;

Randje rondom de paragraaf met de titel.

text-align: center;

Titel centreren.

color: black;

Tekstkleur zwart.

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

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

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

background: #ffd;

Achtergrondkleurtje.

overflow: auto;

Bij 'n hele grote letter kan 'n deel van de titel wegvallen. Nu verschijnt er dan 'n scrollbar. Niet erg fraai in zo'n klein vakje, maar 't gebeurt alleen maar bij 'n hele grote letter. En 't is beter dan dat de tekst onder het venster van de browser verdwijnt.

p#wrapper-help

De paragraaf met id="wrapper-help". Hierbinnen staan het plaatje met vraagteken en het hulpvenstertje.

position: fixed;

Omdat de meeste onderdelen zijn gepositioneerd ten opzichte van het venster van de browser, is dat ook hier het makkelijkste.

top: 130px;

130 px vanaf de bovenkant neerzetten. Dat is 'n stukje onder de pijltjes bovenaan.

left: 71px;

71 px vanaf de linkerkant neerzetten.

width: 156px;

Breedte. In deze paragraaf komt alleen het plaatje met het vraagteken te staan (normaal genomen is het hulpvenstertje gesloten, dat opent alleen bij hoveren over dit plaatje). Dit plaatje is maar 32 px breed. Dat plaatje centreer ik verderop, en met deze instellingen staat het dan precies goed.

Ik had ook deze paragraaf veel smaller kunnen maken en meer naar rechts kunnen neerzetten. Maar in Firefox en Safari levert deze constructie 'n klein plekje links van het vraagteken op, waar de grote foto niet opent, en dat vind ik wat prettiger werken. Je hebt dan 'n soort 'veilige zone' rondom het vraagteken.

Ik heb dit allemaal overgenomen van 'n ander voorbeeld, en toevallig blijkt het zo uit te pakken. Dus laat ik het zo.

margin: 0;

Van zichzelf heeft 'n paragraaf marges aan boven- en onderkant, dat komt hier niet goed uit.

text-align: center;

Inline-elementen centreren. Ik zeg inline-elementen, omdat het in dit geval om een <img> gaat: het plaatje met het vraagteken. En dat is ook 'n inline-element. Weliswaar met 'n aantal speciale eigenschappen, maar het blijft 'n inline-element.

z-index: 800;

Omdat div#verberg vanwege Opera 'n z-index nodig had, en omdat deze paragraaf precies boven die div komt te staan, is hier dus 'n nog hogere z-index nodig. Anders zou deze paragraaf worden verborgen door div#verberg.

(Toevoeging 15 november 2010: inmiddels is de z-index bij a.volgende en a.vorige niet meer nodig. Dus deze z-index is inmiddels eigenlijk ook overbodig. Maar de code werkt, daarom laat ik het gewoon staan. Je weet nooit zeker of er niet elders eventueel iets misgaat, als je het gaat veranderen.)

p#wrapper-help a

'n Link binnen de paragraaf met id="wrapper-help". Binnen deze link staat het hulpschermpje.

text-decoration: none;

Tekst binnen 'n link wordt normaal genomen onderstreept. Dat zou ook gelden voor de inhoud van het hulpschermpje, en dat is geen gezicht, dus geen onderstreping.

color: black;

Tekst binnen 'n link krijgt 'n kleur, dus ook de inhoud van het hulpscherm. Dat wil ik hier ook niet.

cursor: default;

Boven 'n link verandert de cursor in 'n handje. Maar dit is geen echte link, dus de cursor mag z'n gewone vorm houden. Dit levert problemen op in Internet Explorer 6 en 7, die ik bij de css voor die browsers weer corrigeer.

p#wrapper-help a span#help

De span met id="help" binnen 'n link die weer binnen de paragraaf met id="wrapper-help" ligt. De span met de tekst van het hulpschermpje.

Hoewel het hulpscherm normaal genomen niet zichtbaar is, kan ik toch al de meeste instellingen opgeven. Die worden dan gewoon gebruikt als het schermpje zichtbaar wordt.

position: absolute;

Om op 'n bepaalde plaats neer te kunnen zetten. Het eerste ouder-element met 'n positie is p#wrapper-help, dus er wordt gepositioneerd ten opzichte daarvan.

left: -8000px;

Ver buiten het scherm parkeren, zodat de tekst onzichtbaar is.

top: -1500px;

Omdat de tekst nogal lang is, kan de tekst bij 'n klein browservenster beneden de onderkant uitkomen. En ook al staat hij ver links buiten het scherm, dat levert toch 'n scrollbalk op. Om dat te voorkomen parkeer ik de tekst dus ook nog ver boven het scherm, zodat hij nooit onder de onderkant uit kan komen. De tekst staat nu ongeveer bij de linkerbovenburen in de slaapkamer, dus houdt 'n beetje rekening met wat je erin gaat zetten.

width: 550px;

Deze breedte past ook nog in het kleinste browservenster.

max-height: 420px;

Ook dit past nog in het kleinste browservenster. Het opgeven van 'n maximum-hoogte geeft ook de mogelijkheid om 'n scrollbalk te laten verschijnen als de lettergrootte zo groot is, dat de tekst onder het browservenster dreigt te verdwijnen. Behalve in Internet Explorer 6, die dit niet kent. Maar bij deze maten past in Internet Explorer 6, ook bij de grootste letter, alles nog in het browservenster.

border: black solid 2px;

Rand om het venstertje.

padding: 3px;

Kleine afstand tussen rand van het venstertje en tekst.

text-align: left;

In de wrapper waar het hele hulp-gebeuren in staat wordt de tekst gecentreerd, maar hier wil ik de tekst op de gewone manier weergeven: links uitgelijnd.

color: black;

Tekstkleur zwart.

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

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

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

background: white;

Witte achtergrond.

overflow: auto;

Als de tekst niet meer in het venstertje past omdat de letters worden vergroot, verschijnt 'n verticale scrollbalk. De tekst verdwijnt dus nooit buiten het venstertje.

p#wrapper-help a:hover span#help

Als ik binnen de paragraaf met id="wrapper-help" over 'n link hover, doe dan iets met de span met id="help". Dat is de span waar de tekst van het hulpschermpje in staat.

left: -50px; top: -120px;

De hele handel was al gelay-out, maar stond ver links buiten en boven het scherm. Ik hoef nu alleen de plaats maar te veranderen en floep, het schermpje verschijnt.

span#help span.kopje

De span met class="kopje" binnen de span met id="help". De span met het kopje 'Navigeren'.

font-weight: bold;

Vet weergeven.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> html {overflow: hidden;} div#venster {position: static; height: 145px; width: 156px;} span.wrap {height: 135px; width: 138px; margin-bottom: 10px; text-align: center;} a.vorige, a.volgende {position: static; margin-left: -120px;} a.volgende {margin-left: 115px; margin-top: -25px;} a.link span.foto {position: relative; top: -90px;} div#venster span.wrap a.link img.thumb {margin: 0; height: 110px;} a.link:hover {width: 1%;} a.link:hover span.foto {width: 1200px; height: 1000px;} p#titel {position: absolute; top: 220px;} p#wrapper-help {position: absolute; top: 280px; left: 0;} p#wrapper-help a:hover span#help {top: -260px; left: 40px;} p#wrapper-help a:hover {cursor: pointer;} </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.

html overflow: hidden;

Overbodige verticale scrollbar voorkomen. Deze werkt toch niet, ook niet bij te grote foto's. En ook bij de grootste vergroting in 'n klein browservenster is het hulpscherm nog zichtbaar, dus ook daarvoor is het niet nodig.

Als je 'n externe stylesheet gebruikt, loop je tegen 'n apart probleem aan bij html. Als je zonder meer html {overflow: hidden;} in je stylesheet zet, geldt dit voor élke pagina van je site. Terwijl het vrijwel zeker is dat er ook pagina's zullen zijn waar deze instelling niet moet worden gebruikt.

Normaal genomen is dit geen probleem, omdat je bijvoorbeeld de body 'n id kunt geven. Maar <html valt buiten de body. Om dit op te lossen kun je op de pagina's waar html {overflow: hidden;} moet worden gebruikt html 'n id geven, bijvoorbeeld "ie-overflow-hidden". In je html wordt de regel dan iets als <html id="ie-overflow-hidden" xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">. De precieze regel hangt af van het doctype wat je gebruikt.

In de stylesheet gebruik je dan gewoon html#ie-overflow-hidden {...}. Nu is dit alleen geldig voor de pagina's die bij html de juiste id hebben staan.

div#venster

De div met id="venster": de div waar de hele handel in staat, op titel en hulpschermpje na.

position: static;

In de algemene css heeft deze paragraaf 'n absolute positie gekregen. Dat is voor Internet Explorer 6 reden om de foto's niet weer te geven. Statisch is de normale situatie. Die stel ik hier weer in, en nu worden de foto's wel weergegeven. Vraag me niet waarom, 't blijft Internet Explorer 6.

height: 145px; width: 156px;

In alle andere browsers verschijnt 'n verticale rij thumbs met scrollbalk. Maar in Internet Explorer 6 is maar één thumb zichtbaar. Dus moet ik de maten van het venstertje met de thumb aanpassen.

span.wrap

Spans met class="wrap". Binnen elke span van deze class staat 'n thumbnail, de bijbehorende grote foto, twee pijltjes en de rechtstreekse link naar de grote foto.

height: 135px;

Eigenlijk zou 'n hoogte niet nodig moeten zijn, maar zonder hoogte slaat de schuiver in de scrollbalk af en toe op hol: hij springt dan ineens van boven naar onder en zo. Verder werkt alles wel, maar 't ziet er vreemd uit.

width: 138px;

Zonder deze breedte wordt het venster waar de thumb in staat even breed als de breedste thumb. Het venster (div#venster) is 156 px breed. Daar gaat 'n scrollbar van ongeveer 18 px af, dus dan houd je 138 px over.

margin-bottom: 10px;

Omdat de blokjes met pijltjes boven de thumbs staan en niet erop, wordt de afstand tussen de thumbs te klein. Met 'n marge aan de onderkant maak ik die weer wat groter.

text-align: center;

Omdat deze span niet breder is dan het zichtbare deel van de thumbs (de pijltjes staan bij Internet Explorer 6 niet naast, maar boven de thumbs), kan ik de thumbs op deze makkelijke manier centreren. Het effect hiervan is alleen zichtbaar bij thumbs die smaller zijn dan 138 px.

Er staat weliswaar text-align, maar dat geldt voor alle inline-elementen, en ook 'n <img> is 'n inline-element.

.vorige, a.volgende

De links met class="vorige" en class="volgende". De links waarbinnen de pijltjes staan.

position: static;

In de algemene css hebben deze 'n relatieve positie gekregen. Om voor mij volstrekt onduidelijke redenen maakt Internet Explorer 6 er 'n soort zebra van, tenzij de relatieve positie wordt veranderd in de standaard: statisch.

margin-left: -120px;

Hierboven wordt alles binnen span.wrap gecentreerd, dus ook de blokjes met de pijltjes. Ik kan hier geen left en dergelijke gebruiken om dit te corrigeren, omdat er geen relatieve positie meer is. Maar met 'n negatieve marge links krijg ik het pijltje naar links ook op de goede plaats. Het pijltje naar rechts staat nu nog verkeerd, dat corrigeer ik hieronder.

Door dit hier op te geven heb ik geen aparte regel voor a.vorige nodig.

a.volgende

De links met class="volgende": de links met het pijltje naar rechts.

margin-left: 115px;

Binnen span.wrap wordt gecentreerd, dus ook de blokjes met de pijltjes. Ik kan hier geen left en dergelijke gebruiken, omdat er geen relatieve positie meer is. Maar met 'n marge links krijg ik het pijltje naar rechts ook op de goede plaats.

margin-top: -25px;

Omdat a.volgende en a.vorige zijn veranderd in blok-elementen, worden ze op nieuwe regels gezet. De hoogte van de <a>'s is 25 px. Om ze op gelijke hoogte te krijgen moet ik de tweede dus weer 25 px terug omhoog zetten. top kan ik niet gebruiken, want de relatieve positie is veranderd in de standaard statische. Maar 'n negatieve marge bovenaan verplaatst ook naar boven.

a.link span.foto

De span met id="foto" binnen de link met class="link". De span waarbinnen de grote foto staat.

position: relative;

In de algemene css is een position: fixed gegeven aan deze span, maar Internet Explorer 6 kent dat niet. Je kunt dat wel nabootsen via 'n aantal trucs, maar dat werkt hier niet, omdat dan alles met 'n absolute of relatieve positie niet meer kan scrollen. En 'n slideshow met maar één thumb en dus ook maar één grote foto is net even iets te rustgevend.

Ik verander de positie dus in 'n relatieve: de span en dus de daarin zittende foto worden op de normale plaats neergezet en ten opzichte daarvan verplaatst.

Omdat het venster waarbinnen de thumb staat gescrold kan worden, is de exacte positie van de thumb niet bekend. Bij het openen van de pagina staat de eerste thumb bovenaan. Als je dan alleen op de pijltjes klikt, staat elke volgende thumb ook bovenaan. De grote foto's zullen dan steeds op exact dezelfde hoogte openen, omdat die hoogte is gekoppeld aan de hoogte van de thumb.

Maar als je eerst via scrollen 'n thumb halverwege of zo in het venstertje zet, zal de foto iets lager openen omdat de hoogte afhankelijk is van waar de link (waar ook de thumb in staat) precies staat. Geen groot probleem, want latere foto's zullen weer steeds op dezelfde hoogte als de eerste openen. En de afwijking is sowieso niet zo heel erg groot.

top: -90px;

Hiermee komt de foto, ook in de hoogste stand, op voldoende afstand van de bovenkant van het venster van de browser.

div#venster span.wrap a.link img.thumb

De <img>'s met class="thumb" binnen de <a> met class="link" binnen de span met class="wrap", die weer binnen de div met id="venster" staat. Bent u daar nog?

Dit is zo'n lange rij selectors, omdat in de algemene css ook 'n vrij specifieke selector voor de staande thumbs staat, zoals span#t-6 img.thumb. Om die te overrulen moet ik deze selector nog specifieker maken. Dat doe je door meer en/of belangrijkere selectors toe te voegen.

Er bestaan voorrangsregels voor om te berekenen hoeveel selectors, classes, id's, enz. je nodig hebt, maar ik vind 't zelf veel simpeler om 't even uit te proberen. Bovendien werken die voorrangsregels bepaald niet foutloos binnen Internet Explorer 6.

margin: 0;

Omdat de pijltjes boven en niet op de thumbs staan moet de marge bovenaan uit de algemene css weer worden weggehaald.

De staande thumbs hadden in de algemene css 'n marge links gekregen om ze te centreren. Maar dat gebeurt in Internet Explorer 6 op 'n andere manier, dus ook die marges halen we weer weg.

height: 110px;

Om wat voor reden dan ook wordt bij scrollen af en toe (ik heb geen regelmaat kunnen ontdekken) het venstertje met de thumb steeds langer. Dit voorkomt dat. Als je van lachspiegels houdt, kun je dit weglaten.

a.link:hover

Bij hoveren over 'n link met class="link".

width: 1%;

Breedte 1% maken van het ouder-element of, als dat er niet is, van het venster van de browser.

Pardon? Ja, ik kan 't ook niet helpen. Microsoft heeft ooit hasLayout bedacht. Lay-outen in Internet Explorer 6 doet heel erg denken aan 'n vlooiencircus waarvan de hoofdrolspelers net zijn ontsnapt. En hasLayout is de vlooientemmer. De technische uitleg is veel ingewikkelder en deels geheim, maar deze uitleg is beslist niet minder geldig, want volgens mij begrijpen zelfs bij Microsoft nog geen drie mensen wat dit voor ongein is.

In Internet Explorer 7 werkt het weer heel anders, uiteraard. En in Internet Explorer 8 is het helemaal afgeschaft. Heerlijk, die continuïteit van 's werelds grootste sofwareproducent.

Goed, uitgemopperd. Bepaalde instellingen zorgen ervoor dat Internet Explorer 6 hasLayout krijgt (ja, krom Nederlands, maar allemachtig...). En zonder die hasLayout worden foto's niet weergegeven. Het geniale van deze constructie zit er onder andere in dat het weinig uitmaakt wat je invult: 1%, 1px of 'tante Marie'. Nou, dat laatste werkt misschien niet, hoewel soms de meest idiote dingen blijken te werken.

Die 1% daar wordt verder namelijk helemaal niets mee gedaan. Als er maar iets staat. Maar goed ook, want 1% is wel heel erg smal.

Als je meer over hasLayout wilt weten: er zijn tienduizenden pagina's op internet te vinden. Alleen geschikt voor mensen die ook goed tegen griezelfilms kunnen.

a.link:hover span.foto

Bij hoveren over 'n link met class="link", doe dan iets met de spans met class="foto" binnen die link. Dat zijn de spans waar de grote foto's in staan.

width: 1200px; height: 1000px;

Voor alle andere browsers heeft span.foto 'n position: fixed, maar Internet Explorer 6 kent dat niet. Hierboven is de positie veranderd in 'n relatieve, dus top en dergelijke zijn niet te gebruiken. Dan zou ik alleen maar verplaatsen ten opzichte van de originele positie van de span met de foto, maar daarmee heb ik nog geen breedte en hoogte.

Ik geef de span 'n breedte en hoogte die het hele browservenster vult (althans: de meest gebruikte maten), zodat de foto zoveel mogelijk ruimte heeft.

p#titel

De paragraaf met id="titel". De paragraaf met de titel van de slideshow.

position: absolute;

In de algemene css heeft deze paragraaf 'n fixed positie gekregen. Internet Explorer 6 kent dat niet.

top: 220px;

Onder de thumb neerzetten.

p#wrapper-help

De paragraaf waarbinnen het hulpvenster staat.

position: absolute;

Binnen de algemene css heeft deze paragraaf 'n fixed positie gekregen. Internet Explorer 6 kent dat niet.

top: 280px;

Onder de titel neerzetten.

left: 0;

Bij alle andere browsers moet het plaatje met het vraagteken 'n eind verder naar links komen dan bij Internet Explorer 6, dat corrigeer ik hier.

p#wrapper-help a:hover span#help

Doe met de span met id="help" (dat is de span met de tekst van het hulpschermpje), die ligt binnen 'n link waarover wordt gehoverd, die weer binnen de paragraaf met id="wrapper-help" ligt, het volgende:

top: -260px; left: 40px;

Het venstertje met de helptekst is ver linksboven het venster geplaatst. De lay-out is hierboven al opgegeven. Ik hoef het hier alleen maar binnen het venster te zetten en floep: daar staat de helptekst.

p#wrapper-help a:hover

Bij hoveren over 'n link binnen de paragraaf met id="wrapper-help". Dat is de link waarbinnen het plaatje met de vraag en het hele hulpscherm liggen. Zodra het hulpscherm opent geldt dit ook als de cursor boven het hulpscherm hangt, dus het gaat om 'n tamelijk groot gebied.

cursor: pointer;

Omdat dit geen echte link is, moet de cursor niet in 'n handje veranderen. Daarom staat in de algemene css cursor: default;. Maar dat heeft als bijwerking bij Internet Explorer 6 dat de hele pop-up niet meer opent. Tja, dan maar 'n handje. Je kunt met deze dwang om handen te geven zelfs minister worden, dus...

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> html {overflow: hidden;} div#venster {background: url(039-pics/space-1x1.gif);} a.link {text-decoration: none;} p#wrapper-help a:hover {cursor: pointer;} </style> <![endif]-->

Dit wordt alleen door Internet Explorer 7 gelezen. Uitleg bij Speciaal voor Internet Explorer 6.

html overflow: hidden;

Overbodige verticale scrollbar voorkomen. Deze werkt toch niet, ook niet bij te grote foto's. En zelfs bij de grootste lettergrootte in 'n klein browservenster is het hulpscherm nog zichtbaar, dus ook daarvoor is het niet nodig.

Als je 'n externe style gebruikt loop je tegen 'n apart probleem aan bij <html>. Uitleg bij Als je 'n externe...

div#venster

De div met id="venster": de div waar alles in staat, behalve titel en hulpvenster.

background: url(039-pics/space-1x1.gif);

Het scrollen met het scrollwieltje werkt niet als je tussen twee thumbs in hangt. Door een doorzichtig achtergrondplaatje toe te voegen aan deze div, werkt het overal. Het is eigenlijk nog veel vreemder: het werkt ook als ik 'n flauwekul-naam opgeef van 'n niet bestaand plaatje. Voor de zekerheid gebruik ik toch maar 'n echt plaatje, want ik vind dat wel heel vreemd.

a.link

De <a>'s met class="link". Dit zijn de rechtstreekse links naar de grote foto's voor mensen die css uit hebben staan.

text-decoration: none;

Hoewel die links ver buiten het scherm staan, laat Internet Explorer 7 toch 'n heel klein streepje zien. Weg ermee. Je blijft echt van de ene in de andere verbazing rollen met de browsers van Microsoft.

p#wrapper-help a:hover

Bij hoveren over 'n link binnen de paragraaf met id="wrapper-help". Dat is de link waarbinnen het plaatje met het vraagteken en het hele hulpscherm liggen. Zodra het hulpscherm opent, geldt dit ook als de cursor boven het hulpscherm hangt, dus het gaat om 'n tamelijk groot gebied.

cursor: pointer;

Omdat dit geen echte link is, moet de cursor niet in 'n handje veranderen. Daarom staat in de algemene css cursor: default;. Maar dat heeft als bijwerking bij Internet Explorer 7 dat de hele pop-up niet meer opent. Tja, dan maar 'n handje...

Speciaal voor Internet Explorer 8

<!--[if IE 8]> <style type="text/css"> a:focus{}; </style> <![endif]-->

Dit wordt alleen door Internet Explorer 8 gelezen. Uitleg bij Speciaal voor Internet Explorer 6.

a:focus {};

Dit slaat helemaal nergens op. Het moet aan het einde van de css staan, na alle andere css.

In Internet Explorer 8 blijkt een bug te zitten, waardoor in dit voorbeeld alle grote afbeeldingen geopend blijven als je de Tab-toets gebruikt. Kennelijk wordt de focus niet naar de volgende afbeelding verplaatst, wat duidelijk 'n bug is.

Bovendien werkt dit ook als je #het-paard-van-sinterklaas:focus {} gebruikt, wat natuurlijk gewoon genegeerd hoort te worden, omdat er helemaal geen paard van Sinterklaas in dit voorbeeld aanwezig is. Het maakt niet uit wat er voor de :focus {} staat, als dit maar onderaan in de css staat.

Omdat dit overduidelijk 'n bug is, zet ik het apart voor Internet Explorer 8, dan hebben andere browsers er geen last van.

Trouwens 'n gekmakende bug. In het voorbeeld op de site werkte alles goed, maar in de download niet. In de stylesheet die bij het voorbeeld op de site hoort stond namelijk 'n heel eind verder iets wat eindigde op :focus, maar met drie id's ervoor die geen van drieën in dit voorbeeld voorkomen. Dus dat hoort gewoon volkomen genegeerd te worden. Mooi niet dus...

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

Laatste gecontroleerd op 25 oktober 2011.

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

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

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

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

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

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

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

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

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

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

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

Wijzigingen

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

12 september 2008:

Nieuw opgenomen.

24 maart 2009:

Tekst aangepast voor de nieuw verschenen Internet Explorer 8. De code hoefde niet veranderd te worden.

11 april 2009:

Er was toch 'n aanpassing nodig voor Internet Explorer 8. Door een bug daarin bleven - alleen in de download, niet op de site - alle afbeeldingen openstaan als je de Tab-toets gebruikte. Meer bij Speciaal voor Internet Explorer 8.

25 november 2009:

Doctype veranderd in dat voor html 5, zodat 'n negatieve tabindex gebruikt kan worden. Zie verder bij DOCTYPE.

15 november 2010:

Bekende problemen

Alle browsers

Omdat gebruikt wordt gemaakt van position: fixed mogen de foto's niet groter zijn dan het venster van de browser, omdat anders aan de rechterkant en aan de onderkant delen van de foto verdwijnen. Er verschijnt geen scrollbar: het verdwijnt gewoon.

Hoewel Internet Explorer 6 de voordelen van position: fixed niet kent, is Microsoft er gelukkig wel in geslaagd om de nadelen te implementeren in Internet Explorer 6, dus ook hier mag de foto niet te groot zijn.

Opera

Soms blijft de grote foto (gedeeltelijk) geopend. Door de pagina te verversen of door wat te klikken buiten grote foto en thumb komt alles weer in orde. Dit doet zich meestal voor bij klikken op de thumb, maar 'n enkele keer ook bij hoveren.

Internet Explorer 7

Bij zoomen blijft de grote foto even groot en op dezelfde plaats staan. Niets aan te doen, komt door de krakkemikkige manier waarop Microsoft het zoomen heeft geïmplementeerd. Bij inzoomen (vergroten) komen daardoor uiteindelijk dingen uit de linkerkolom over de grote foto heen te staan.

Internet Explorer 6