Skip links en inhoudsopgave

Uitleg css-imagemap: thumbnail met pop-ups met voorvertoning en extra informatie

Laatst aangepast: .

Bij hoveren over de thumbnail links verschijnt recths een vergroting met uitleg

Dit voorbeeld is verouderd

Dit voorbeeld werkt helemaal niet of niet goed op touchscreens. De in dit voorbeeld gebruikte technieken zijn grotendeels volstrekt verouderd. Dit geldt ook voor grote delen van de meer algemene teksten over zoekmachines, toegankelijkheid, en dergelijke.

Normaal genomen wordt een voorbeeld vroeger of later geüpdatet. In dit geval kan dat niet, omdat dit voorbeeld stomweg ongeschikt is voor welk touchscreen dan ook. De kern van het voorbeeld is een kleine thumbnail, waarover je kunt hoveren. Het deel waarover je hovert, wordt dan vergroot en met uitleg weergegeven.

Dat hoveren gaat prima met een muis, maar het is volstrekt onmogelijk om met een vinger een heel klein plekje op een thumbnail aan te raken. Daarom is dit voorbeeld niet aan te passen.

Omdat het, toen het werd gemaakt, best wel leuk werkte, blijft het gewoon op de site staan. Maar de gebruikte techniek is dus echt volstrekt achterhaald.

Los van de verouderde code kunnen ook de overige teksten in deze uitleg, zoals die over toegankelijkheid, (sterk) verouderd zijn.

Korte omschrijving

De thumbnail is (onzichtbaar) in heel veel stukjes opgedeeld. Achter elk stukje kan een link naar een aparte pagina worden gestopt, vandaar de naam 'css-imagemap'.

Zodra je met de cursor boven de thumbnail komt, wordt het onderdeel waar je boven hangt omkaderd met een rood lijntje en verschijnt er een beschrijving van dat onderdeel onder de thumbnail.

Omdat de thumbnail nogal klein is, opent tegelijkertijd een grotere weergave van de thumbnail, waarop hetzelfde onderdeel rood is omkaderd.

De kadertjes kunnen elke vorm hebben, maar moeten wel rechte lijnen vormen. Achter elk deeltje kan een link naar 'n aparte pagina worden gestopt.

BELANGRIJK

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 ontbreekt bijvoorbeeld de navigatie voor de site. 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, kun je bovenaan de pagina de hele handel downloaden. In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

Alles op deze site kan vrij worden gebruikt, met drie 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.

* Het kan zijn dat materiaal is gebruikt dat van anderen afkomstig is. Dat materiaal kan onder een bepaalde licentie vallen, waardoor het mogelijk niet onbeperkt gebruikt mag worden. Als dat zo is, wordt dat vermeld onder Inhoud van de download en licenties.

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

Alle code is geschreven in een afwijkende lettersoort en -kleur. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg onderstippeld blauw. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles vanwege de leesbaarheid in een gewone letter.)

Opmerkingen

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

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Komodo Edit, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

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

Achterliggend idee

De thumbnail is opgedeeld in 33 verschillende vakjes, waaronder heel kleine. In de praktijk is dit te klein om bruikbaar te zijn, maar dit is bedoeld als voorbeeld.

Als je over zo'n vakje van de thumbnail hovert, opent er een grotere afbeelding. Op thumbnail en grotere afbeelding wordt het vakje (of de vakjes) met een rood lijntje afgebakend en er verschijnt een omschrijving. Eventueel kun je door op het vakje te klikken naar een achterliggende pagina gaan, die bij elk vakje anders kan zijn.

Deze hele constructie valt eigenlijk in 'n aantal onderdelen uiteen.

De kaders zijn gewoon borders die horen bij een span, die als blok-element wordt weergegeven. Op die manier kan ik echter alleen maar rechthoeken en vierkanten weergeven. Bij de Latijnse tekst heb ik een anders soort kader nodig, want die is niet rechthoekig. Daar gebruik ik drie spans, die aan elkaar grenzen. Niet alle kanten van die spans hebben 'n border, anders zou de rode lijn dwars door de tekst lopen.

Hierdoor vallen er wel gaten in het kader op de plaatsen waar geen border is. Deze vul ik op met spans die maar aan één kant een border van 1 px breed krijgen.

De lege achtergrond links en rechts en de kleine thumbnails zitten verspreid over twee plaatsen. Elke plaats heeft een eigen link, maar de kadertjes die worden weergegeven zijn gewoon precies hetzelfde. Daarom heb ik classes gebruikt in plaats van id's.

De sluitknoppen links en rechts beneden zijn zo klein, dat ik niet twee borders kan gebruiken. De totale breedte is 2 px, en omdat de span minimaal 1 px breed moet zijn, zou dat 3 px opleveren: 1 te veel. Daarom gebruik ik daar 'n border aan één kant van 2 px breed.

Met behulp van dit soort trucs zou je zelfs 'n cirkel kunnen afdekken.

De links, dus de blokjes waarin de thumbnail is opgedeeld, moeten goed op elkaar aansluiten, anders kom je op de 'algemene' thumbnail terecht. Opera en Firefox (en inmiddels alle browsers) hebben 'n goede zoom-functie die hiervoor heel bruikbaar is, omdat ook de afbeelding wordt vergroot.

Ik heb alleen de 'algemene' thumbnail 'n normaal nummer gegeven bij tabindex, alle andere links die bij de thumbnail horen hebben allemaal -1. Als mensen dan door de links heen gaan met de Tab-toets, zijn ze niet gedwongen alle 32 sub-links binnen de thumbnail door te lopen met de Tab-toets. Links met tabindex="-1" worden volledig genegeerd bij gebruik van de Tab-toets.

Zonder css zou de tekst binnen de links als één lange regel worden weergegeven. Om dat te voorkomen staat aan het eind van elke span.klik-hier een <br>.

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 uitstaat, ontbreekt of onvolledig is geïmplementeerd.

* 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

Omdat de afbeelding die tevoorschijn komt als je over 'n link hovert de rest van de pagina bedekt, gebruik ik hier geen :focus en :active. Als de informatie op de afbeelding ook van belang kan zijn voor mensen die de afbeelding niet kunnen zien, zul je 'n alternatieve pagina moeten maken voor die mensen.

Hier is bij de links binnen de thumb tabindex="-1" gebruikt. Daardoor worden de links bij gebruik van de Tab-toets volledig genegeerd en kunnen ze dus nooit op die manier focus krijgen. Ook dit maakt het gebruik van :focus hier redelijk zinloos.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een schermlezer 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 5 september 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 2 september 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 en 1280x1024. 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 en 1280x1024 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 staan bij Bekende problemen (en oplossingen).

Naast deze 'gewone' browsers is alles ook getest in Lynx, WebbIE en Jaws. 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 schermlezer, zoals die door blinden wordt gebruikt. Als het voorbeeld in deze drie 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.

(Opmerking 22 juni 2017: in Jaws wordt niet meer getest, omdat de licentie dit expliciet verbied. Tegenwoordig wordt getest in de minstens even goede open source schermlezer NVDA.)

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

In de algemene teksten (op de pagina's met menu's) wordt een browser pas genoemd als zijnde getest als die in alle voorbeelden is getest.

Wijzigingen

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

:

Nieuw opgenomen.

4 augustus 2008:

21 maart 2009:

Tekst aangepast voor de nieuwe Internet Explorer 8. Code hoefde niet gewijzigd te worden.

1 oktober 2010

31 januari 2011:

Op de site was het voor dit voorbeeld het doctype voor html5 gebruikt. In de download was nog het doctype voor xhtml 1.0 gebruikt. Omdat het doctype voor html5 inmiddels veilig gebruikt kan worden, heeft ook de download nu dit doctype.

Waar nodig is de tekst aangepast.

In de download kan hierdoor nu ook tabindex="-1" worden gebruikt bij de links binnen de thumbnail, zodat deze nu worden genegeerd bij gebruik van de Tab-toets om van link naar link te gaan.

Het voorbeeld in de download en het voorbeeld op de site zijn nu dus vrijwel hetzelfde (op de site staan nog navigatieblokken en dergelijke, die in de download niet nodig zijn).

5 september 2011:

top: -1400px; bij a.span.img veranderd in top: -1800px;, omdat bij een heel grote letter de onderschriften onder de thumbnail op het scherm kwamen te staan.

22 juni 2017:

Bekende problemen (en oplossingen)

Alle browsers

  • Dit voorbeeld wordt niet meer bijgewerkt. Het werkt niet (goed) op touchscreens. Meer details zijn te vinden bij Dit voorbeeld is verouderd.
  • Deze pop-up neemt veel meer ruimte in beslag dan je zou denken wanneer je de grote afbeelding ziet. Ook al staat alles boven het scherm geparkeerd, het neemt toch ruimte in beslag. En omdat het nog niet volledig is opgemaakt als het onzichtbaar is, neemt het dan veel meer ruimte in beslag dan de uiteindelijke pop-up. Als je bij a span.img even top: -1800px weghaalt, zie je hoe groot de nog onzichtbare pop-up is. Dat kan helpen bij het oplossen van onderstaande problemen.
  • Er verschijnt een horizontale scrollbalk terwijl dat niet nodig is.

    Oorzaak: de onzichtbare pop-up is te breed voor de pagina. Aan de linkerkant is dat geen probleem omdat je position hebt gebruikt, maar aan de rechterkant wel, want daardoor verschijnt dus gewoon 'n horizontale scrollbalk. Dat gebeurt soms ook als de pop-up nog onzichtbaar is.

    Oplossing: maak de pop-up smaller en/of verplaats hem meer naar links.

  • Er verschijnt een verticale scrollbalk terwijl dat niet nodig is.

    Oorzaak: de onzichtbare pop-up staat lager dan de pagina en past niet op het scherm, dus verschijnt er een verticale scrollbalk. Dat gebeurt soms ook als de pop-up nog onzichtbaar is, en ook als de pop-up links buiten het scherm is neergezet.

    Oplossing: zet de pop-up hoger neer, zodat ze altijd binnen het scherm past. Als de pop-up dan nog niet zichtbaar is omdat ze links buiten het scherm is geparkeerd, moet je de waarde bij left even veranderen, zodat de pop-up op het scherm komt te staan en je kunt zien op welke hoogte hij staat.

Internet Explorer 7

Bij uitzoomen (verkleinen) verdwijnen delen van het onderschrift onder de thumbnail onder elkaar. De rode lijntjes staan ook niet meer op de juiste plaats. Bij inzoomen en alleen de lettergrootte veranderen gaat het wel goed. 'n Fout in de zoomfunctie van Internet Explorer 7, waar verder weinig aan is te doen, vrees ik. In Internet Explorer 8 speelt dit probleem niet, omdat de zoomfunctie veel beter is.

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van 'n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

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

* Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn 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.

afbeelding-025-dl.html: de pagina met het voorbeeld.

afbeelding-025.pdf: deze uitleg (aangepast aan de inhoud van de download).

afbeelding-025-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

025-files-dl:

afbeelding-025-x-dl: pagina achter de thumbnail.

025-pics:

de twee gebruikte afbeeldingen.

Beschrijving van code en css

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg onderstippeld blauw. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Zaken als een doctype en charset hebben soms wat voor veel mensen onbekende effecten, dus daarover wordt hieronder wel een en ander geschreven.

<!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 html5. Dit kan al veilig worden gebruikt.

<meta charset="utf-8">

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

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

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

<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css">

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

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

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

<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 dat 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 p {
            margin-left: 16px;
            height: 120section
            text-align: center;
        }

body

margin: 0; border: 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;

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.

background: #ff9;

Kleurtje aan de achtergrond geven.

div#content

De div met id="content". Dit is de div waar alles in staat, zodat de hele pagina gecentreerd kan worden.

width: 770px;

Breedte. 770px past ook nog op een 800x600-scherm.

margin: 0 auto;

Omdat geen waarde is opgegeven voor onder en links, krijgen deze dezelfde waarde als boven en rechts. Hier staat dus eigenlijk margin: 0 auto 0 auto in de volgorde boven - rechts - onder - links. 0 aan de boven- en onderkant, en auto links en rechts.

auto zorgt ervoor dat links en rechts evenveel ruimte komt, oftewel: horizontaal gecentreerd. Deze manier van centreren werkt alleen maar bij blok-elementen met 'n breedte.

p

Alle paragrafen.

margin: 0;

Een paragraaf heeft boven- en onderaan van zichzelf een marge, dat wil ik hier niet.

div#wrapper

De div met id="wrapper".

Om de thumb en alle links heen zet ik 'n overkoepelende div. Dan kan ik de hele handel op een tamelijk eenvoudige wijze instellen ten opzichte van de rest van de pagina.

position: relative;

Alleen nodig zodat ik elementen hierbinnen kan positioneren ten opzichte van deze div. Daarvoor moet deze div zelf 'n position hebben, ook al vul ik daar verder helemaal niets in.

float: left;

Zet zo hoog mogelijk neer en dan zo ver mogelijk naar links. Nu loopt de tekst gewoon door naast de div.

width: 200px;

Dit zou niet nodig moeten zijn. Omdat deze div naar links wordt gefloat, moet de inhoud van de op deze div volgende elementen aan de rechterkant van de inhoud van deze div komen te staan.

Hier zou dus de Latijnse tekst die volgt op de imagemap naast de thumb moeten worden gezet.

In alle browsers wordt die Latijnse tekst ook netjes naast de thumb gezet, behalve in recente versies van Opera. Daar wordt hij foutief onder de thumb gezet.

Door een breedte te geven aan deze div, wordt ook in Opera de Latijnse tekst naast de thumb gezet in plaats van eronder.

Aanvulling 5 september 2011: in nóg recentere versies speelt dit probleem niet meer. Maar omdat deze regel verder geen problemen veroorzaakt, laat ik hem maar gewoon staan.

padding: 10px 10px 10px 0;

Ruimte tussen de tekst en de div, en dus tussen de tekst en de in deze div staande thumbnail. Dit wordt gelezen in de volgorde boven - rechts - onder - links.

div#wrapper a

Alle links binnen de div met id="wrapper".

float: left;

Zet de link zo hoog mogelijk en dan zo ver mogelijk naar links.

Van zichzelf is 'n <a> 'n inline-element. Door het gebruik van float verandert het in een blok-element en kan ik attributen als breedte gebruiken.

Deze opdracht betekent dat alle links naast elkaar worden gezet, over de volle breedte van de pagina, terwijl ik ze alleen maar bovenop de thumbnail wil hebben. Daarom ga ik later per link de plaats precies aangeven met behulp van margin. Omdat bij float: left elk element eerst zo hoog mogelijk wordt neergezet en dan zover mogelijk naar links, kan ik op deze manier ook makkelijk 'n hele serie links op één regel naast elkaar zetten.

width: 200px; height: 160px;

Dit is de grootte van de thumbnail. De links voor de kleinere vakjes krijgen later een eigen, afwijkende breedte en hoogte.

text-decoration: none;

Ik wil hier geen onderstrepingen in de tekst van de link hebben.

color: black;

En gewoon een zwarte tekstkleur binnen de link.

div#wrapper a#nr-001

De link met id="nr-001" binnen de div met id="wrapper". Dit is de eerste link binnen div#wrapper.

background: url(025-pics/017-t.jpg);

Zet de thumbnail binnen deze link neer als background-image. Omdat alle andere links die hier later overheen worden gezet doorzichtig zijn, blijft de thumbnail altijd zichtbaar. En door hem als background-image in de css op te nemen, voorkom ik dat ik hem 33 keer (bij elke link) in de html als gewone image neer moet zetten. Wat veel ingewikkelder is en ook veel meer code kost. En zonder css zou je de thumb 33 keer zien...

Hierboven is voor elke link als breedte 200 px en als hoogte 180 px opgegeven. Daardoor zal deze link de volledige thumbnail beslaan. Elke opening die de links hieronder open laten zal dus gevuld worden door deze link, waarmee het 'n soort vangnet is voor 'gaten' tussen de andere links hieronder.

div#wrapper a#nr-002

De link met id="nr-002" binnen de div met id="wrapper". Dit is de tweede link, deze hoort bij de titelbalk van Firefox.

width: 180px; height: 4px;

Deze link moet maar 180 px breed zijn, want rechts ervan komt nog 'n andere, kleinere. Met deze breedte en 'n hoogte van 4 px dekt hij de titelbalk op de thumbnail, waardoor bij hoveren over de titelbalk dus de inhoud van de spans bij deze link wordt weergegeven.

margin: 0 0 0 -200px;

Dit wordt gelezen in de volgorde boven - rechts - onder - links. Aan de bovenkant van de thumb neerzetten.

Omdat hierboven float: left is opgegeven, zou deze link naast de eerste link worden gezet. Die eerste link is 200 px breed, even breed als de thumbnail, dus deze link zou naast de thumbnail komen te staan in plaats van eroverheen. Om dit te voorkomen geef ik hem 'n negatieve marge links van 200 px, waardoor hij precies over de thumbnail heen komt te staan.

div#wrapper a#nr-003

De link met id="nr-003" binnen de div met id="wrapper". Deze hoort bij knoppen om Firefox te maximaliseren, minimaliseren of af te sluiten.

width: 20px; height: 4px;

Deze link komt aan de rechterkant van de tweede link te staan en moet maar 20 px breed zijn, omdat hij maar 'n klein stukje hoeft te bestrijken. Net als de buurman links 4 px hoog.

margin: 0 0 0 -20px;

Dit wordt gelezen in de volgorde boven - rechts - onder - links. Ook aan de bovenkant van de thumbnail neerzetten.

Omdat deze link, net als alle links, naar links wordt gefloat, wordt hij eerst zo hoog mogelijk gezet, dus helemaal tot de bovenkant van de thumbnail, en dan naar links gezet. Waarmee hij dus links naast de eerste link, oftewel: links van de thumbnail komt te staan.

Daarom geef ik hem een negatieve linkermarge van 20 px. Als hij dan zo hoog mogelijk wordt neergezet door de float komt hij niet naast, maar over de eerste link, oftewel de thumbnail, te staan, en sluit precies tegen z'n buurman aan.

div#wrapper a#nr-004

De link met id="nr-004" binnen de div met id="wrapper". De link die hoort bij het menu van Firefox. (Voor ik antireclame ga maken: Firefox heeft standaard ook 'n hele serie knoppen, net zoals Internet Explorer, maar die heb ik weggehaald omdat ik sneltoetsen veel makkelijker vind.)

width: 180px; height: 4px;

Menubalk van Firefox afdekken.

margin: 4px 0 0 -200px;

Dit wordt gelezen in de volgorde boven - rechts - onder - links.

Omdat ik alle links naar links float, zou deze link naast de vorige link worden neergezet, terwijl ik hem op 'n nieuwe regel wil hebben. Door 'n bovenmarge van 4 px te geven, komt hij onder de regel met links erboven te staan. En om 'm aan 't begin van die regel te krijgen moet ik weer 'n negatieve linkermarge van 200 px geven.

div#wrapper a#nr-005

De link met id="nr-005" binnen de div met id="wrapper". De link die hoort bij aantal geopende tabs en dergelijke van Firefox.

width: 20px; height: 4px; margin: 4px 0 0 -20px;

Als link nr-003, maar 4 px vanaf de bovenkant omdat hij op de tweede regel moet komen te staan.

div#wrapper a#nr-006

De link met id="nr-006" binnen de div met id="wrapper". De link die hoort bij de locatiebalk van Firefox.

width: 150px; height: 4px;

Dit dekt de locatiebalk op de thumbnail af.

margin: 8px 0 0 -200px;

Deze moet op de derde regel komen te staan: 8 px vanaf de bovenkant. En weer 200 px naar links, anders komt hij naast de thumbnail te staan in plaats van eroverheen.

div#wrapper a#nr-007

De link met id="nr-007" binnen de div met id="wrapper". De link die hoort bij het zoekvak van Firefox.

width: 50px; height: 4px;

Dekt het zoekvak op de thumbnail af.

margin: 8px 0 0 -50px;

Als link nr-003, maar 8 px vanaf de bovenkant omdat hij op de tweede regel moet komen te staan, en 50 px naar links om aan te sluiten op nr-006.

div#wrapper a#nr-008

De link met id="nr-008" binnen de div met id="wrapper". De link die hoort bij Web Developer Toolbar, een onmisbare extensie bij Firefox als je sites maakt.

width: 200px; height: 5px;

Dekt de toolbar op de thumbnail af.

margin: 12px 0 0 -200px;

12 px vanaf de bovenkant, de derde regel. En weer 200 px naar links omdat hij anders buiten de thumbnail komt te staan.

div#wrapper a#nr-009

De link met id="nr-009" binnen de div met id="wrapper". Link die hoort bij de tabbalk van Firefox.

width: 200px; height: 5px; margin: 17px 0 0 -200px;

Als nr-008, maar op de vierde regel: 17 px vanaf de bovenkant.

div#wrapper a#nr-010

De link met id="nr-010" binnen de div met id="wrapper".

Deze link hoort bij de Latijnse opvultekst. Deze tekst is geen aaneensluitend vierkant of rechthoek, dus ik kan niet 'n simpel blok-element met border gebruiken om de tekst met 'n rood kadertje te omsluiten. Daarom gebruik ik hier drie blokken, die samen de hele tekst bestrijken.

Bij alle drie de blokken wordt hetzelfde kader weergegeven, zodat het één grote, niet-rechthoekige link lijkt. Dat het in werkelijkheid om drie verschillende links gaat maakt niets uit.

Het weergeven van de kaders is nog iets ingewikkelder, zie daarvoor bij .kader-10.

width: 89px; height: 40px;

Dit dekt het deel van de Latijnse tekst boven de grote afbeelding in het midden.

margin: 22px 0 0 -163px;

De tekst begint 22 px van de bovenkant van de thumbnail. 163 px naar links zetten, daar begint de Latijnse tekst (naast de lege achtergrond).

div#wrapper a#nr-010a

De link met id="nr-010a" binnen de div met id="wrapper". Dit is de tweede link die bij de Latijnse tekst hoort.

width: 46px; height: 62px;

Dit bestrijkt de Latijnse tekst links van de grote afbeelding.

margin: 62px 0 0 -163px;

Deze link moet aansluiten op nr-010, die ook bij de Latijnse tekst hoort. Met 'n bovenmarge van 62 px doet hij dat. 163 px naar links zetten, daar begint de Latijnse tekst (naast de lege achtergrond).

div#wrapper a#nr-010b

De link met id="nr-010b" binnen de div met id="wrapper". De derde link bij de Latijnse tekst.

width: 89px; height: 23px;

Dit bestrijkt de Latijnse tekst onder de grote afbeelding.

margin: 122px 0 0 -163px;

Deze link moet aansluiten op nr-010a, die ook bij de Latijnse tekst hoort. Met 'n bovenmarge van 122 px doet hij dat. 163 px naar links zetten, daar begint de Latijnse tekst (naast de lege achtergrond).

div#wrapper a#nr-011

De link met id="nr-011" binnen de div met id="wrapper".

Deze link hoort bij de bovenste thumbnail. Er zijn twee thumbnails, die beide dezelfde beschrijving hebben, en die beide omkaderd worden als je over een van de twee hovert. Dat kun je simpel bereiken door twee links te maken, eentje voor elke thumbnail, die beide precies hetzelfde kader weergeven. Zie voor het kader bij .kader-11.

width: 34px; height: 40px;

Dit bestrijkt de bovenste thumbnail op de thumbnail (dit gaat 'n beetje op wartaal lijken, maar ik bedoel dus 't kleine plaatje rechtsboven op de thumbnail).

margin: 22px 0 0 -74px;

22 px vanaf de bovenkant en 74 px naar links plaatsen, dan dekt hij de bovenste thumbnail precies af.

div#wrapper a#nr-011a

De link met id="nr-011a" binnen de div met id="wrapper". Deze link hoort bij de onderste thumbnail.

width: 34px; height: 23px; margin: 122px 0 0 -74px;

Beschrijving zie bij nr-011.

div#wrapper a#nr-012

De link met id="nr-012" binnen de div met id="wrapper". De link die hoort bij de grote afbeelding in het midden.

width: 77px; height: 60px;

Dit dekt de grote afbeelding af.

margin: 62px 0 0 -117px;

62 px vanaf de bovenkant. 117 px naar links verplaatsen, anders staat hij buiten de thumbnail vanwege het naar links floaten.

div#wrapper a#nr-013

De link met id="nr-013" binnen de div met id="wrapper". De link die hoort bij de verticale scrollbar van Firefox.

width: 4px; height: 123px;

Dit dekt de verticale scrollbar af.

margin: 22px 0 0 -4px;

De scrollbar begint 22 px vanaf de bovenkant en staat helemaal rechts op de thumbnail. Omdat de link 4 px breed is moet hij dus 4 px naar links worden verplaatst, anders staat hij niet op maar naast de thumbnail vanwege het naar links floaten.

div#wrapper a#nr-014

De link met id="nr-014" binnen de div met id="wrapper". De link die hoort bij de horizontale scrollbar van Firefox.

width: 200px; height: 3px;

Dit dekt de horizontale scrollbar af.

margin: 145px 0 0 -200px;

145 px vanaf de bovenkant. De horizontale scrollbar is even breed als de hele thumbnail (200 px), dus 200 px naar links plaatsen, anders staat hij niet op maar naast de thumbnail vanwege het naar links floaten.

div#wrapper a#nr-015

De link met id="nr-015" binnen de div met id="wrapper". MeasureIt: een extensie bij Firefox, waarmee je een schermlineaal op het scherm kunt zetten.

width: 7px; height: 3px;

Dit dekt het icoontje van MeasureIt af.

margin: 148px 0 0 -200px;

148 px vanaf de bovenkant. Dit is de eerste extensie op deze regel, dus helemaal naar links zetten: 200 px.

div#wrapper a#nr-016

{width: 133px; height: 3px; margin: 148px 0 0 -193px;}

Statusbalk Firefox.

div#wrapper a#nr-017

{width: 5px; height: 3px; margin: 148px 0 0 -60px;}

Extensie CS Lite Firefox.

div#wrapper a#nr-018

{width: 3px; height: 3px; margin: 148px 0 0 -55px;}

Extensie PopupMaster Firefox.

div#wrapper a#nr-019

{width: 3px; height: 3px; margin: 148px 0 0 -52px;}

Extensie NoScript Firefox.

div#wrapper a#nr-020

{width: 13px; height: 3px; margin: 148px 0 0 -49px;}

Extensie NoSquint Firefox.

div#wrapper a#nr-021

{width: 15px; height: 3px; margin: 148px 0 0 -36px;}

Extensie Mouseless Browsing Firefox.

div#wrapper a#nr-022

{width: 4px; height: 3px; margin: 148px 0 0 -21px;}

Extensie HTML Validator Firefox.

div#wrapper a#nr-023

{width: 6px; height: 3px; margin: 148px 0 0 -17px;}

Extensie Greasemonkey Firefox.

div#wrapper a#nr-024

{width: 7px; height: 3px; margin: 148px 0 0 -11px;}

Extensie Firebug Firefox.

div#wrapper a#nr-025

{width: 4px; height: 3px; margin: 148px 0 0 -4px;}

Extensie Update Notifier Firefox.

Al deze links staan op dezelfde regel: 148 px vanaf de bovenkant. Ze zijn ook allemaal 3 px hoog. Het enige wat verschilt is de breedte en hoe ver ze naar links moeten worden gezet om aan te sluiten op hun buurman.

div#wrapper a#nr-026

De link met id="nr-026" binnen de div met id="wrapper". Hoort bij de linkersluitknop van de taakbalk van Firefox. Omdat er twee sluitknoppen zijn, staat hier gelijk onder de code die bij de rechtersluitknop hoort.

width: 2px; height: 9px;

Dit dekt de sluitknop af.

margin: 151px 0 0 -200px;

151 px vanaf de bovenkant van de thumbnail, en helemaal links zetten.

div#wrapper a#nr-026a

{width: 2px; height: 9px; margin: 151px 0 0 -2px;}

De link met id="nr-026a" binnen de div met id="wrapper".

Hoort bij de rechtersluitknop van de taakbalk van Firefox. Voor de uitleg zie hierboven, maar deze staat maar 2 px naar rechts.

div#wrapper a#nr-027

{width: 9px; height: 9px; margin: 151px 0 0 -198px;}

K Menu KDE, vergelijkbaar met Start bij Windows.

div#wrapper a#nr-028

{width: 120px; height: 9px; margin: 151px 0 0 -189px;}

Draaiende programma's KDE.

div#wrapper a#nr-029

{width: 23px; height: 9px; margin: 151px 0 0 -69px;}

Applets (kleine programmaatjes) KDE.

div#wrapper a#nr-030

{width: 8px; height: 9px; margin: 151px 0 0 -46px;}

Toetsenbord-status-applet KDE.

div#wrapper a#nr-031

{width: 18px; height: 9px; margin: 151px 0 0 -38px;}

Pager KDE.

div#wrapper a#nr-032

{width: 10px; height: 9px; margin: 151px 0 0 -20px;}

Klok KDE.

div#wrapper a#nr-033

{width: 8px; height: 9px; margin: 151px 0 0 -10px;}

Prullenmand KDE.

Al deze links staan 151 px vanaf de bovenkant van de thumbnail en zijn 9 px hoog. De breedte is afhankelijk van waar ze boven staan. Ze worden steeds zover naar links geplaatst, dat ze aansluiten op hun buurman.

a span.img

De spans met class="img" binnen een link. Dit zijn de spans waarbinnen alle andere spans - en dus de pop-ups - staan.

position: absolute;

Om hem op de goede plaats neer te kunnen zetten. Ik had dit liever iets verderop bij a:hover span.img neergezet, omdat ik dat duidelijker vind, maar dan negeert Internet Explorer 6 het. Hier pakt hij het wel op om een of andere reden.

Er wordt gepositioneerd ten opzichte van de eerste voorder met een positie, dat is hier div#wrapper.

top: -1800px;

In onzichtbare toestand moet de span, en dus de inhoud, buiten het venster van de browser worden geparkeerd. De reden staat bij Bekende problemen (en oplossingen).

a span.img-header

De spans met class="img-header" binnen een link.

Hierin staat de titel die boven de grote afbeelding verschijnt. Omdat deze span binnen span.img staat, wordt hij samen daarmee zichtbaar en onzichtbaar.

display: block;

Een eind hierboven staat onder andere div#wrapper a {float: left;}, waarmee alle <a>'s binnen div#wrapper in een blok-element zijn veranderd. Maar een float maakt toch niet een volledig normaal blok-element. Ongeacht de breedte die ik hier namelijk opgeef, wordt het volgende element dat ik naar links float (span.venster) gelijk naast de inhoud van span.img-header neergezet. Ik ben dan dus ook de witte achtergrond van span.img-header kwijt. Om dit te voorkomen maak ik hier van deze span een volledig blok-element.

width: 550px;

Even breed als de afbeelding is.

height: 34px;

Dit is een goede hoogte voor de titel.

background: white;

Witte achtergrond voor de leesbaarheid.

text-align: center;

Tekst horizontaal in het midden zetten.

font-size: 20pt;

En een tamelijk grote letter nemen. Ik gebruik hier geen em als eenheid (de enige maat die Internet Explorer kan vergroten en verkleinen), omdat deze letters groot zat zijn en niet vergroot hoeven te worden. Vergroten zou ook de lay-out om zeep kunnen helpen.

a:hover

Als ik met de cursor boven 'n link hang. In dit geval bestrijkt dit de hele thumbnail.

cursor: pointer;

Verander de cursor in het handje wat bij 'n link hoort. Niet elke browser doet dit boven de hele thumbnail, en op deze manier doen ze dat wel.

a:hover span.img

Als ik boven een link hover, doe dan het volgende met de daarin liggende spans met class="img". Dit zijn de spans waarbinnen de pop-ups met bijbehorende titels en dergelijke staan.

left: 210px; top: 10px;

210 px vanaf de linkerkant en 10 px vanaf de bovenkant. Dit positioneren gebeurt ten opzicht van het eerste ouder-element dat zelf een positie heeft. Dat is hier div#wrapper.

width: 550px;

Breedte van de afbeelding.

height: 472px;

Hoogte van de afbeelding plus de hoogte van de titel boven de afbeelding die in span.img-header staat (34 px).

border: black solid 3px;

Voor de duidelijkheid 'n zwart randje rondom de afbeelding.

background: url(025-pics/017.jpg) bottom;

De grote afbeelding weergeven als background-image. Omdat de span hoger is dan de afbeelding door de titel die nog boven de afbeelding komt, moet bottom worden toegevoegd, anders wordt de afbeelding bovenaan in de span gezet en zal het bovenste deel verdwijnen achter de titel.

span.venster

De spans met class="venster". In deze span staat de toelichtende tekst bij elke link.

Anders dan in de eerste versie wordt nu geen hoogte meer opgegeven. Hierdoor wordt de div vanzelf precies hoog genoeg om alle tekst erin te laten passen.

(Grinnik: de vorige versie was ietwat sadistisch. Als de letters werden vergroot, paste niet altijd meer alle tekst in het daarvoor bestemde vak. Er verscheen weliswaar een scrollbar, maar om daar te komen moest je de cursor bewegen. En daarbij kwam de cursor dus altijd als laatste over een van de buitenste delen van de thumbnail. Waarop dus prompt de bij dat buitenste deel horende tekst verscheen... Excuses.)

position: absolute;

Om de tekst op de goede plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een positie heeft, dat is hier span.img.

left: -212px;

Als ik deze span en dus de daarin zittende tekst 212 px naar links verplaats, staat de linkerkant precies gelijk met de linkerkant van de thumbnail.

width: 190px;

De thumbnail is 200 px breed. Deze span krijgt links en rechts nog een padding van 3 px en een border van 1 px. dus het totaal wordt 1 + 3 + 190 + 3 + 1 = 200 px breed, even breed als de thumbnail dus.

margin-top: 130px;

In de html-code komt deze span na span.img-header. Omdat het een blok-element is, begint het op een nieuwe regel. En wordt dus gelijk onder span.img-header gezet. Maar dat is te hoog, dus zet ik het 130 px lager neer.

padding: 3em 3px 3px 3px;

Dit wordt gelezen in de volgorde boven - rechts - onder - links. Afstand tussen buitenkant van de span en tekst.

De grote padding aan de bovenkant is om ruimte te maken voor de standaardtekst die er overal boven komt te staan. Deze staat in de html onder deze tekst, omdat die tekst overal hetzelfde is. En hoewel deze constructie bepaald niet goed toegankelijk is voor bijvoorbeeld schermlezers, voorkomt het in ieder geval dat elke link met de standaardtekst begint, als iemand toch met zo'n soort programma zou werken. Maar zoals al eerder gezegd: voor dat soort programma's moet je 'n alternatief maken. Als eenheid heb ik em genomen, zodat bij 'n grotere letter de tekst niet verdwijnt onder de standaardtekst.

border: black solid 1px;

Randje om de tekst.

background: #bbb;

Achtergrond kleurtje geven voor de leesbaarheid.

overflow: auto;

Als de letters zoveel worden vergroot dat ze buiten de gekleurde achtergrond komen te staan, komen ze over de normale pagina heen te staan en zijn dan slecht of niet leesbaar. Op deze manier verschijnt er een scrollbalk en blijft de tekst binnen het vak staan. Je moet wel snel zijn met de cursor, omdat je even 'n stukje passeert wat buiten de link valt en de pop-up dan dus sluit, maar 't is makkelijk te doen met 'n beetje snelheid. Eventueel kun je de thumbnail ook gelijk laten aansluiten op de tekst.

span.klik-hier

De spans met class="klik-hier".

De span met de standaardtekst 'Meer info over dit deel?' enz., die bij alle links hetzelfde is. Waarom deze in de html onder de bovenstaande staat, terwijl de volgorde op het scherm anders is, kun je hierboven bij De grote padding... lezen.

position: absolute;

Om de tekst op de goede plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een positie heeft, dat is hier span.img.

left: -212px;

Als ik deze span en dus de daarin zittende tekst 212 px naar links verplaats, staat de linkerkant precies gelijk met de linkerkant van de thumbnail.

top: 160px;

Onder de thumbnail zetten.

width: 194px;

De thumbnail is 200 px breed. Deze tekst krijgt links en rechts een border van 1 px en een padding van 2 px. Samen is dat 1 + 2 + 194 + 2 + 1 = 200 px, even breed als de thumbnail dus.

border: black solid 1px;

Randje rondom de tekst.

height: 4em;

Hoogte van het vak voor de standaardtekst. Als eenheid em genomen, zodat de hoogte van de achtergrond mee verandert met de lettergrootte.

background: white;

Voor de leesbaarheid en als onderscheid met de wisselende tekst witte achtergrond.

font-size: 0.7em;

Kleine letter nemen. Ik neem em als eenheid zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

padding: 2px;

Afstand tussen tekst en rand van het vlak.

.kaders

De spans met class="kader". In deze spans wordt opgegeven waar de rode lijntjes komen te staan. Een deel van de instellingen is hetzelfde bij al deze spans, dus die kan ik in één keer opgeven door al die spans - naast een eigen class - ook de class "kaders" te geven.

De kaders staan binnen span.img en worden dus gelijk met deze span zichtbaar en onzichtbaar.Verder hebben ze niks te maken met de eigenlijke link. Voor het oog staan ze op dezelfde plek als de link, maar ik had ze ook op Mars of Venus neer kunnen zetten.

Los van het kadertje op de thumbnail staat er ook steeds een corresponderend groter kader op de grote afbeelding.

position: absolute;

Om de lijntjes op de goede plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een positie heeft, dat is hier span.img.

border: red solid 1px;

De rode lijn is 1 px breed. Ik hoef nu alleen nog maar breedte en hoogte te veranderen bij elke span, omdat de kadertjes feitelijk gewoon borders zijn.

line-height: 1px;

Om een of andere reden hanteert Internet Explorer 6 een minimum-hoogte van ongeveer 20 px als ik niet ook de regelhoogte opgeef. Andere browsers hebben er geen last van, dus...

.kader-1

{top: 19px; left: -213px; width: 35px; height: 121px;} .kader-1a {top: 19px; left: -53px; width: 35px; height: 121px;} .kader-1b {top: 91px; width: 103px; height: 337px;} .kader-1c {top: 91px; right: 7px; width: 103px; height: 337px;}

Deze kaders horen bij de lege achtergrond links en rechts. Het zijn er vier, want ook op de grote afbeelding moeten ze worden weergegeven.

De eerste twee (1 en 1a) horen bij de thumbnail. De laatste twee (1b en 1c) worden over de grote afbeelding neergezet.

Verder wijst dit eigenlijk min of meer zichzelf: elk kader heeft een position en een breedte en hoogte.

.kader-2

{top: -3px; left: -213px; width: 179px; height: 2px;} .kader-2a {top: 33px; width: 500px; height: 8px;}

Deze kaders horen bij de titelbalk van Firefox.

.kader-3

{top: -3px; left: -34px; width: 19px; height: 2px;} .kader-3a {top: 33px; left: 500px; width: 48px; height: 8px;}

Deze kaders horen bij de knoppen om Firefox te sluiten, te minimaliseren of te maximaliseren.

.kader-4

{top: 1px; left: -213px; width: 179px; height: 3px;} .kader-4a {top: 41px; width: 500px; height: 12px;}

Deze kaders horen bij het menu van Firefox.

.kader-5

{top: 1px; left: -34px; width: 19px; height: 3px;} .kader-5a {top: 41px; left: 500px; width: 48px; height: 12px;}

Deze kaders horen bij het aantal geopende tabs van Firefox.

.kader-6

{top: 4px; left: -213px; width: 149px; height: 3px;} .kader-6a {top: 54px; width: 420px; height: 10px;}

Deze kaders horen bij de locatiebalk van Firefox.

.kader-7

{top: 4px; left: -64px; width: 49px; height: 3px;} .kader-7a {top: 54px; left: 420px; width: 128px; height: 11px;}

Deze kaders horen bij het zoekvak van Firefox.

.kader-8

{top: 8px; left: -213px; width: 198px; height: 4px;} .kader-8a {top: 68px; width: 548px; height: 10px;}

Deze kaders horen bij Web Developer Toolbar.

.kader-9

{top: 13px; left: -213px; width: 198px; height: 4px;} .kader-9a {top: 78px; width: 548px; height: 11px;}

Deze kaders horen bij de tabbalk van Firefox.

.kader-10

De Latijnse tekst is niet in één rechthoekig of vierkant blok-element te vangen. Daarom gebruik ik daarvoor drie verschillende blok-elementen. Maar ik kan die niet simpel allemaal 'n border geven, want dan lopen er rode lijntjes dwars over de Latijnse tekst heen.

Bij alle drie de links die bij de Latijnse tekst horen geef ik dezelfde kaders weer, dus het maakt niet uit over welk deel van de Latijnse tekst je hovert: de kaders omsluiten altijd de héle Latijnse tekst.

Dit kadertje hoort bij link a#nr-010, de Latijnse tekst boven de grote afbeelding.

top: 19px; left: -176px; width: 87px; height: 40px;

De normale attributen om het kader neer te kunnen zetten.

border-bottom: none;

En aan de onderkant wil ik geen rood lijntje, want daar komt een aansluitend kader, en ik wil geen rode lijn tussen dit kader en het kader hieronder. Die zou namelijk dwars door de Latijnse tekst heenlopen.

.kader-10a

Maar dan zit ik dus met een missend rood lijntje aan de onderkant van .kader-10, want aan de rechterkant moet onderaan wel een rood lijntje komen, anders zit er een gat in de omkadering. Dat vang ik op door een heel kleine span te gebruiken.

top: 59px;

Bij deze hoogte sluit de span precies aan bij de rechter staande rode lijn van de span hierboven.

left:-130px;

Het middelste deel van de Latijnse tekst is smaller. Als ik deze span hier laat beginnen, komt de linkerkant precies gelijk met de rechter zijkant van de span hieronder. Waarmee ik dus een sluitend kader heb.

width: 42px;

Het lijntje moet 42 px lang worden.

height: 1px;

Omdat het alleen maar om het lijntje gaat maak ik de span zo klein mogelijk. 0 px kan niet, want dan kan de span geen border hebben.

border: none;

Hierboven heb ik bij .kaders alle spans een border gegeven. Die wil ik hier niet hebben, want dan heb ik ineens aan vier kanten een border, en ik wil alleen maar één lijntje hebben.

border-top: red solid 1px;

Nu heb ik één border, oftewel één lijntje, precies waar ik het hebben wil: in de opening in het kader tussen de span hierboven en de span hieronder.

.kader-10b

Dit kader omsluit de Latijnse tekst links van de grote afbeelding. Het hoort bij link a#nr-010a.

top: 60px;

Deze hoogte laat de span, en dus de border, precies aansluiten op die van .kader-10.

left: -176px; width: 45px; height: 60px;

De overige normale attributen om het kader goed neer te kunnen zetten.

border-top: none;

Boven deze span staat al een andere span (.kader-10) die ook bij de Latijnse tekst hoort. Tussen deze span en die span wil ik geen rood lijntje hebben, want dat zou dwars door de Latijnse tekst heen lopen.

border-bottom: none;

Hieronder komt ook nog een kader, want de Latijnse tekst wordt hieronder weer breder. Tussen de span die dat kader neerzet en deze span wil ik geen rood lijntje, want dat zou dwars door de Latijnse tekst heen lopen.

.kader-10c

Dit kader omsluit de Latijnse tekst onder de grote afbeelding en links van de onderste thumbnail. Het hoort bij link a#nr-010b.

top: 119px; left: -176px; width: 87px; height: 22px;

De normale attributen om het kader goed neer te kunnen zetten.

border-top: none;

Boven deze span staat al een andere span (.kader-10b) die ook bij de Latijnse tekst hoort. Tussen deze span en die span wil ik geen rood lijntje hebben, want dat zou dwars door de Latijnse tekst heen lopen.

.kader-10d

Maar dan zit ik wel met een gat in het kader, want rechtsboven moet wel een rood lijntje komen.

top: 119px; left: -130px;

Hiermee sluit dit lijntje precies aan op de rechter staande lijn van de .kader-10b, het kader dat bij de middelste link van de Latijnse tekst hoort.

width: 42px;

De lengte die het lijntje moet krijgen.

height: 1px;

Het gaat alleen maar om één lijntje, dus ik maak de span zo klein mogelijk. 0 px kan niet, want dan kan ik geen border geven.

border: none;

Hierboven heb ik bij .kaders alle spans een border gegeven. Die wil ik hier niet hebben, want dan heb ik ineens aan vier kanten een border, en ik wil alleen maar één lijntje hebben.

border-top: red solid 1px;

Nu heb ik één border, oftewel één lijntje, precies waar ik het hebben wil: in de opening in het kader tussen de middelste en de onderste link, zodat er een sluitend kader is ontstaan rondom de hele Latijnse tekst.

.kader-10e {top: 90px; left: 105px; width: 240px; height: 117px; border-bottom: none;} .kader-10f {top: 207px; left: 230px; width: 116px; height: 1px; border: none; border-top: red solid 1px;} .kader-10g {top: 207px; left: 105px; width: 124px; height: 161px; border-top: none; border-bottom: none;} .kader-10h {top: 365px; left: 105px; width: 240px; height: 64px; border-top: none;} .kader-10i {top: 365px; left: 229px; width: 117px; height: 1px; border: none; border-top: red solid 1px;}

Dit is hetzelfde verhaal als voor de kaders hierboven, maar nu niet voor de thumbnail maar voor de grote afbeelding.

.kader-11

{top: 19px; left: -88px; width: 33px; height: 39px;} .kader-11a {top: 119px; left:-88px; width: 33px; height: 21px;} .kader-11b {top: 90px; left: 346px; width: 91px; height: 116px;} .kader-11c {top: 365px; left: 346px; width: 91px; height: 63px;}

Deze kaders horen bij de twee thumbnails (de thumbnails ín de thumbnail en ín de grote afbeelding). Omdat het er twee zijn moeten er dus in totaal vier kaders worden getrokken: twee op de thumbnail en twee op de grote afbeelding.

Bij beide links die bij de thumbnails horen verschijnen dezelfde kaders, dus het maakt niet uit over welke thumbnail je hovert: ze worden altijd beide omkaderd.

.kader-12

{top: 59px; left: -130px; width: 75px; height: 58px;} .kader-12a {top: 207px; left: 230px; width: 207px; height: 157px;}

Deze kaders horen bij de grote afbeelding in het midden.

.kader-13

{top: 19px; left: -17px; width: 2px; height: 121px;} .kader-13a {top: 91px; left: 543px; width: 5px; height: 337px;}

Deze kaders horen bij de verticale scrollbar van Firefox.

.kader-14

{top: 142px; left: -213px; width: 198px; height: 1px;} .kader-14a {top: 430px; width: 548px; height: 5px;}

Deze kaders horen bij de horizontale scrollbar van Firefox.

.kader-15

{top: 145px; left: -213px; width: 5px; height: 1px;} .kader-15a {top: 437px; width: 14px; height: 7px;}

Deze kaders horen bij de extensie MeasureIt van Firefox.

.kader-16

{top: 145px; left: -206px; width: 132px; height: 1px;} .kader-16a {top: 437px; left: 15px; width: 370px; height: 7px;}

Deze kaders horen bij de statusbalk van Firefox.

.kader-17

{top: 145px; left: -72px; width: 3px; height: 1px;} .kader-17a {top: 437px; left: 386px; width: 10px; height: 7px;}

Deze kaders horen bij de extensie CS Lite van Firefox.

.kader-18

{top: 145px; left: -68px; width: 1px; height: 1px;} .kader-18a {top: 437px; left: 398px; width: 8px; height: 7px;}

Deze kaders horen bij de extensie PopupMaster van Firefox.

.kader-19

{top: 145px; left: -65px; width: 1px; height: 1px;} .kader-19a {top: 437px; left: 408px; width: 8px; height: 7px;}

Deze kaders horen bij de extensie NoScript van Firefox.

.kader-20

{top: 145px; left: -62px; width: 11px; height: 1px;} .kader-20a {top: 437px; left: 418px; width: 29px; height: 7px;}

Deze kaders horen bij de extensie NoSquint van Firefox.

.kader-21

{top: 145px; left: -50px; width: 14px; height: 1px;} .kader-21a {top: 437px; left: 447px; width: 43px; height: 7px;}

Deze kaders horen bij de extensie Mouseless Browsing van Firefox.

.kader-22

{top: 145px; left: -34px; width: 2px; height: 1px;} .kader-22a {top: 437px; left: 491px; width: 12px; height: 7px;}

Deze kaders horen bij de extensie HTML Validator van Firefox.

.kader-23

{top: 145px; left: -29px; width: 4px; height: 1px;} .kader-23a {top: 437px; left: 505px; width: 14px; height: 7px;}

Deze kaders horen bij de extensie Greasemonkey van Firefox.

.kader-24

{left: -22px; top: 145px; width: 4px; height: 1px;} .kader-24a {top: 437px; left: 521px; width: 14px; height: 7px;}

Deze kaders horen bij de extensie Firebug van Firefox.

.kader-25

{top: 145px; left: -17px; width: 2px; height: 1px;} .kader-25a {top: 437px; left: 537px; width: 11px; height: 7px;}

Deze kaders horen bij de extensie Update Notifier van Firefox.

.kader-26

Dit kader hoort bij de linkersluitknop van de taakbalk van KDE, het 'bureaublad' van Linux waar ik mee werk.

top: 148px; left: -213px;

De normale attributen om het kadertje goed neer te kunnen zetten.

width: 1px;

Nu ontstaat er een probleem. De bijbehorende link a#nr-026 is maar 2 px breed. Als ik deze span 1 px breed maak en 'n border geef, wordt deze span 3 px breed, en die ruimte heb ik stomweg niet (het zal gelijk duidelijk zijn waarom dit in de praktijk veel te gedetailleerd is en alleen als voorbeeld dient: 'n marge van 2 px om te kunnen hoveren is natuurlijk alleen bruikbaar als behendigheidstest).

Maar ik móét 'n breedte opgeven, anders kan ik geen border gebruiken. Dan maar de kleinst mogelijke breedte: 1 px.

height: 9px;

De hoogte die bij de sluitknop hoort.

border: none;

Hierboven heb ik bij .kaders alle spans een border gegeven. Die wil ik hier niet hebben, want dan heb ik ineens aan vier kanten een border, en dan wordt het te breed.

border-left: red solid 2px;

Als ik alleen links een border gebruik van 2 px breed, is dat precies het kader wat ik nodig heb. Weliswaar is de span nu ook 3 px breed (border van 2 px en 'n eigen breedte van 1 px), maar ik heb geen opening in het midden. En dat de span 1 px breder is maakt niet uit, de span hiernaast komt later in de html en wordt er dus gewoon overheen gezet. Deze spans hebben ook niets met het hoveren te maken, ze zetten alleen maar de kaders neer.

.kader-26a {top: 148px; left: -15px; width: 1px; height: 9px; border: none; border-left: red solid 2px;}

Zelfde verhaal als hierboven, maar nu voor de rechtersluitknop.

.kader-26b {top: 446px; width: 5px; height: 24px;} .kader-26c {top: 446px; left: 542px; width: 7px; height: 24px;}

Kaders die horen bij de sluitknoppen op de grote afbeelding.

.kader-27

{top: 148px; left: -211px; width: 7px; height: 7px;} .kader-27a {top: 446px; left: 7px; width: 22px; height: 24px;}

Kaders die horen bij het menu van KDE.

.kader-28

{top: 148px; left: -202px; width: 118px; height: 7px;} .kader-28a {top: 446px; left: 30px; width: 333px; height: 24px;}

Kaders die horen bij de programma-titels van KDE.

.kader-29

{top: 148px; left: -82px; height: 7px; width: 21px;} .kader-29a {top: 446px; left: 365px; width: 57px; height: 24px;}

Kaders die horen bij de applets van KDE.

.kader-30

{top: 148px; left: -59px; width: 6px; height: 7px;} .kader-30a {top: 446px; left: 423px; width: 22px; height: 24px;}

Kaders die horen bij de Toetsenbord-status-applet van KDE.

.kader-31

{top: 148px; left: -51px; width: 16px; height: 7px;} .kader-31a {top: 446px; left: 446px; width: 44px; height: 24px;}

Kaders die horen bij de Pager van KDE.

.kader-32

{top: 148px; left: -33px; width: 8px; height: 7px;} .kader-32a {top: 446px; left: 492px; width: 26px; height: 24px;}

Kaders die horen bij de klok van KDE.

.kader-33

{top: 148px; left: -23px; width: 6px; height: 7px;} .kader-33a {top: 446px; left: 520px; width: 21px; height: 24px;}

Kaders die horen bij de prullenmand van KDE.