Skip links en inhoudsopgave

Laatst aangepast: .

Link en antwoord op vraag verbergen onder afbeelding

Korte omschrijving

Bij hoveren over een afbeelding of als de afbeelding focus heeft, verdwijnt de afbeelding en wordt onder de afbeelding staande tekst met 'n link naar meer info zichtbaar.

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

De afbeeldingen en bijbehorende teksten zijn afkomstig van CGFA - A Virtual Art Museum.

Zonder css verschijnen alleen de links met de naam van schilder en schilderij. Afhankelijk van welk programma je gebruikt kan ook de afbeelding verschijnen.

Afhankelijk van programma en instellingen lezen spraakbrowsers en dergelijke de titel van de link en/of de alt-tekst bij de afbeelding en/of de schermtekst (dat is hier de tekst in de link die binnen de span staat) voor.

Normaal genomen is het het beste om een serie links in een <ul> te zetten, met in elke <li> een link. Dit is meestal het makkelijkste. Ook zijn sommige spraakbrowsers en dergelijke in staat om een serie links in zo'n <ul> te herkennen, waardoor de gebruiker ze in één keer kan passeren. In dit geval heb ik dat niet gedaan, omdat het hier niet om een menu gaat, maar om een venstervullend iets.

Opera heeft een fantastische mogelijkheid tot navigeren, waarvan ik niet begrijp dat ze er geen grootscheepse reclame mee maken. Integendeel: het zit diep weggestopt in de hulp. Ik heb 't toevallig ontdekt. Met de Shift-toets plus 'n pijltje kun je tussen onder andere links in elke richting bewegen. Dat geldt ook voor de afbeeldingen in dit voorbeeld.

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

De afbeeldingen zijn in 'n gewone link gezet, die als blok-element met een bepaalde hoogte en breedte wordt weergegeven. Deze links hebben 'n zwarte border en 'n witte achtergrond. Hierdoor ontstaat een raster van witte vierkanten met zwarte randjes.

In elk wit vierkant staat een afbeelding. Bij hoveren of als de link focus heeft of actief is, wordt de afbeelding onzichtbaar gemaakt.

In de link staat ook een span, waarin tekst is gezet. In normale toestand wordt die tekst ver buiten het scherm geparkeerd, bij hoveren of als de link focus heeft of actief is, wordt de tekst op het scherm gezet. En omdat de afbeelding dan onzichtbaar is, is de tekst zichtbaar.

Omdat deze tekst in 'n link zit, is hij onderstreept en gekleurd. Dat is niet erg fraai, daarom wordt de onderstreping weggehaald en de kleur van de tekst gewoon zwart.

Om toch te laten zien dat het om 'n link gaat, is het eerste deel van de tekst - de naam van de schilder - nog 'ns in een eigen geneste span gezet. Hierdoor kun je dat deel van de tekst wel kleuren en onderstrepen. Als de link is bezocht, is het ook dit deel van de tekst dat 'n andere kleur krijgt. Maar dit is alleen gedaan om 'n visuele indicatie te geven dat het om 'n link gaat, want in werkelijkheid maakt het niet uit waar je binnen het witte vierkant klikt. Ook als je naast de tekst klikt, werkt de link.

In plaats van alles in een link te zetten had ik ook alles in een ander element, bijvoorbeeld 'n <li>, kunnen zetten. Maar dan werken in Internet Explorer 6 :focus en :hover niet zonder extra kunstgrepen. En omdat er in dit geval weinig tegen is om 'n link te gebruiken, doe ik dat dan maar.

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 voorbeeld blijft de verandering keurig binnen de link. Dus andere onderdelen van de pagina hebben er geen last van. Daarom gebruik ik hier wel :hover, :focus én :active. Hierdoor werkt het ook voor mensen die de Tab-toets gebruiken om links af te lopen.

Beschrijving van code en css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<style type="text/css">

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

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

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


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

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

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

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

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

font-size: 110%;

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

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

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

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

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

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

color: black;

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

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

background: #ff9;

Achtergrondkleurtje.

h1

De belangrijkste kopregel.

font-family: serif;

Bij zo'n grote letter vind ik 'n letter met schreef (dwarsstreepjes) prettiger lezen. Ik geef geen font op, dus welke letter 't wordt, laat ik aan de browser over. Maar omdat dit zo'n algemene opdracht is, zal elke browser 'n goed leesbare letter kiezen.

text-align: center;

Een blok-element vult automatisch de breedte van zijn ouder of, als die er zoals hier niet is, het venster van de browser. Zet de inhoud van de <h1>, dus de tekst, horizontaal in het midden.

color: #630;

Bruine tekstkleur.

div#content

De div met id="content". De div waar alles in staat. Deze wordt hier alleen gebruikt om de hele handel horizontaal te centreren.

width: 810px;

Om te kunnen centreren op de manier zoals ik gelijk hieronder doe, moet de div een breedte hebben.

810 px is net iets te breed voor 'n 800x600-scherm, maar erg veel valt er niet weg. Eventueel zou je alles iets smaller kunnen maken.

Er is nog een reden waarom een breedte nodig is. De links, en dus de daarin zittende afbeeldingen, worden bij a naar links gefloat. Daardoor vullen ze de regel, tot deze helemaal vol is. Bij bredere browservensters zouden er daardoor meer dan vier afbeeldingen op dezelfde regel komen te staan. Door deze div een breedte te geven waar maar vier links in passen, wordt dat voorkomen.

Er staan vier <a>'s van elk 200 px breed naast elkaar, samen 800 px. Er zijn vijf verticale borders van elk 1 px, samen 5 px. In totaal is de inhoud dus 805 px breed. Ik maak de div 810 px breed, omdat bij uitzoomen (verkleinen) anders de inhoud niet meer in de div past. En omdat de links zijn gefloat, komt de laatste link dan op 'n nieuwe regel te staan.

Bij uitzoomen wordt alles kleiner. Kennelijk wordt door afrondingsverschillen of zo de div soms iets sneller kleiner dan de daarin zittende links, afbeeldingen en borders. Met deze iets grotere breedte gaat 't goed. Dat wil zeggen: je kunt nog steeds afbeeldingen op de volgende regel krijgen, maar dan moet je echt, afhankelijk van de browser, tot 50% of meer uitzoomen.

margin: 0 auto;

Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links. Links en rechts auto oftewel: evenveel. Dus de hele div, en daarmee de inhoud, staat horizontaal gecentreerd. Deze manier van centreren van een blok-element werkt alleen maar als het blok-element een breedte heeft.

a

Alle links.

position: relative;

Om kinderen van de <a>'s te kunnen positioneren ten opzichte van de <a>'s, moeten deze zelf een positie hebben, ook al vul ik daar verder niets in.

display: block;

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

float: left;

Zet het element zo hoog mogelijk en daarna zover mogelijk naar links neer.

Omdat ik van de links een blok-element heb gemaakt, worden deze allemaal op een nieuwe regel gezet. Door ze naar links te floaten voorkom ik dat. Nu worden er net zoveel naast elkaar gezet als op een regel passen. Dat is in dit voorbeeld vier.

width: 200px; height: 200px;

In de link komen onder andere afbeeldingen te staan. Deze hebben allemaal verschillende afmetingen. Door de links zelf 'n hoogte en breedte te geven, wordt de ruimte voor elke afbeelding even groot, ongeacht de grootte van de afbeelding zelf.

border: black solid 1px;

Omdat de links allemaal even groot zijn, krijg ik allemaal even grote vakken als ik de links 'n border geef.

text-align: center;

In de links komen een <img> en tekst te staan. Dit zijn beide inline-elementen en beide kunnen dus op deze manier horizontaal gecentreerd worden.

(In tegenstelling tot wat veel mensen denken is een <img> 'n inline-element, net zoals tekst. Het heeft alleen wat aparte eigenschappen.)

Helaas kan ik alleen de staande afbeeldingen op deze manier centreren. De liggende afbeeldingen centreer ik verticaal bij img#een en verder.

text-decoration: none;

Tekst in een link wordt onderstreept. Dat wil ik hier niet, althans niet álle tekst, want dat maakt het slecht leesbaar. Het deel dat ik wel onderstreept wil hebben, behandel ik bij a span span apart.

color: black;

Tekst in een link krijgt een afwijkende kleur. Hier wil ik gewoon zwarte tekst, omdat het anders slecht leest. 'n Klein deel van de tekst mag wel 'n kleurtje hebben, dat behandel ik bij a span span apart.

background: white;

Witte achtergrond.

div#regel-2 a, div#regel-3 a

De links binnen de div met id="regel-2" en de div met id="regel-3".

De middelste vier links staan in een div met id="regel-2", de onderste vier in 'n div met id="regel-3".

border-top: 0;

De links hebben een border gekregen bij a. Deze haal ik aan de bovenkant van de onderste twee rijen links weg. Anders krijg ik op het grensvlak van twee rijen met links 'n dubbele border: eentje aan de onderkant van de bovenste rij, en eentje aan de bovenkant van de onderste rij. En die twee borders van elk 1 px breed tegen elkaar aan zouden samen 2 px breed worden.

a.kolom-2, a.kolom-3, a.kolom-4

De links met class="kolom-2", class="kolom-3" en class="kolom-4". Dit zijn de links in de tweede, derde en vierde kolom.

border-left: 0;

De links hebben een border gekregen bij a. Deze haal ik aan de linkerkant van de tweede, derde en vierde kolom weg. Anders krijg ik op het grensvlak van twee kolommen met links 'n dubbele border: eentje aan de rechterkant van de linkerkolom, en eentje aan de linkerkant van de rechterkolom. En die twee borders van elk 1 px breed tegen elkaar aan zouden samen 2 px breed worden.

a img

Alle afbeeldingen binnen 'n link.

border: 0;

Een afbeelding binnen een link krijgt automatisch een foeilelijke border. Dat wil ik niet.

img#een {margin-top: 15px;}

t/m

img#elf {margin-top: 44px;}

De liggende afbeeldingen vullen de ruimte verticaal niet helemaal. Daardoor blijft er aan de onderkant een witte ruimte over. Het is mooier als ze verticaal in het midden staan. Om dat te kunnen doen geef ik elke liggende <img> een id.

img#een, de afbeelding linksboven, is 169 px hoog. De link waar de afbeelding in staat is 200 px hoog. Dus er blijft 'n open ruimte van 200 - 169 = 31 px over. Als ik boven 'n marge van 15 px neem, blijft er onderaan 16 px over. Dus de afbeelding staat verticaal vrijwel in het midden.

Alle andere liggende afbeeldingen hebben ook een eigen id: het volgnummer. Alleen de grootte van de marge bovenaan verschilt.

Je zou eventueel ook verticaal kunnen centreren met behulp van line-height. De links zijn 200 px hoog, de regelhoogte zou dan 197 px moeten zijn, omdat er altijd 'n kleine ruimte aan de bovenkant wordt toegevoegd voor letters als h en k, die boven de regel uitsteken.

Als je dan bij a img toevoegt vertical-align: middle;, worden de afbeeldingen verticaal gecentreerd.

In de links staat binnen 'n span tekst, die moet je daar dan weer 'n regelhoogte van 1.2 em geven, de standaard-regelhoogte, omdat die regels anders ook 197 px hoog worden.

Als je nu echter de lettergrootte verandert, staan de afbeeldingen gelijk (ver) uit het midden, en dat ziet er niet fraai uit. Door met margins te werken voorkom ik dat. Nadeel is dat ik voor elke maat 'n aparte margin moet opgeven. Met vertical-align en line-height kan ik volstaan met één regel voor alle afbeeldingen.

Mogelijk zou je 't wel in orde kunnen krijgen als je alle maten gaat veranderen in em, maar dat is bij dit beperkte aantal afbeeldingen beslist veel meer werk dan even handmatig de juiste marges opgeven.

'n Andere mogelijkheid is alle afbeeldingen even groot te maken. Dan kun je met één marge volstaan voor alle liggende afbeeldingen.

a:hover img, a:focus img, a:active img

Als ik over een link hover, of als de link focus heeft of actief is, doe dan iets met de afbeelding binnen die link.

Waarom :focus, :hover en :focus alle drie worden gebruikt, staat bij Alleen :hover of :hover, :focus en :active?

visibility: hidden;

Verberg de afbeelding. Daardoor wordt de eronder zittende tekst zichtbaar.

a span

De spans binnen een link. Binnen elke link zit een span, waarbinnen tekst staat. Deze tekst is normaal genomen niet zichtbaar, omdat de span links buiten het scherm is geparkeerd. Pas als over de link wordt gehoverd of als de link focus heeft of actief is, wordt de tekst zichtbaar.

position: absolute;

Voor de span met tekst staat in de link nog een <img>. Normaal genomen zou de span daarom gewoon achter de <img> worden gezet. Dat is niet de bedoeling. Door hem een absolute positie te geven, kan ik hem neerzetten waar ik wil.

Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een positie heeft. Dat is hier de <a> waar de span in staat.

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

left: -2000px;

Ver links buiten het scherm parkeren. Omdat de span met tekst in de html na de <img> komt, wordt deze over de <img> heen gezet. De tekst zou dus dwars door de afbeelding heen komen te staan. Om dat te voorkomen parkeer ik hem ver links buiten het scherm.

width: 200px;

Bij a heb ik de inhoud van de links horizontaal gecentreerd met text-align: center;. Maar om dat ook binnen de span te laten werken, moet deze een breedte hebben.

Normaal genomen vult een blok-element de breedte van z'n ouder, maar niet als het blok-element absoluut is gepositioneerd, zoals hier. Ik maak de span even breed als de links, zodat de horizontaal gecentreerde tekst netjes in het midden van het witte vierkant staat.

Omdat ik het mooier vind als de naam en de jaartallen op een eigen regel staan, heb ik daarachter een <br /> gezet . Nu worden naam en jaartallen netjes op een eigen regel horizontaal gecentreerd, en de rest van de tekst laat ik aan het toeval over.

padding-top: 15px;

Kleine afstand tussen de tekst en de bovenkant van de link.

cursor: pointer;

Dit is alleen nodig voor Internet Explorer 6 en 7, omdat de cursor anders niet in een handje verandert boven de spans met tekst. Maar de andere browsers hebben er geen last van, dus...

a:hover span, a:focus span, a:active span

Als ik over de link hover, of als deze focus heeft of actief is, doe dan iets met de daarin liggende span.

Waarom :focus, :hover en :focus alle drie worden gebruikt, staat bij Alleen :hover of :hover, :focus en :active?

left: 0;

Alle instellingen voor de tekst in de span zijn al opgegeven bij a span. Daar is de span ook 2000 px links buiten het scherm geparkeerd. Ik hoef hem nu alleen maar op het scherm te zetten om hem zichtbaar te maken.

a span span

De spans binnen een span, die weer binnen een link ligt.>

Bij a heb ik opgegeven dat de tekst in de link gewone zwarte tekst moet zijn, zonder onderstreping, omdat het anders heel vervelend leest. Maar nu is alleen aan het veranderen van de cursor in een handje te zien dat het om een link gaat, en dat is wat weinig.

Daarom staat in de span met de tekst nog een tweede, geneste, span. In deze span staat de naam van de schilder. Door deze naam in een aparte span te zetten, kan ik een klein stukje van de tekst er toch uit laten zien zoals 'n link er normaal genomen uitziet.

position: static;

Bij a span is aan alle spans binnen 'n link 'n absolute positie gegeven. Dat geldt dus ook voor deze spans binnen 'n span, want ook die liggen binnen 'n link.

In eerste instantie wordt de tekst keurig netjes neergezet in het witte vierkant. Eerst de tekst uit deze geneste span, en dan de rest van de tekst uit a span. Maar a span is absoluut gepositioneerd, en deze daarin geneste span ook.

Als ik de lettergrootte ga veranderen, komen ze daardoor over elkaar heen te staan, en de tekst uit beide spans dus ook. Omdat ze absoluut zijn gepositioneerd, trekken ze zich niets van elkaar aan.

Daarom verander ik de absolute positie van de geneste span in 'n gewone statische, de standaardpositie. Nu blijft de tekst gewoon achter en onder elkaar staan.

text-decoration: underline;

Onderstrepen.

color: red;

Rode tekst.

a:visited span span

De spans binnen een span, die weer binnen een link ligt, maar alleen als die link bezocht is. Dit zijn de geneste spans waar de naam van de schilder in staat.

color: green;

Tekst groen maken, zodat te zien is dat deze link al is bezocht.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#content a:hover {background: #fffffe;} </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#content a:hover

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

background: #fffffe;

Verander achtergrondkleur. De achtergrondkleur is normaal genomen wit. De hexadecimale code daarvan is #ffffff (of #fff, wat hetzelfde is). Om een of andere mij duistere reden verdwijnt de afbeelding bij Internet Explorer 6 niet als je erover hovert.

Als je nou de achtergrondkleur iets verandert, werkt het wel. Ongetwijfeld is hier wel ergens op internet 'n verklaring voor te vinden, maar ik vind 't wel best. 't Werkt, en daar gaat het maar om. En ik heb gewoon m'n eigen verklaring: te veel woeste feestjes tijdens het maken van deze browser.

Hexadecimaal kun je 16.772.216 kleuren aangeven. Als je dus één f verandert in een e, is er één tint verschil op die 16.772.216. Iedereen die dat verschil denkt te kunnen zien, moet onmiddellijk naar een topfunctie bij het Nederlands Forensisch Instituut gaan solliciteren. Daar zitten ze vermoedelijk te springen om mensen met zulke fantastische zintuigen. Als je dat niet wilt, is 'n leuke cursus om minder gevoelig te worden voor zelfsuggestie misschien 'n aardig alternatief.

Speciaal voor Internet Explorer 8

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

Deze code geldt alleen voor Internet Explorer 8. Uitleg zie 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 afbeeldingen onzichtbaar blíjven 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, want ik ben bang voor paarden. Ook geen rendier van de Kerstman trouwens. 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 mooi voorbeeld van '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

Laatst gecontroleerd op 13 februari 2012.

(Internet Explorer 6 is voor het laatst gecontroleerd op 7 oktober 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.

Er is getest met behulp van muis en toetsenbord.

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

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

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld mobiele systemen als iOS of Android, en ook niet op apparaten als smartphones, iPad, enz. De kans is heel erg groot dat dit voorbeeld niet (volledig) werkt op dat soort systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen.

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.

7 oktober 2009:

Nieuw opgenomen.

3 maart 2011:

13 februari 2012:

Bekende problemen

Safari en Firefox

Als de letters meer dan 140% worden vergroot, valt bij de meeste afbeeldingen een deel van de tekst weg onder de eronder staande afbeelding. Bij zoomen speelt dit niet, alleen bij een grotere lettergrootte.