Uitleg pop-up met tabel en achterliggende pagina

Skip links en inhoudsopgave

Laatst aangepast: .

Afbeelding 1: pop-up met tabel

Korte omschrijving

Bij hoveren over of aanraken van een vraagteken opent een pop-up met daarin een tabel en een link naar een achterliggende pagina.

BELANGRIJK

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

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

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

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

Opmerkingen

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

Alles op deze site is gemaakt op een systeem met Linux (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.

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

Voor pop-ups wordt vaak JavaScript gebruikt. Maar heel vaak kan dat ook prima met css. Voordelen zijn dat het makkelijker is en wat meer opmaak-mogelijkheden biedt. En het werkt ook nog, als JavaScript uit staat.

Een pop-up verschijnt bij hoveren: met de cursor ergens boven hangen. In alle browsers kan dit bij alle soorten elementen, maar bij Internet Explorer 6 kan dit helaas alleen bij 'n echte link: <a>. Daarom zat de hele pop-up in het oorspronkelijke voorbeeld binnen een <a>. Nu Internet Explorer 6 eindelijk niet meer ondersteund hoeft te worden, is dat niet meer nodig.

Maar Internet Explorer 6 mag dan verdwenen zijn, nu zijn er touchscreens. En op een touchscreen kun je niet hoveren. Al hang je al je vingers, je tenen én je neus boven het scherm, hoveren wordt het niet en als je niest heb je ook nog 'n vies scherm.

(Er schijnen trouwens inmiddels touchscreens ontwikkeld te worden, waar hoveren wel 'echt' werkt: je vinger iets boven het scherm houden.)

In het oorspronkelijke voorbeeld zat achter de pop-up een pagina: als je op de pop-up klikte, ging je naar 'n achterliggende pagina. De hele pop-up zat binnen een <a> en werkte dus als een link. Die achterliggende pagina wilde ik zo laten, maar dat kon niet zonder uitgebreide wijzigingen voor touchscreens. Bovendien werken Android, Windows 8 en iOS ook nog 'ns verschillend. Er waren dus fors wat aanpassingen van het oorspronkelijke voorbeeld nodig. (De belangrijkste hiervan staan bij Wijzigingen.)

In een aantal gevallen werd de pop-up genegeerd en werd gelijk de link gevolgd. Dit is opgelost door de pop-up niet binnen de <a> te plaatsen, maar de <a> binnen de pop-up.

In iOS was het onmogelijk de pop-up weer te sluiten, tenzij je een extra element op de pagina aanbracht. Dat extra element moest dan ook nog reageren op aanraking. Zo'n extra element is aangebracht: het sluitvakje. Voor het oog staat het binnen de pop-up, maar in werkelijkheid staat het er helemaal los van. Andere systemen hebben hier geen last van, en op iOS kan de pop-up nu worden gesloten door het sluitvakje aan te raken.

Afbeelding 2: pop-up met sluitvakje

De basis van de html is voor alle systemen hetzelfde.

De hele handel staat binnen een div#wrapper. Binnen deze div staan een tweede, geneste div#schermpje met de eigenlijke pop-up, een span#sluiten met het sluitvakje, en een a#tab-meer-hulp voor mensen die de muis niet kunnen of willen gebruiken.

Het eerste element binnen de geneste div is het vraagteken. Dat is gewoon 'n los vraagteken binnen een span.

Het tweede element binnen de geneste div is de pop-up zelf. Deze bestaat uit een span, waarbinnen weer een aantal andere spans zijn genest. Die spans worden met behulp van css zo opgemaakt, dat een soort tabel ontstaat. Voor de werking van de pop-up maakt dat verder weinig uit. Of je nou het woord 'HOERA' laat verschijnen, een afbeelding of een tabel, alles verschijnt en verdwijnt op dezelfde manier.

In de pop-up worden alleen normale tekst en borders gebruikt. De maten van de borders worden in px opgegeven, tekst en hoogte en dergelijke in em. Hierdoor kan zonder problemen de lettergrootte worden veranderd, ook in Internet Explorer, terwijl de lay-out intact blijft. Ook zoomen is geen probleem.

Het vraagteken is even groot als de binnenste div. Bij hoveren over het vraagteken hover je dus ook over de binnenste div. Hierdoor opent de pop-up, maar niet het sluitvakje, want dit staat niet binnen de binnenste div.

Binnen de buitenste div#wrapper staat nog een span, waarbinnen het sluitvakje staat. De buitenste div is even groot als de binnenste div. Als je over de binnenste div hovert, hover je dus ook over de buitenste div. Door het hoveren over de buitenste div opent het sluitvakje.

Dit sluitvakje staat in de html dus buiten de eigenlijke pop-up, maar het wordt op het scherm binnen de pop-up gepositioneerd. Omdat het buiten de pop-up staat, kan het sluitvakje op iOS worden gebruikt om de pop-up te sluiten. (Dit werkt trouwens in alle browsers zo, en ook als je hovert over het sluitvakje, sluit de pop-up, maar alleen voor iOS is het echt belangrijk.)

Blijft er nog één probleempje over: sommige mensen kunnen of willen de muis niet gebruiken om van link naar link te gaan, maar gebruiken de Tab-toets of een soortgelijke toets hiervoor. Omdat de div waar de hele handel in staat een tabindex heeft gekregen, is ook deze div met de Tab-toets bereikbaar: de div kan focus krijgen. Waardoor de pop-up ook opent als je de Tab-toets gebruikt.

e link binnen de pop-up is het volgende element dat focus krijgt, als je de Tab-toets weer indrukt. Helaas verliest daardoor de div focus, waardoor de pop-up sluit. Waardoor je ook de daarin zittende link niet meer ziet. Daarom heeft deze link een negatieve tabindex="-1" gekregen, waardoor hij wordt overgeslagen bij gebruik van de Tab-toets.

Nu zou echter de achterliggende pagina helemaal niet meer bereikbaar zijn voor mensen die de muis niet willen of kunnen gebruiken. Daarom is een tweede link naar de achterliggende pagina toegevoegd, die alleen zichtbaar wordt als je de Tab-toets gebruikt. Deze link staat volledig buiten de pop-up en heeft daar verder niets mee te maken.

Screenreaders en dergelijke lezen nu echter twee keer dezelfde link naar de achterliggende pagina voor: de link binnen de pop-up en deze extra link. Je ziet die extra link dan wel niet, maar hij is gewoon aanwezig in de html. Om dat twee keer voorlezen te voorkomen, wordt bij de extra link aria-hidden="true" toegevoegd. In principe moeten screenreaders en dergelijke deze link nu negeren, maar dat werkt (nog) niet in alle screenreaders.

Het voorlezen van de 'X' die als sluitkruisje wordt gebruikt, heeft geen enkel nut en is alleen maar verwarrend. Om die reden wordt ook span#sluiten verborgen met aria-hidden="true".

:hover, :focus en :active voor muis, toetsenbord, touchpad en touchscreen

:hover

Omdat :hover mogelijk niet werkt als css uitstaat, ontbreekt of onvolledig is, moet je nooit belangrijke informatie alleen met behulp van :hover tonen.

Je hovert over een element, als je met behulp van muis of touchpad de cursor boven dat element brengt. Hoveren kan over álle elementen. Het wordt veel gebruikt om iets te laten veranderen of, zoals in dit voorbeeld, om een pop-up te laten verschijnen.

Op touchscreens zijn nogal wat aanpassingen nodig, die verderop worden beschreven.

:focus

Omdat :focus mogelijk niet werkt als css uitstaat, ontbreekt of onvolledig is, moet je nooit belangrijke informatie alleen met behulp van :focus tonen.

De meeste mensen gaan met een muis naar een link, invoerveld, en dergelijke. Waarna ze vervolgens klikken om de link te volgen, tekst in te voeren, of wat ze ook maar willen doen.

Er is echter 'n tweede manier om naar links, invoervelden, en dergelijke te gaan: met behulp van de Tab-toets (sommige browsers gebruiken andere toetsen, maar het principe is hetzelfde). Met behulp van de Tab-toets kun je naar links, invoervelden, en dergelijke 'springen'. Waar je staat, wordt door alle browsers aangegeven met een of ander kadertje. De link en dergelijke met het kadertje eromheen heeft focus. Dat wil zeggen dat je die link volgt, als je op de Enter-toets drukt, of dat je in dat veld tekst kunt gaan invoeren, enz.

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

Links, invoervelden, en dergelijke worden automatisch bezocht bij gebruik van de Tab-toets. Maar door aan andere elementen een tabindex te geven, kunnen ook andere elementen focus krijgen. Daarvan is hier gebruikt gemaakt: div#schermpje heeft tabindex="1". Zodra div#schermpje 'aan de beurt' is, krijgt div#schermpje focus. En met behulp van :focus wordt daardoor de pop-up geopend.

Binnen de pop-up staat een link naar een achterliggende pagina. Dat is het volgende element dat focus zou krijgen, en dus gevolgd zou worden bij een Enter. Alleen doet zich hier een probleem voor. Zodra die link focus krijgt, verliest div#schermpje de focus en sluit de pop-up. De link mag dan wel focus hebben, helaas zie je hem niet, omdat hij in de zojuist gesloten pop-up zit. In de statusbalk van de browser, als die aan staat, kun je de bestemming van de link zien, maar dat is bepaald niet duidelijk.

Daarom heeft de in de pop-up zittende link een tabindex="-1" gekregen. Door de negatieve tabindex wordt deze link volledig genegeerd bij gebruik van de Tab-toets.

Maar nu zou de achterliggende pagina volledig onbereikbaar zijn voor gebruikers van de Tab-toets, en dat is ook niet de bedoeling. Daarom is onder de pop-up een tweede link naar de achterliggende pagina aangebracht. Deze heeft tabindex="2" gekregen en wordt gelijk na div#schermpje, die tabindex="1" heeft, bezocht. Zodra deze tweede link focus heeft, wordt hij zichtbaar en zal voor gebruikers van de Tab-toets duidelijk zijn, dat ze deze link kunnen volgen door op Enter te drukken. Mensen die de Tab-toets niet gebruiken, zullen deze link nooit zien.

Het gebruik van :focus kan een (groot) nadeel hebben. De pop-up kan een deel van de onderliggende pagina afdekken, waardoor dit niet meer te zien is. Om die reden is het vaak beter :focus niet te gebruiken.

In dit geval is er volgens mij geen probleem. De pop-up opent alleen, als je over het vraagteken hovert en sluit weer, zodra de cursor de pop-up verlaat. Of, in het geval van een touchscreen, zodra het scherm buiten de pop-up of het sluitvakje wordt aangeraakt.

Bij het volgen van een link kan dit lastiger zijn. Als op een link wordt geklikt, krijgt de link ook focus. Je merkt dat in de regel niet gelijk, omdat de link gevolgd zal worden en een andere pagina opent. Maar als je met de Terug-toets (of Alt+←) naar de vorige pagina teruggaat, kun je aan het kadertje rond de link zien dat deze focus heeft. Dat betekent dat een pop-up bij een link die met behulp van :focus wordt geopend, nog steeds open kan zijn. En dat kan knap storend zijn, vooral omdat veel mensen geen idee zullen hebben hoe ze de pop-up moeten sluiten.

In dit geval valt ook dit volgens mij nogal mee. Als op de link binnen de pop-up wordt geklikt, krijgt deze focus. Waardoor div#schermpje, waar de pop-up in staat, de focus verliest. Als je terugkomt op de pagina, zal de pop-up dus zijn verdwenen. De link heeft nog wel focus, maar daar zie je niets van, omdat de hele link samen met de pop-up is verdwenen.

Op touchscreens ligt dit iets anders. In Android 4.0.3 is in Android browser en Firefox de pop-up nog open, als met behulp van de Terug-toets wordt teruggegaan. Google Chrome en Opera Mobile hebben de pop-up wel gesloten.

In iOS laten Safari en Opera Mini de pop-up geopend, Google Chrome sluit hem.

In Android 2.3.6 laten Opera Mini en Android browser de pop-up open, Opera Mobile sluit hem.

Op Windows 8 laat alleen Firefox de pop-up open, maar alleen als het touchscreen wordt gebruikt. Als je gewoon klikt, is de pop-up bij terugkomst wel gesloten.

In al deze gevallen lijkt ook dit me geen probleem, omdat duidelijk is dat je de pop-up kunt sluiten door het sluitvakje aan te raken.

Afbeelding 3: link naar meer hulp voor gebruikers van de Tab-toets
Afbeelding 3: met het groene randje geeft Opera aan dat de link focus heeft.

De extra link voor gebruikers van de Tab-toets staat buiten de pop-up. Deze link is alleen zichtbaar als je de Tab-toets gebruikt om links, invoervelden, en dergelijke af te gaan. Als deze link wordt gebruikt en je gaat daarna met de Terug-toets terug, is deze link nog zichtbaar.

Alleen in Google Chrome en Internet Explorer 8 op Windows XP is de link bij terugkomst niet zichtbaar.

Dit speelt alleen bij gebruik van een toetsenbord, want zonder toetsenbord kun je ook de Tab-toets niet gebruiken en is deze link dus nooit zichtbaar.

Ook dit lijkt me geen probleem. De link is alleen zichtbaar als je de Tab-toets en Enter gebruikt om naar de achterliggende pagina te gaan. Gebruikers van de Tab-toets zullen weten dat ze deze toetsen hebben gebruikt en dus niet verbaasd zijn.

:active

Omdat :active mogelijk niet werkt als css uitstaat, ontbreekt of onvolledig is, moet je nooit belangrijke informatie alleen met behulp van :active tonen.

Een element is actief, zolang je de muis boven dat element ingedrukt houdt, of – op sommige touchscreens – het element aanraakt.

In Internet Explorer ouder dan versie 8 werkte dit foutief, zoals :focus hoort te werken, en :focus werkte gewoon helemaal niet. Omdat Internet Explorer 8 de oudste versie is die ik (en het merendeel van de sitebouwers) nog ondersteun, speelt dit niet meer.

:active wordt hier niet gebruikt, dus is hier verder niet van belang. Het zou hier ook redelijk zinloos zijn, want als je de muis indrukt boven het vraagteken, zul je per definitie ook boven het vraagteken hoveren.

Aanpassingen voor touchscreens

Het gebruik van :hover om een pop-up te laten verschijnen, levert op touchscreens nogal wat problemen op. Op internet zijn waanzinnig veel methodes te vinden, om dit voor elkaar te krijgen. De meeste werken niet, slecht of alleen op één systeem.

Ik ben bijvoorbeeld voor iOS een methode tegengekomen om een pop-up te sluiten door een plaatje (een <img>>) aan te raken. Op dit moment werkt dat, maar het kan prima zijn dat dit helemaal niet de bedoeling is van Apple. Als dit in een komende versie van iOS wordt veranderd, werkt deze methode plotseling niet meer.

Dit is geen vage angst of zo, in het verleden is dit op grote schaal gebeurd. Mensen gebruikten fouten in Internet Explorer om een of andere bug of afwijking voor alleen (een bepaalde versie van) die browser te repareren. Als Microsoft de fout dan in een nieuwe versie had gerepareerd, donderde de hele lay-out grotelijks in elkaar.

De hier gebruikte methode is gebaseerd op de officiële documentatie van Microsoft en Apple. Hierdoor is er een grote kans dat deze methode ook blíjft werken.

Android schittert hier door afwezigheid, omdat ik geen officiële documentatie hierover heb kunnen vinden.

Windows 8

Binnen Windows 8 werkt het met muis, toetsenbord en/of touchpad op de gebruikelijke manier. Maar dit geldt niet voor een touchscreen.

Als de pop-up binnen een <a> staat, zoals in het oorspronkelijke voorbeeld het geval was, tonen alle browsers de pop-up 'n fractie van 'n seconde en volgen dan de link. Uiterst verwarrend.

Voor Internet Explorer 10 zou je dit kunnen corrigeren door, zoals hieronder beschreven, op de juiste plaatsen aria-haspopup toe te voegen. Bij de eerste aanraking wordt dan de pop-up getoond, bij een tweede aanraking wordt de link gevolgd. Maar omdat een pop-up binnen een <a> niet kan vanwege Android, is dit verder niet zo interessant.

Als de pop-up buiten de <a> staat, zoals in dit voorbeeld het geval is, werkt het in Firefox, Google Chrome en Opera goed. In Internet Explorer 10 opent de pop-up bij de eerste aanraking, maar bij de tweede aanraking sluit deze weer. Ook als je bij de tweede aanraking de link naar de achterliggende pagina aanraakt.

Om het in Internet Explorer 10 op een touchscreen goed te laten werken, moet overal in de html, waar een pop-up moet verschijnen, aria-haspopup="true" worden toegevoegd. Hierdoor wordt bij de eerste aanraking de pop-up geopend. Als je het scherm buiten de pop-up aanraakt, wordt de pop-up weer gesloten. Als je de link binnen de pop-up aanraakt, wordt de pop-up niet gesloten, maar wordt de link naar de achterliggende pagina gevolgd.

In dit geval moet div#schermpje in de html de toevoeging aria-haspopup="true" krijgen, want bij hoveren over deze div moet de pop-up.

Verder moet bij de link binnen de pop-up nog worden toegevoegd aria-haspopup="false". Die link is namelijk een nakomeling van beide divs, en aria-haspopup="true" geldt ook voor nakomelingen. Als je dit weglaat, moet je twee keer de link aanraken, voor deze opent. De eerste keer voor de (niet bestaande) pop-up, en de tweede keer om de link echt te openen.

De tweede link voor gebruikers van de Tab-toets moet ook aria-haspopup="false" krijgen, omdat deze een kind is van div#wrapper. Zonder deze toevoeging zou ook deze link twee keer aangeraakt moeten worden, voor de bijbehorende pagina wordt geopend.

Ik mag graag woest worden over Microsoft, maar in dit geval vind ik dit een heel elegante oplossing. Microsoft maakt gebruik van een al bestaande standaard: WAI-ARIA. Dit is volgens mij stukken beter dan de oplossingen van Apple en Android. Over die bestaande standaard WAI-ARIA kun je op de pagina met links onder het kopje Toegankelijkheid meer vinden.

iOS

Apple heeft voor iOS een andere oplossing gekozen. Overal waar door :hover een pop-up moet verschijnen, moet je in de html onclick="void(0)" toevoegen. Dat is hier bij div#wrapper (voor het sluitvakje) en div#schermpje (voor de eigenlijke pop-up).

onclick is een stukje JavaScript: er moet iets gebeuren, als je ergens op klikt. Of, in dit geval: als je iets aanraakt. En wat moet er gebeuren? Dat is hier bijzonder weinig: "void(0)". Dat betekent: niets. Noppes. Totale stilte. Blijf vooral lekker in je bed liggen. De enige functie van onclick is hier dat het bijbehorende element op aanraking gaat reageren, waardoor het de bijbehorende pop-up opent.

De link binnen de pop-up werkt vervolgens op de normale manier: bij aanraking van het vraagteken wordt hij geopend. Dat is mooi. Maar vervolgens blijkt de pop-up zich te ontwikkelen tot een niet weg te meppen kreng: je kunt de pop-up gewoon niet meer sluiten. Bij Windows of Android is een simpele aanraking buiten de pop-up voldoende, maar hier niet. Op iOS sluit de pop-up pas, als je een ander element aanraakt dat op aanraking reageert, bijvoorbeeld een <a>.

Op de site bijvoorbeeld sluit de pop-up, zodra je een van de links in de knoppen bovenin het venster aanraakt. Alleen ben je dan ook gelijk van de pagina af, of je begint 'n download.

In de download met dit voorbeeld zitten helemaal geen andere links, dus in de download krijg je de pop-up alleen maar dicht door de hele pagina opnieuw te openen. Dit is natuurlijk bepaald niet ideaal. Je kunt natuurlijk alleen om de pop-up te kunnen sluiten 'n nep-link of zo aanbrengen, maar het is beter om te proberen de pop-up tot een afgerond geheel te maken. Dat voorkomt problemen als je later die extra link zou verwijderen of zo.

Daarom is er binnen de pop-up een mogelijkheid tot sluiten opgenomen: het sluitvakje.

Het sluitvakje staat buiten de geneste div#schermpje, dus ook buiten de daarin zittende pop-up. Als ik nou bij dit sluitvakje ook onclick="void(0)" toevoeg, dan gaat het sluitvakje op aanraking reageren. Waardoor de pop-up sluit, als je het sluitvakje aanraakt.

Het sluitvakje wordt in de linkerbovenhoek van de pop-up gepositioneerd, maar staat er feitelijk dus volledig buiten. Eigenlijk is ook hier dus 'n soort nep-element aangebracht, alleen wordt dit binnen de pop-up gepositioneerd.

(Terzijde: in het algemeen is het een heel slechte en verouderde manier van programmeren om JavaScript in de html te zetten. In dit geval heb ik er geen problemen mee, omdat dit JavaScript feitelijk helemaal niets doet. In vrijwel alle andere gevallen kun je 'n pagina onoverzichtelijk, ontoegankelijk, slecht te indexeren, slecht te onderhouden, en nog vele feestelijkheden meer, maken.)

Android

Blijft nog over Android. Het sluiten van de pop-up levert hier geen problemen op: gewoon het scherm ergens buiten de pop-up aanraken en de pop-up verdwijnt. Toch zou ik nog even wachten met een vreugdedansje. Bij Android is het openen van de pop-up namelijk het probleem. En iets kan dan wel fantastisch sluiten, maar als je het niet kunt openen, is de betekenis van die fantastische sluiting toch ietwat beperkt.

Als een pop-up binnen een link staat, opent de link gewoon niet, wat je ook doet. Ik heb nergens een oplossing hiervoor kunnen vinden, ook niet als je JavaScript zou gebruiken. Wat je ook doet: als een pop-up binnen een link staat, wordt op Android gewoon de link geopend.

Nog verwarrender is dat je de pop-up heel even ziet, 'n halve seconde of zo. Dat kan dus echt niet: je hebt net genoeg tijd om je af te vragen, wat je niet ziet. Hoe Google, de maker van Android, dit ooit zo heeft kunnen bedenken, is me 'n raadsel. Op Windows 8 zie je gewoon helemaal niets, als je je code niet aanpast. Dat is in ieder geval nog 'n stuk beter dan iets 'n halve seconde laten zien.

Voor Android was het nodig de hele pop-up buiten de <a> te plaatsen. Een pop-up buiten een link wordt namelijk wel gewoon geopend. De link binnen de pop-up werkt vervolgens op de normale manier.

Het sluitvakje heeft voor Android verder geen nut.

Beschrijving van code en css

De code die te maken heeft met de basis van dit voorbeeld is blauw 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 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, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

<!DOCTYPE html>

<html lang="nl">

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

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

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

Het hier gebruikte doctype is dat van html5. 'n Stuk korter dan oudere doctypes.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven. Bij html5 is deze korte regel voldoende.

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" href="../../css/naam-van-stylesheet.css">

<!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" 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. In html5 is de toevoeging type="text/css" niet meer nodig, omdat dit standaard al zo staat ingesteld.

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 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> 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. Met ingang van Internet Explorer 10 werken conditional comments niet meer.

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 die uit de algemene stylesheet dan in principe overrulen.

<style>

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 <style> en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out, zoals ik die in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Ik gebruik deze lay-out alleen, 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

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de nakomelingen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

background: #ff9;

Achtergrondkleurtje.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hierboven heb ik een achtergrondkleur opgegeven. 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 voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

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

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.

margin: 0; padding: 0;

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

#wrapper

Het element met id="wrapper". Dit is de div waarbinnen de hele handel staat.

position: absolute;

Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf relatief, absoluut of fixed is gepositioneerd. Als die er niet is, zoals hier het geval is, wordt gepositioneerd ten opzichte van het venster van de browser.

Het absolute positioneren heeft hier vier functies.

* De div zelf kan op een bepaalde plaats worden neergezet. Omdat de pagina verder leeg is, zou de div normaal genomen in de linkerbovenhoek worden neergezet. Maar dit zou je ook op andere manieren kunnen bereiken, zoals met een marge.

* Nakomelingen van deze div kunnen nu worden gepositioneerd ten opzichte van deze div. Nakomelingen kunnen alleen worden gepositioneerd ten opzichte van een voorouder, als die voorouder zelf relatief, absoluut of fixed is gepositioneerd. Maar dit zou je ook met 'n relatieve positie kunnen bereiken. Vaak is dat ook beter, omdat 'n absolute positie nogal wat storende bijwerkingen kan hebben.

* Normaal genomen wordt een blok-element zoals een div even breed als z'n ouder, hier het venster van de browser. Dat zou betekenen dat hoveren en aanraken ook over de volle breedte zouden werken, terwijl dat natuurlijk alleen maar boven het vraagteken moet werken. Een absoluut gepositioneerd element echter wordt niet breder dan nodig is, om de inhoud weer te kunnen geven. Maar dit zou je ook kunnen bereiken door gewoon een breedte op te geven.

* De belangrijkste reden: een absoluut element is te vergelijken met een absoluut heerser: beide zijn volslagen asociaal en trekken zich van niemand iets aan. Dat geldt ook voor de nakomelingen van het absoluut gepositioneerde element (mogelijk niet voor alle nakomelingen van de absolute heerser...)

In dit geval betekent dat, dat de pop-up óver de rest van de pagina heen wordt gezet. Zou dat niet zo zijn, dan zouden de elementen die onder de pop-up staan bij het openen van de pop-up omlaag worden geduwd, wat een uiterst onrustige pagina op zou leveren. (Nou is deze pagina verder helemaal leeg, dus hier speelt dat niet, maar normaal genomen is dat natuurlijk niet zo.)

top: 200px;

200 px vanaf de bovenkant zetten.

left: 200px;

200 px vanaf de linkerkant zetten. Omdat de pop-up iets links van deze div wordt neergezet, is dat van belang. Zou de div helemaal links staan, dan zou een deel van de pop-up aan de linkerkant buiten het venster van de browser vallen en dus onzichtbaar zijn.

#vraagteken

Het element met id="vraagteken". Dit is de span, waarbinnen het vraagteken staat.

font-size: 3em;

Tamelijk grote lettergrootte. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

#hulptekst

Het element met id="hulptekst". Binnen deze span staat de pop-up, met uitzondering van het sluitvakje.

De pop-up wordt pas zichtbaar, als je over het vraagteken hovert of dit aanraakt, maar de lay-out kan ik hier al opgeven.

background: white;

Witte achtergrond.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

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

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

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

width: 34em;

Breedte. Door als eenheid em te nemen, past de breedte zich aan de lettergrootte aan. Hierdoor blijft ook bij een andere lettergrootte de lay-out intact.

height: 8.8em;

Hoogte. Door als eenheid em te nemen, past de hoogte zich aan de lettergrootte aan. Hierdoor blijft ook bij een andere lettergrootte de lay-out intact.

De ietwat vreemde waarde is niet de uitkomst van een of andere geniale berekening, maar is gevonden door dom uitproberen. In combinatie met alle andere regelhoogtes en dergelijke blijkt dit de juiste hoogte te zijn.

font-size: 0.88em;

Lettergrootte iets verkleinen. Deze ietwat eigenaardige waarde blijkt, in combinatie met alle regelhoogtes en dergelijke, goed te werken in alle browsers. Dat is altijd even uitproberen, als de tekst netjes moet worden neergezet in zo'n kleine ruimte, omdat er wat verschillen zijn tussen de diverse browsers en besturingssystemen.

Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

font-weight: bold;

De letter is tamelijk klein, waardoor hij wat onduidelijk wordt. Door hem vet te maken, wordt hij beter leesbaar.

letter-spacing: -0.02em;

Letters iets dichter op elkaar zetten dan standaard. Dit ziet er iets netter uit.

border: black solid 2px;

Zwart randje rondom de pop-up.

position: absolute;

Om de pop-up op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf absoluut, relatief of fixed is gepositioneerd. Dat is hier div#wrapper.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren, is een bijkomend voordeel dat de span in een blok-element verandert. Hierdoor kunnen eigenschappen als hoogte en breedte worden gebruikt.

top: 0;

Als je top niet opgeeft, wordt ook een absoluut gepositioneerd element normaal genomen op z'n gewone hoogte gezet. Dat is in dit geval onder het vraagteken. Nu wordt het helemaal bovenin div#wrapper, de eerste voorouder met een absolute positie, neergezet.

(Google Chrome en Safari zetten span#hulptekst en dus de daarin zittende pop-up inderdaad onder het vraagteken. Alle andere browsers zetten om een of andere reden de pop-up ook zonder top: 0; bovenaan. Volgens mij is dat niet volgens de standaard. Ik heb daar verder niet uitgebreid naar gezocht, omdat deze simpele toevoeging de pop-up in alle browsers op de goede plaats zet.)

left: -8000px;

8000 px naar links zetten. Dat is zelfs op het breedste scherm ver buiten de linkerkant, waardoor je de pop-up niet ziet. Bij hoveren over het vraagteken hoef ik alleen deze waarde te veranderen, waarna de pop-up op het scherm komt te staan.

Je zou de pop-up ook kunnen verbergen met display: none;, maar veel screenreaders en dergelijke negeren alles, wat hiermee is verborgen.

#hulptekst span

Alle spans binnen het element met id="hulptekst". Elke stukje van de pop-up zit in een eigen span. Al deze spans zitten samen weer in de 'overkoepelende' span#hulptekst.

Een aantal eigenschappen zijn voor al deze spans hetzelfde. Die kan ik hier in één keer opgeven.

height: 1.3em;

Hoogte.

position: absolute;

Om de spans, en dus de daarin zittende tekst, op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier span#hulptekst.

Een span is van zichzelf een inline-element. Door de spans absoluut te positioneren, is een bijkomend voordeel dat de spans in een blok-element veranderen. Hierdoor kunnen eigenschappen als hoogte en breedte worden gebruikt.

span#engels

De span met id="engels".

Binnen de pop-up staat een Engelstalig woord: 'accesskeys'. Voor spraakbrowsers en dergelijke is het van belang om een verandering van taal aan te geven, zodat vreemde woorden op de juiste manier kunnen worden uitgesproken. In de html is '(accesskeys)' daarom geschreven als (<span lang="en">accesskeys</span>)

position: static;

Bij #hulptekst span zijn alle spans binnen #hulptekst absoluut gepositioneerd. Deze span staat ook binnen #hulptekst en is dus ook absoluut gepositioneerd. Hierdoor wordt '(acceskeys)' weergegeven als '()acceskeys'.

Als ik deze span position: static; geef – dat is hetzelfde als geen positie, de normale situatie – gaat 't goed.

#head-shortcuts

Het element met id="head-shortcuts". Dit is de span, waarbinnen het kopje boven de sneltoetsen staat.

Voor deze span gelden ook de bij #hulptekst span opgegeven instellingen.

width: 73%

Breedte. Een breedte in procenten geldt altijd ten opzichte van de ouder, dat is hier span#hulptekst. Deze span overkoepelt dus bijna drie vierde van de pop-up.

text-align: center;

Tekst horizontaal centreren.

border-bottom: black solid 1px;

Randje aan de onderkant.

#head-tabs

Het element met id="head-tabs". Dit is de span, waarbinnen het kopje voor de tab-volgorde staat.

Voor deze span gelden ook de bij #hulptekst span opgegeven instellingen.

width: 27%;

Breedte.

border: black solid;

Zwarte rand rondom. Gelijk hieronder geef ik de breedte op.

border-width: 0 0 1px 1px;

Gelijk hierboven heb ik al kleur en soort rand opgegeven. Door boven en rechts de breedte op 0 te zetten, verschijnt daar geen rand. Het randje links vormt de afscheiding tussen de twee kopjes boven de kolommen.

Ik had ook twee aparte regels voor de borders onder en links kunnen gebruiken, maar dit is iets minder css.

padding-left: 1%;

Kleine afstand tussen tekst en randje aan de linkerkant.

left: 72%;

Door uitproberen blijkt dit de beste plaats te zijn.

.hulp-zelf

De elementen met class="hulp-zelf". Dat is er hier maar eentje.

Voor deze span gelden ook de bij #hulptekst span opgegeven instellingen.

color: grey;

Voorgrondkleur grijs, waardoor ook de tekst grijs wordt.

Op de site waar deze pop-up oorspronkelijk werd gebruikt, had elke <body> een id. Daardoor kon je met #id-van-body .hulp-zelf met een kleurtje aangeven, op welke pagina je was. Daar is dit een restant van.

.kol-1

Alle elementen met class="kol-1". Alle teksten in de linkerkolom staan in een span met deze class.

Voor deze spans gelden ook de bij #hulptekst span opgegeven instellingen.

width: 31%;

Breedte van de linkerkolom.

padding-left: 4px;

Kleine afstand tussen linkerkant van de pop-up en tekst.

.kol-2

Alle elementen met class="kol-2". Alle teksten in de middelste kolom staan in een span met deze class.

Voor deze spans gelden ook de bij #hulptekst span opgegeven instellingen.

width: 48%;

Breedte. Breder dan de linkerkolom, want er staat bredere tekst in deze kolom.

left: 31%;

Op 31% van links neerzetten.

.kol-3

Alle elementen met class="kol-3". Alle teksten in de rechterkolom staan in een span met deze class.

Voor deze spans gelden ook de bij #hulptekst span opgegeven instellingen.

border-left: black solid 1px;

Randje links ter onderscheid tussen de kolommen met sneltoetsen en tab-volgorde.

padding-left: 4px;

Kleine afstand tussen randje links en tekst.

left: 72%;

Op 72% van links neerzetten.

.regel-1

Alle elementen met class="regel-1". Alle teksten in de bovenste regel staan in een span met deze class.

Voor deze spans gelden ook de bij #hulptekst span opgegeven instellingen.

top: 1.35em;

Op 1,35 em vanaf de bovenkant neerzetten. Op deze hoogte komt de tekst in de spans precies goed te staan.

.regel-2

{top: 2.5em;}

.regel-3

{top: 3.7em;}

.regel-4

{top: 4.9em;}

.regel-5

{top: 6.15em;}

De spans voor de tweede, derde, vierde en vijfde regel. Alleen de naam van de class en de hoogte waar de regel wordt neergezet, verschillen.

#meer-hulp

Het element met id="meer-hulp". Dit is de span, waarin de link naar de achterliggende pagina zit.

Voor deze span gelden ook de bij #hulptekst span opgegeven instellingen.

Afbeelding 4
Afbeelding 4: link en onderschrift. span#meer-hulp met de link heeft een rode omlijning, span#hulp-footer met het onderschrift een blauwe.

Deze span zit op dezelfde hoogte als span#hulp-footer, maar omdat ze beide absoluut gepositioneerd zijn, negeren ze elkaar volledig, zoals op de afbeelding hierboven is te zien. Daardoor wordt ook deze span gewoon helemaal aan de linkerkant neergezet, over span#hulp-footer heen.

Omdat de tekst in #hulp-footer horizontaal is gecentreerd, is dat geen probleem. Er is aan de linkerkant van #hulp-footer genoeg ruimte om daar de link neer te zetten.

font-weight: normal;

Bij #hulptekst is de tekst vet gemaakt. Deze link moet normaal weergegeven worden.

border-right: black solid 1px;

Streepje aan de rechterkant om de link af te bakenen.

padding: 0 4px;

Omdat voor onder en links geen waarde is opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 4px 0 4px in de volgorde boven – rechts – onder – links. Links en rechts kleine ruimte tussen de rand van de pop-up en de tekst.

#schermpje:hover #hulptekst, #schermpje:focus #hulptekst

Als over het element met id="schermpje" wordt gehoverd, of als dit element focus heeft, doe dan iets met het daarin zittende element met id="hulptekst".

#schermpje is de div, waarin vraagteken en pop-up zitten. #hulptekst is de span, waarin de pop-up staat. De lay-out van #hulptekst is al opgegeven bij #hulptekst.

div#schermpje moet niet breder of hoger worden dan het vraagteken, want alleen boven het vraagteken moet worden gereageerd op hoveren of aanraken.

Een blok-element zoals deze div wordt normaal genomen niet hoger dan de inhoud. Dat is hier het vraagteken, dus dat komt goed uit.

Voor de breedte ligt het anders. Normaal genomen wordt een blok-element automatisch even breed als zijn ouder. Dat is hier div#wrapper. Ook dat is een blok-element, dus ook dat wordt normaal genomen even breed als z'n ouder. Dat is hier het venster van de browser.

div#wrapper zou dus even breed worden als het venster, en daardoor ook div#schermpje. Dat zou betekenen dat over de volle breedte van het venster wordt gereageerd op aanraken of hoveren, en niet alleen boven het vraagteken.

Gelukkig is dat niet zo. Bij #wrapper is div#wrapper absoluut gepositioneerd. En absoluut gepositioneerde blok-elementen worden niet breder, dan nodig is om de inhoud weer te geven. Dat is het vraagteken, dus ook de breedte is prima geregeld.

Als je position: absolute; bij div#wrapper even weghaalt, zul je zien dat #wrapper inderdaad tot de rechterkant van het venster doorloopt, en over de volle breedte wordt gereageerd op hoveren en aanraken.

left: -100px;

Bij #hulptekst is de span met de pop-up links buiten het scherm neergezet, zodat deze onzichtbaar is. Nu wordt hij weer binnen het venster van de browser gezet, waardoor de pop-up zichtbaar wordt.

#sluiten

Het element met id="sluiten". Dit is de span, waarin het sluitvakje staat. Dit sluitvakje is feitelijk niets meer dan de letter 'X' met wat lay-out.

Bij aanraking van dit vakje sluit de pop-up. Dit is nodig voor iOS. Meer hierover bij :hover, :focus en :active voor muis, toetsenbord, touchpad en touchscreen onder het kopje iOS.

color: red;

Voorgrondkleur rood, waardoor de tekst ook rood wordt.

display: none;

Normaal genomen moet dit vakje onzichtbaar zijn. Screenreaders en dergelijke hebben vaak problemen met het lezen van iets dat met display: none; is verborgen. Hier is dat geen probleem, want het voorlezen van de losse letter 'X' heeft geen enkel nut.

width: 0.67em; height: 0.67em;

Breedte en hoogte.

Als je bij breedte en hoogte de eenheid em gebruikt, wordt de breedte en hoogte afgeleid van de lettergrootte. Die lettergrootte is hieronder vergroot tot 1,7 em. Even uitproberen levert op, dat deze breedte en hoogte in alle browsers het beste werkt. In combinatie met overflow: hidden;, dat hieronder wordt opgegeven.

Normaal genomen zou je geen hoogte op hoeven te geven, omdat hieronder een regelhoogte wordt opgegeven. De span krijgt dan automatisch die hoogte. Maar omdat overflow wordt gebruikt, is in dit geval wel een hoogte nodig. Anders zou overflow niet weten, op welke hoogte het teveel moet worden afgekapt.

font-size: 1.7em;

De letter 'X' moet tamelijk groot zijn. Als eenheid neem ik em, zodat ook in Internet Explorer de 'X' mee verandert met een andere lettergrootte.

line-height: 0.67em;

Tekst wordt automatisch in het midden van de regelhoogte gezet, ook als dat maar één letter is. Door de regelhoogte even hoog te maken als de hoogte, staat de tekst altijd in het midden van de regel, ook bij een andere lettergrootte.

Als eenheid wordt em gebruikt, zodat ook in Internet Explorer de regelhoogte mee verandert met de lettergrootte.

border-right: black solid 1px;

Lijntje aan de rechterkant van de 'X'.

position: absolute;

Om de span en de daarin zittende letter 'X' absoluut te kunnen positioneren.

Een span is van zichzelf een inline-element. Door hem absoluut te positioneren, verandert de span in een blok-element, waardoor eigenschappen als hoogte en breedte gebruikt kunnen worden.

Er wordt gepositioneerd ten opzichte van de de eerste voorouder die zelf absoluut, relatief of fixed is gepositioneerd. Dat is hier div#wrapper. Omdat ook span#hulptekst, waar de pop-up in staat, wordt gepositioneerd ten opzichte van #wrapper, worden span#sluiten en span#hulptekst in feite ook ten opzichte van elkaar gepositioneerd. Hierdoor kan het sluitvakje op precies de goed plaats binnen de pop-up worden neergezet.

top: 2px;

2 px vanaf de bovenkant van div#wrapper neerzetten. span#hulptekst staat helemaal bovenaan en heeft een border van 2 px breed. De 'X' komt dus precies hieronder te staan.

left: -98px;

98 px naar links zetten. Door uitproberen blijkt dit de goede positie op te leveren.

overflow: hidden;

De 'X' is eigenlijk iets te groot voor deze span. Dat is gedaan, omdat browsers en besturingssystemen soms net iets afwijkende lettergroottes hebben. Door de 'X' iets te groot te maken, wordt het hele vakje overal gevuld.

Alleen steekt de 'X' nu in sommige browsers en systemen iets buiten het vakje uit. Door overflow op hidden te zetten, verdwijnen deze uitsteeksels.

#schermpje:hover + #sluiten, #schermpje:focus + #sluiten

Als over het element met id="schermpje" wordt gehoverd, of als dit element focus heeft, doe dan iets met het in de html gelijk daarop volgende element met id="sluiten".

div#schermpje is de div, waarin vraagteken en pop-up zitten. Als je over deze div hovert, of als deze focus heeft, opent de pop-up.

#sluiten is de span, waarin het sluitvakje zit.

Om de pop-up te openen, kun je gewoon over div#schermpje hoveren, want die div staat gewoon op het scherm, Maar boven span#sluiten kun je niet hoveren, want die is bij #sluiten met display: none; verborgen. Toch moet ook dit sluitvakje zichtbaar worden gemaakt, als de pop-up opent, want anders kan op iOS de pop-up niet worden gesloten.

Met deze selector wordt het hoveren over div#schermpje, of als deze div focus heeft, gekoppeld aan het in de html gelijk daarachter zittende element span#sluiten. Door over div#schermpje te hoveren gebeurt er nu ook iets met het daarop volgende #sluiten, ook al kun je daar dan niet rechtstreeks over hoveren.

display: block;

Bij #sluiten is het sluitvakje verborgen met display: none;. Nu mag het zichtbaar worden.

#tab-meer-hulp

Afbeelding 5: link voor gebruikers van Tab-toets

Het element met id="tab-meer-hulp". Dit is een link die alleen zichtbaar is voor mensen die de Tab-toets gebruiken om links en dergelijke af te gaan.

Het groene randje op de afbeelding hiernaast is niet opgegeven met css, maar is Opera's manier om aan te geven dat de link focus heeft.

background: white;

Witte achtergrond.

font-size: 1.2em;

Iets grotere letter. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen aanpassen.

text-align: center;

Tekst horizontaal centreren. Omdat er tussen 'Meer' en 'hulp' een <br> staat, worden beide woorden onder elkaar gezet en apart gecentreerd.

padding: 5px;

Kleine afstand tussen tekst en rand van de link.

border: black solid 1px;

Zwart randje.

border-radius: 5px;

Ronde hoeken. Internet Explorer 8 kent border-radius niet, dus die krijgt gewoon rechte hoeken.

position: absolute;

Om de link op de juiste plaats te kunnen zetten.

Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#wrapper.

Een <a> is van zichzelf een inline-element. Door de link absoluut te positioneren, verandert deze in een blok-element. Hierdoor kun je eigenschappen als text-align gebruiken.

top: 0;

Helemaal bovenin div#wrapper neerzetten. Normaal genomen zou de link onder het vraagteken komen te staan, nu komt de link hier overheen te staan. Zou je de link niet over het vraagteken zetten, dan zou het mogelijk een deel van de pagina afdekken, waar iets anders staat.

left: -8000px;

Ver links buiten het scherm parkeren, zodat de link onzichtbaar is.

Eigenlijk zou ik deze link liever verbergen met display: none;. Veel screenreaders en dergelijke negeren alles, wat op deze manier is verborgen. Daarmee zou dan worden voorkomen dat deze link twee keer wordt voorgelezen, want hij staat ook al in de pop-up zelf. Maar bij gebruik van display: none; wordt de link ook niet gezien, als je de Tab-toets gebruikt. En daar is deze extra link nou net voor bedoeld.

#tab-meer-hulp:focus

Het element met id="tab-meer-hulp", maar alleen als dit focus heeft.

Dit is de link voor mensen die de Tab-toets gebruiken om links, invoervelden, en dergelijke af te gaan. Door het indrukken van de Tabtoets worden dit soort elementen één voor één afgelopen. Dit soort elementen krijgt om de beurt de 'focus'.

left: -0.8em;

Bij #tab-meer-hulp is deze link ver links buiten het venster geparkeerd, zodat hij onzichtbaar is. Als iemand hier met de Tab-toets is aangekomen en de link dus focus heeft, wordt hij binnen het venster van de browser gezet en wordt dus zichtbaar. Mensen die de Tab-toets niet gebruiken, zullen deze link nooit zien. Dat hoeft ook niet, want binnen de pop-up zit eenzelfde link.

Speciaal voor Internet Explorer 8

<!--[if IE 8]> <style> #schermpje:hover + #sluiten, #schermpje:focus + #sluiten {display: none;} </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 8, 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 8]> <link rel="stylesheet" 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 8 in. De css voor Internet Explorer 8 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

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

De toevoeging type="text/css" bij <style> of <link> is bij html5 niet meer nodig, omdat dit de standaardinstelling is. Met ingang van versie 10 van Internet Explorer werken conditional comments niet meer.

#schermpje:hover + #sluiten, #schermpje:focus + #sluiten

Als over het element met id="schermpje" wordt gehoverd, of als dit element focus heeft, doe dan iets met het in de html gelijk daarop volgende element met id="sluiten".

div#schermpje is de div waarin vraagteken en pop-up zitten.

#sluiten is de span, waarin het sluitvakje zit.

display: none;

In de algemene css wordt bij hoveren over #schermpje, of als dit focus heeft, het sluitvakje geopend. Dit wordt hiermee in Internet Explorer 8 voorkomen.

Hoewel heilig vergeleken met z'n voorgangers, is ook Internet Explorer 8 nog steeds een waar luilekkerland voor bugs. Om wat voor reden dan ook blijft het sluitvakje geopend, als de rest van de pop-up weer sluit.

Dat is ongetwijfeld met de juiste mix van hogere wiskunde, astrologie, whisky, kalmerende middelen en masochisme op te lossen. Ik vind het net iets aantrekkelijker dit in Internet Explorer 8 overbodige vakje gewoon helemaal niet te tonen.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.

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:

Specifiek voor dit voorbeeld

Getest in

Laatst gecontroleerd op 7 februari 2013.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan hieronder bij Bekende problemen. Het is belangrijk dat te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Eventuele opmerkingen over de toegankelijkheid specifiek voor dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Dit voorbeeld is getest op de volgende systemen:

Er is steeds getest met de laatste versie van de browsers op de hierboven genoemde controledatum, 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 resoluties groter dan 800x600 is ook in- en uitzoomen en - voor zover de browser dat kan - een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Er is getest met behulp van muis en toetsenbord, behalve op de iPad en Android, waar een touchscreen is gebruikt. Op Windows 8 is zowel met een touchscreen als met een combinatie van toetsenbord en touchpad getest.

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 specifiek voor dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Android browser werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar eigenlijk geen beginnen aan.

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

Bekende problemen

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.

Alle browsers op de desktop

  • 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 binnen het venster van de browser, 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 venster is neergezet.

    Oplossing: zet de pop-up hoger neer, zodat ze altijd binnen het venster van de browser past.

    Als je de waarde bij left even verandert naar 0, komt de pop-up op het scherm te staan en kun zien op welke hoogte hij staat. Nu kun je hem zo hoog zetten dat hij altijd op het binnen het venster past. Daarna de waarde voor left weer terugzetten.

Internet Explorer 8

Omdat Internet Explorer 8 border-radius niet kent, heeft de link voor gebruikers van de Tab-toets geen ronde hoeken.

Wijzigingen

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

:

Nieuw opgenomen.

7 april 2009:

Tekst aangepast voor de nieuw verschenen Internet Explorer 8. De code is niet veranderd.

7 februari 2013:

Dit hele voorbeeld is volledig herschreven. Hieronder staan alleen maar de belangrijkste wijzigingen. Uitleg is op de betreffende plaatsen elders in de tekst te vinden.

6 maart 2013: