Uitleg pop-up met tekst, afbeelding en achterliggende pagina

Skip links en inhoudsopgave

Laatst aangepast: .

Afbeelding 1: pop-up met tekst, afbeelding en link naar achterliggende pagina

Korte omschrijving

Bij hoveren over of aanraken van 'n vraagteken opent 'n pop-up met daarin tekst, 'n afbeelding en 'n 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 op een touchscreen 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: de tekst in het vakje rechtsonder. Voor het oog staat die tekst binnen de pop-up, maar in werkelijkheid staat ze er helemaal los van. Andere systemen hebben hier geen last van, en op iOS kan de pop-up nu worden gesloten door het het vak met de tekst aan te raken.

Afbeelding 2: pop-up

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#nee met de tekst voor het vakje rechtsonder, en een a#tab-ja voor mensen die de muis niet kunnen of willen gebruiken.

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

Het tweede element binnen de geneste div#schermpje is de pop-up zelf. Deze bestaat uit een span#tekst>, waarbinnen een naar links gefloate afbeelding en wat gewone tekst staan. 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.

Binnen deze span#tekst staat ook de link met 'Ja! maak mij rijk!' Door deze in een aparte span te zetten, kan hij op de juiste plaats worden gepositioneerd en zo.

Het vraagteken is even groot als de binnenste div#schermpje. Bij hoveren over het vraagteken hover je dus ook over de binnenste div#schermpje. Hierdoor opent de pop-up.

Binnen de buitenste div#wrapper staat nog een span#nee, waarbinnen de tekst voor het sluitvakje rechtsonder staat. Als je over de binnenste div#schermpje hovert, wordt ook de tekst rechtsonder getoond. Deze tekst staat weliswaar buiten div#schermpje, maar kan toch reageren op hoveren over div#schermpje door het gebruik van de 'adjacent selector' (ik ken geen Nederlandse vertaling) +:

#schermpje:hover + #nee

Doe iets met het gelijk op #schermpje volgende element #nee, als over #schermpje wordt gehoverd.

Deze span met tekst staat in de html buiten de eigenlijke pop-up, maar wordt op het scherm binnen de pop-up gepositioneerd. Omdat de span buiten de pop-up staat, kan deze span op iOS worden gebruikt om de pop-up te sluiten.

(Bij aanraken van of hoveren over het sluitvakje rechtsonder sluit trouwens in alle browsers de pop-up. Maar alleen voor iOS is het echt belangrijk.)

Het rode sluitkruisje is nog 'n verhaal apart. Omdat niet gelijk duidelijk is, hoe op een touchscreen de pop-up weer kan worden gesloten, leek het handig dat aan te geven met behulp van 'n sluitkruisje: de rode 'X'. Dat sluitkruisje hoort dus eigenlijk bij de tekst rechtsonder. Het bleek echter onmogelijk het sluitkruisje in alle browsers op de juiste plaats neer te zetten, als het in de span met de tekst rechtsonder stond. In sommige browsers verscheen een foeilelijke kier, in andere stond de 'X' niet goed in het midden. En als je de ene goed had, was 'n andere weer vergriept. Dit heeft met afrondingsverschillen tussen de browsers te maken.

Daarom is het sluitkruisje in de span met 'Ja! maak mij rijk!' opgenomen. Die span beslaat de volle breedte van de pop-up. Daardoor kan het sluitkruisje in de rechterbovenhoek worden gepositioneerd, en dit werkt wel goed.

Ditzelfde probleem speelt trouwens bij het op de juiste plaats zetten van de tekst rechtsonder. Alleen hoeft die tekst niet exact op de rand aan te sluiten, dus daar maken 1 of 2 px meer of minder niet uit. Bij het sluitkruisje is 'n kier van 1 of 2 px px ronduit foeilelijk.

Omdat er 'n sluitkruisje aanwezig is in het vakje rechtsonder, moet daarvoor in de tekst ruimte worden gemaakt. Daarom is in die tekst een lege span opgenomen die naar rechts wordt gefloat. Die span komt op dezelfde plaats als het sluitkruisje te staan. Met de juiste breedte en hoogte zorgt die span ervoor, dat de tekst niet over het sluitkruisje komt te staan.

(Ook die lege span is trouwens niet in alle browsers op exact dezelfde plaats neer te zetten, maar omdat je die niet ziet, is dat geen probleem.)

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.

Als je de Tab-toets nogmaals indrukt, krijgt het volgende element focus. Dat is de in de pop-up zittende link naar de achterliggende pagina. Helaas verliest daardoor de div focus, waardoor de pop-up sluit. Waardoor je ook de daarin zittende link niet meer ziet en deze dus redelijk nutteloos wordt voor gebruikers van de Tab-toets. 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, hoewel dat (nog) niet werkt in alle screenreaders.

Ook bij de 'X' van het sluitkruisje is aria-hidden="true" toegevoegd, want zo'n losse 'X' is bij voorlezen ook alleen maar verwarrend.

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

:hover

Omdat :hover> mogelijk niet werkt als css uitstaat, ontbreekt of onvolledig is geïmplementeerd, 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 geïmplementeerd, 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 echt 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 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 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 en speelt dus geen rol op touchscreens. Als deze link wordt gebruikt en je gaat daarna met de Terug-toets terug, is deze link nog zichtbaar, omdat hij nog steeds focus heeft.

Alleen in Google Chrome (alle systemen) 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. En bij net nogmaals indrukken van de Tab-toets verliest ook deze link focus en verschijnt het vraagteken weer.

:active

Omdat :active mogelijk niet werkt als css uitstaat, ontbreekt of onvolledig is geïmplementeerd, 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 of het vraagteken aanraakt, zul je per definitie ook boven het vraagteken hoveren of dit aanraken.

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, laten alle geteste browsers de pop-up 'n fractie van 'n seconde zien 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 verschijnen.

Verder moet bij de link binnen de pop-up nog worden toegevoegd aria-haspopup="false". Die link is namelijk een nakomeling van div#schermpje, 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.

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#schermpje.

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

Dat is hier de functie van span#nee, die ook onclick heeft gekregen, zodat de span op aanraken reageert. Door het aanraken van span#nee wordt de pop-up weer gesloten. Zonder zo'n extra element dat op aanraking reageert, kan de pop-up op iOS niet op een simpele manier worden gesloten.

Door span#nee vervolgens rechtsonder binnen de pop-up te positioneren, ontstaat er rechtsonder een plaats waar de pop-up weer kan worden gesloten.

In werkelijkheid staat span#nee dus eigenlijk los van de pop-up, maar voor het oog is het één geheel.

Ook een willekeurige andere link, een invoerveld, en dergelijke kan de pop-up laten sluiten. 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. Ook niet echt ideaal dus.

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.

Daarom is deze pop-up tot een min of meer afgerond geheel gemaakt: de mogelijkheid om de pop-up te sluiten zit binnen de pop-up zelf. 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.

(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 gelijk wat beperkter.

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

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.

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 rechtsonder 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 ontbreken 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.

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 (&uml; 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">

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 dat in dit voorbeeld tussen <style> 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>

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

* 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 dit, 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 zal er nog iets meer op de pagina staan dan deze constructie.)

top: 10px;

10 px vanaf de bovenkant neerzetten.

left: 100px;

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

#tekst

Het element met id="tekst". Dit is de span, waarbinnen de afbeelding, de tekst van de pop-up en de link naar de achterliggende pagina zitten.

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: 9.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.

Deze hoogte is eigenlijk soms wat te groot. De tekst in het sluitvakje rechtsonder wordt bij #nee vanaf de bovenkant van div#wrapper gepositioneerd. Die tekst moet binnen de pop-up, binnen #tekst, komen te staan: tussen de tekst van de pop-up en de border aan de onderkant van de pop-up.

Bij deze hoogte levert dat in sommige browsers 'n kleine lege ruimte onder de tekst van de pop-up op. Maar andere browsers hebben soms 'n net iets grotere letter, waardoor in die browsers 'n extra regel nodig is. Omdat die lege ruimte op geen enkele manier storend is, is dit de simpelste oplossing.

border: black solid 2px;

Zwart randje rondom de pop-up.

padding: 5px 5px 3em;

Omdat voor links geen waarde is opgegeven, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 5px 5px 3em 5px in de volgorde boven – rechts – onder – links.

Aan boven-, rechter‑ en linkerkant wat ruimte tussen tekst en rand van de pop-up.

Aan de onderkant een grotere ruimte. Hierdoor ontstaat daar een lege ruimte, waarin de link naar de achterliggende pagina en de tekst in het sluitvakje rechtsonder kunnen worden neergezet. Omdat als eenheid aan de onderkant em is genomen, verandert de hoogte van die lege ruimte mee met een andere lettergrootte. Links en rechts is dat niet nodig, daar is 5 px altijd goed.

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, verandert deze in een soort blok-element. 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. Hierdoor komt de pop-up niet onder, maar over het vraagteken te staan.

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

#klok

Het element met id="klok". Dat is de afbeelding van de klepel.

float: left;

Zo hoog mogelijk neerzetten en dan zover mogelijk naar links.

margin: 10px;

Kleine ruimte aan alle kanten.

#ja

Het element met id="ja". Dit is de span, waarbinnen de link met 'Ja! maak mij rijk!' en het rode sluitkruisje staan.

width: 100%;

Een breedte in procenten wordt altijd genomen opzichte van de ouder. Dat is hier span#tekst, waarin de tekst van de pop-up staat. Deze span wordt dus even breed als de pop-up. Dit geeft de mogelijkheid een border aan de bovenkant te zetten, die dan ook even breed wordt als de pop-up. Op deze manier is er een scheiding tussen de eigenlijke tekst in de pop-up en de daaronder staande link en de tekst in het sluitvakje rechtsonder.

font-size: 2em;

Lekker grote letter. Als eenheid wordt em genomen, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen aanpassen.

text-align: center;

Tekst horizontaal centreren. Dat zou hier inhouden dat de tekst van de link horizontaal wordt gecentreerd. Dat gebeurt echter niet, omdat bij #ja a de breedte van de link tot de helft van de pop-up wordt beperkt.

border-top: black solid 1px;

Zwart randje aan bovenkant.

position: absolute;

Om de span en dus de daarin zittende link op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf fixed, absoluut of relatief is gepositioneerd. Dat is hier span#tekst, de span waarin de eigenlijke pop-up staat.

Deze span met de link zou ook op 'n andere manier gewoon onder de rest van de tekst gezet kunnen worden. Maar hij moet naast het sluitvakje rechtsonder komen te staan, en dat moet van buiten de pop-up worden gepositioneerd. Het sluitvakje en de span met de link zijn op deze manier het makkelijkste en beste op elkaar af te stemmen.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren verandert deze in 'n soort blok-element, waardoor eigenschappen als breedte zijn te gebruiken.

bottom: 0;

Helemaal onderaan span#tekst zetten, onder de tekst in de pop-up.

left: 0;

Als bij left niets wordt opgegeven, wordt ook een absoluut gepositioneerd op de normale positie neergezet. Dat is hier aansluitend aan de rechterkant van de tekst van de pop-up, wat niet de bedoeling is.

Nu wordt de span, en dus de daarin zittende link, helemaal links neergezet.

#ja span

De spans binnen het element met id="ja". Dat is er hier maar eentje: het rode sluitkruisje.

Ik had dat sluitkruisje liever binnen de tekst in het sluitvakje rechtsonder gezet, maar het blijkt van daaruit niet goed te positioneren. Als je het in de ene browser goed hebt, heb je in de andere een kleine uiterst lelijke kier tussen kruisje en omtrek van de pop-up.

Omdat span#nee met het sluitvakje over het sluitkruisje heen komt te staan, wordt de pop-up toch gewoon gesloten bij hoveren over of aanraken van het sluitkruisje. Je ziet het sluitkruisje wel, maar daaroverheen staat gewoon span#nee.

Feitelijk heeft het sluitkruisje geen enkel technisch nut. Maar het zal niet voor iedereen gelijk duidelijk zijn, hoe je die pop-up weer kunt sluiten. Daarvoor is dit kruisje bedoeld.

color: red;

Voorgrondkleur, waaronder de tekstkleur, rood.

width: 0.6em; height: 0.6em;

Vierkantje maken. Als eenheid wordt em gebruikt, zodat breedte en hoogte mee veranderen met de lettergrootte. Deze maten zijn door uitproberen gevonden.

overflow: hidden;

Het sluitkruisje is 'n doodgewone letter 'X'. Het lukte niet die letter in elke browser goed horizontaal en verticaal in het midden te krijgen. Stond hij in de ene browser goed, dan zag je in de andere een kier. Dat is opgelost door de letter groter te maken dan het vakje, waar hij in staat. Dat lost het probleem van kieren radicaal op.

Maar nu steekt de 'X' in sommige browsers uit buiten de zwarte omranding. Dat uitstekende deel wordt op deze manier verborgen.

font-size: 1em;

Door uitproberen blijkt dit de juiste maat te zijn om de 'X' goed neer te kunnen zetten. Door als eenheid em te nemen, verandert de 'X' ook in Internet Explorer mee met de lettergrootte, waardoor de lay-out intact blijft.

line-height: 0.65em;

In combinatie met lettergrootte, hoogte en breedte zet dit de 'X' verticaal in het midden. Ook deze maat is weer door simpelweg proberen gevonden. (Ja, inderdaad, het doet denken aan de tafel met vier poten, waarvan er ééntje te hoog is.)

Door als eenheid em te nemen, blijft ook in Internet Explorer de lay-out bij een andere lettergrootte intact.

border: black solid;

Zwart randje rondom het sluitkruisje. Hier geef ik alleen kleur en stijl op, gelijk hieronder wordt de breedte opgegeven.

border-width: 0 0 1px 1px;

Kleur en stijl zijn gelijk hierboven al opgegeven. Boven en rechts geen border, daar staat de border van de pop-up al. Onder en links wel een border.

Ik had ook twee aparte regels kunnen gebruiken voor een border onder en een border rechts, maar deze gecombineerde regels zijn iets korter.

position: absolute;

Om het kruisje 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 span#ja: de span waar de link 'Ja! maak mij rijk!' in staat.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren, verandert hij in een soort blok-element, waardoor eigenschappen als breedte en hoogte zijn te gebruiken.

top: 0; right: 0;

In de rechterbovenhoek van span#ja zetten. Bij #ja is span#ja even breed als de pop-up gemaakt, dus het sluitkruisje komt helemaal rechts in de pop-up te staan.

#ja a

De links in het element met id="ja". Dat is er hier maar eentje: de link met 'Ja! maak mij rijk!'

display: block;

Een <a> is van zichzelf een inline-element. Door het te veranderen in een blok-element, kan ik eigenschappen als breedte gebruiken.

width: 47%;

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier span#ja, die bij ja even breed als de pop-up is gemaakt: 100%. Deze link beslaat dus iets minder dan de helft van de breedte van de pop-up. Samen met de hieronder opgegeven border en padding kom je toch op (ongeveer) 50% uit.

border-right: black solid 1px;

Rechts een lijntje als afscheiding met de tekst in het sluitvakje rechtsonder.

padding: 4px 10px 10px;
Afbeelding 4: link en sluitvakje onder eigenlijke pop-up
Afbeelding 4: door de padding boven en onder de link aan de linkerkant, ontstaat er genoeg ruimte om de tekst rechts binnen het kader neer te kunnen zetten.

Omdat voor links geen waarde is opgegeven, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 4px 10px 10px 10px in de volgorde boven – rechts – onder – links.

Door boven en onder wat padding te geven, wordt de link iets hoger. Hierdoor komt er binnen de zwarte rand genoeg ruimte voor de tekst die rechtsonder in het sluitvakje moet komen te staan, en die daar later 'van buitenaf' wordt gepositioneerd. Onder is wat meer padding gegeven dan boven, omdat de tekst zo meer in het midden lijkt te staan.

De padding links en rechts zorgt ervoor dat er ook bij andere lettergroottes altijd wat afstand is tussen tekst en zwarte rand.

#schermpje:hover #tekst, #schermpje:focus #tekst

Doe iets met het element met id="tekst" dat binnen het element met id="schermpje" zit, maar alleen als over #schermpje wordt gehoverd.

#schermpje is de div waar vraagteken, pop-up en link naar achterliggende pagina in zitten.

#tekst is de span waar pop-up en link naar achterliggende pagina in zitten.

In dit geval worden pop-up en link naar achterliggende pagina zichtbaar, als over #schermpje wordt gehoverd.

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.

right: -30em; left: auto;

Bij #tekst is de pop-up opgemaakt en ver links buiten het scherm neergezet, zodat hij normaal genomen onzichtbaar is. Door de pop-up binnen het venster van de browser te zetten, wordt deze zichtbaar. Als eenheid wordt em genomen, zodat de plaats mee verandert met de lettergrootte. Dit voorkomt dat mogelijk delen van de pop-up buiten het venster van de browser zouden komen te staan en daardoor niet meer zichtbaar zouden zijn.

De span met de pop-up is met behulp van left buiten het scherm neergezet. Normaal genomen zou ik dan ook weer left gebruiken om de pop-up binnen het scherm te zetten, want dan heb je right helemaal niet nodig, en dat scheelt weer wat css. Hier lukt dat niet.

Verderop in de html staat span#nee met de tekst die rechtsonder moet komen te staan. Die tekst wordt bij #schermpje:hover + #nee, #schermpje:focus + #nee als het ware 'van buitenaf' in de pop-up gepositioneerd. Dat positioneren lukt alleen maar goed, als dat vanaf de rechterkant gebeurt. Om #tekst en #nee op elkaar af te kunnen stemmen, moet #tekst dan ook vanaf rechts worden gepositioneerd.

Omdat bij #tekst left is gebruikt om te positioneren, moet dat hier worden teruggezet naar de standaardwaarde: auto. Hierdoor heeft het geen invloed meer.

#nee

Het element met id="nee". Dit is de span, waarbinnen de tekst in het sluitvakje rechtsonder staat. Deze span staat buiten de eigenlijke pop-up, hij wordt daar als het ware 'van buitenaf' op gepositioneerd. Dit geeft de mogelijkheid deze span op iOS te gebruiken, om de pop-up weer te kunnen sluiten.

width: 24.6em;

Met deze breedte vult de span, en dus de daarin zittende tekst, ongeveer de helft van de ruimte onder de pop-up. In de linkerhelft staat de link naar de achterliggende pagina, die bij #ja a een breedte van ongeveer de helft heeft gekregen. De link en deze span vullen samen dus de ruimte onder de pop-up.

Bij deze span kan ik geen procenten gebruiken om de breedte te bepalen, zoals bij de link aan de linkerkant #ja a is gebeurd. Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Bij #ja a is dat #tekst, maar bij deze span is dat div#wrapper. Omdat #ja a en #nee geen gezamenlijke ouder hebben, levert een breedte in procenten een totaal verschillende breedte op. 1% van div#wrapper is een totaal andere breedte dan 1% van #tekst.

Deze breedte is gevonden door uitproberen. Door als eenheid em te nemen, verandert de breedte mee met de lettergrootte, waardoor de lay-out intact blijft.

font-size: 0.65em;

Tamelijk kleine letter. Door als eenheid em te nemen, kunnen ook gebruikers van Internet Explorer de lettergrootte veranderen.

line-height: 1.1em;

De regelhoogte is standaard ongeveer 1,2 em. Door de regelhoogte iets te verkleinen, past de tekst net in het vakje rechtsonder. Door als eenheid em te nemen, verandert ook in Internet Explorer de regelhoogte mee met de lettergrootte.

padding: 0 0.8em;

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 0.8em 0 0.8em in de volgorde boven – rechts – onder – links.

Boven en onder is geen padding nodig. top, lettergrootte en regelafstand zijn hier voldoende om de verticale uitlijning te regelen.

Links en rechts kleine afstand tussen randje en tekst.

position: absolute;

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

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

top: 15.7em;

Op deze hoogte komt de tekst precies op de juiste plaats te staan. Omdat als eenheid em is gebruikt, blijft ook bij een andere lettergrootte alles op de juiste plaats staan.

left: -8000px;

8000 px naar links zetten. Dat is zelfs op het breedste scherm ver buiten de linkerkant, waardoor je de tekst niet ziet. Als de tekst getoond moet worden, hoeft alleen deze waarde veranderd te worden, waarna de pop-up op het scherm komt te staan.

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

#nee span

Afbeelding 5: onzichtbare span om tekst boven sluitkruisje te voorkomen even zichtbaar gemaakt

De spans binnen het element met id="nee". Dat is er hier maar eentje.

In het sluitvakje staat ook een rood sluitkruisje. Omdat dat kruisje niet goed was te positioneren van buiten de pop-up, staat dat bínnen de pop-up. Maar daardoor zou de tekst binnen span#nee gewoon over dit kruisje heen komen te staan. Om dat te voorkomen, wordt binnen #nee een leeg vakje aangebracht dat even groot is als het sluitkruisje.

Dit lege vakje wordt naar rechts gefloat, waardoor het op dezelfde plaats komt te staan als het sluitkruisje. Omdat de tekst rondom dit gefloate lege vakje loopt, loopt de tekst daardoor ook rondom het sluitkruisje.

Op de afbeelding is het lege vakje dat #nee span oplevert even doorschijnend groen gemaakt. Ook dit vakje is niet precies goed te positioneren, maar omdat het onzichtbaar is, is dat geen probleem.

width: 1.3em; height: 2em;

Met deze breedte en hoogte blijft het sluitkruisje vrij van tekst, ook bij een andere lettergrootte. De grootte van dit lege vakje hoeft niet op de pixel precies even groot te zijn als het sluitkruisje, als het sluitkruisje maar vrij blijft van tekst.

float: right;

Zo hoog mogelijk en dan zover mogelijk naar rechts neerzetten. Hierdoor komt het in de rechterbovenhoek van span#nee te staan, bovenop het sluitkruisje.

Speciaal voor iOS wordt #nee 'van buitenaf' boven de pop-up gezet, zodat een aanraking van #nee zorgt dat de pop-up wordt gesloten. Omdat deze span onderdeel is van #nee, laat ook een aanraking van dit lege vakje de pop-up sluiten. Je ziet het sluitkruisje, maar je raakt in werkelijkheid deze onzichtbare span aan.

Een span is van zichzelf een inline-element. Door de span te floaten verandert deze in een soort blok-element. Hierdoor kunnen eigenschappen als breedte en hoogte worden gebruikt.

#schermpje:hover + #nee, #schermpje:focus + #nee

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="nee".

De + is de zogenaamde 'adjacent selector". Ik ken geen Nederlandse vertaling voor dit begrijp. 'adjacent' betekent 'aangrenzend', 'naaste'. De + geeft aan, dat #nee in de html gelijk op #schermpje moet volgen.

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.

#nee is de span, waarin de tekst in het sluitvakje rechtsonder 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#nee kun je niet hoveren, want die is bij #nee met ver links buiten het scherm geparkeerd. Toch moet ook de tekst in het 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#nee. Door over div#schermpje te hoveren gebeurt er nu ook iets met het daarop volgende #nee, ook al kun je daar dan niet rechtstreeks over hoveren.

right: -46em; left: auto;

Bij #nee is de tekst rechtsonder opgemaakt en ver links buiten het scherm neergezet, zodat hij normaal genomen onzichtbaar is. Door de tekst binnen het venster van de browser te zetten, wordt deze zichtbaar. Als eenheid wordt em genomen, zodat de plaats mee verandert met de lettergrootte. Hierdoor blijft ook bij een andere lettergrootte de tekst op de juiste plaats binnen de pop-up staan.

De span met de tekst is met behulp van left buiten het scherm neergezet. Normaal genomen zou ik dan ook weer left gebruiken om de tekst binnen het scherm te zetten, want dan heb je right helemaal niet nodig, en dat scheelt weer wat css. Hier lukt dat niet.

span#nee met de tekst voor het sluitvakje rechtsonder wordt als het ware 'van buitenaf' in span#tekst met de pop-up gepositioneerd. Dat positioneren lukt alleen maar goed, als dat vanaf de rechterkant gebeurt.

Omdat bij #nee left is gebruikt om te positioneren, moet dat hier worden teruggezet naar de standaardwaarde: auto. Hierdoor heeft het geen invloed meer.

#tab-ja

Afbeelding 6: link naar achterliggende pagina voor gebruikers Tab-toets

Het element met id="tab-ja". 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 de manier waarop Google Chrome aangeeft 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.

padding: 5px;

Kleine ruimte tussen tekst en buitenkant van de span.

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 soort van 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-ja:focus

Het element met id="tab-ja", 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: de elementen krijgen om de beurt de 'focus'. Als je op Enter druk bij een link die focus heeft, wordt de link gevolgd.

left: -0.8em;

Bij #tab-ja 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.

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 2 maart 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 binnen het venster past. Daarna de waarde voor left weer terugzetten.

Opera Mini op Android 2.3.6 en iOS 6.1

Ik test alleen op deze twee versies van Opera Mini. Maar ik neem aan dat dit in alle versies speelt, omdat ze beide precies dezelfde afwijking hebben.

De tekst rechtsonder wordt volledig buiten de pop-up geplaatst:

Afbeelding 7: foutieve weergave in Opera Mini

De pop-up kan worden gesloten door de tekst aan te raken, maar echt duidelijk is dit natuurlijk niet. Het is wel op de juiste plaats te positioneren in Opera Mini, maar dan staat het in alle andere browsers volkomen verkeerd.

Inmiddels werkt het op de site beter. Andere afwijkingen, deze keer in de download: de tekst in het sluitvakje staat gewoon ’n heel stuk te hoog, de tekst in het sluitvakje steekt aan boven- en onderkant uit buiten het sluitvakje, kennelijk omdat de regelafstand afwijkt.

Al deze afwijkingen vonden plaats met exact dezelfde code. Ik heb er geen flauw idee van, waardoor ze worden veroorzaakt.

Nou is het gebruik van Opera Mini in Nederland en België minimaal, maar wereldwijd is dat zeker niet zo.

Internet Explorer 8

  • Bij gebruik van de Tab-toets om de pop-up te openen, hoort deze weer te sluiten als nogmaals de Tab-toets wordt ingedrukt. Dat gebeurt ook, maar de tekst rechtsonder sluit niet. Nogmaals de Tab-toets indrukken, even klikken of de muis even stevig bewegen, doet ook deze tekst verdwijnen. Mogelijk is dit op te lossen, maar dat heb ik niet echt lang geprobeerd: het zijn geen grote problemen, het gebruik van deze browser vermindert snel en ik heb het 'n beetje gehad met dit krakkemikkige heksenbrouwsel.
  • Als je op de link binnen de pop-up klikt, wordt de achterliggende pagina geopend. Als je vervolgens teruggaat met de Terug-toets (of Alt+←), heeft de link voor gebruikers van de Tab-toets focus en is deze daardoor zichtbaar. Hoe ze dat nou weer voor elkaar hebben weten te krijgen...

    Zelfde verhaal als hierboven: geen ernstig probleem, gebruik mindert snel en gebrek aan motivatie om serieus naar 'n oplossing te zoeken.

  • De link voor gebruikers van de Tab-toets heeft geen ronde hoeken, omdat het Microsoft pas zo'n twee jaar geleden is gelukt om dit te implementeren (in versie 9). Ongeveer 398 jaar na alle andere browsers. Op de pagina met links staan onder CSS → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer scripts en dergelijke om ook deze browser ronde hoeken te geven. Ik heb dat niet gedaan, omdat het om 'n kleinigheid gaat.

Zoomen en andere tekstgrootte

Bij heel sterk vergroten of verkleinen (tot meer dan 200% of minder dan 70%) komt de tekst gedeeltelijk over elkaar te staan. Maar dat gebeurt dus alleen, als je echt onwijs sterk vergroot of verkleint.

Wijzigingen

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

:

Nieuw opgenomen.

8 april 2009:

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

12 juli 2011:

Hoogte weggehaald bij a#link span#hulp. Hoe die er ooit is gekomen, is me niet helemaal duidelijk. De span is veranderd in een blok-element, en bij een blok-element wordt de hoogte normaal genomen automatisch aangepast aan de hoeveelheid inhout.

In dit geval gaf de hoogte zelfs problemen. De hoogte was opgegeven in em. Een regel heeft normaal genomen automatisch een regelhoogte van ongeveer 1.2 em. De hoogte was berekend op het aantal regels zonder de lettergrootte te veranderen of te zoomen. Maar bij een andere lettergrootte verandert het aantal regels en klopte de hoogte dus niet meer. In dit geval was het dus veel beter gewoon de browser de benodigde hoogte te laten vaststellen.

2 maart 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.