Skip links en inhoudsopgave

Laatst aangepast: .

Pop-up met kader met ronde hoeken

Korte omschrijving

Bij hoveren over 'n link opent 'n pop-up met tekst. Rondom de tekst staat een kader met ronde hoeken.

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

Als dit voorbeeld bekeken wordt met een programma dat de css uitschakelt, wordt de pop-up als één lange tekst weergegeven. Daardoor kan hij (heel) slecht leesbaar worden. Houdt hier dus rekening mee door bijvoorbeeld regelmatig een <br /> te gebruiken, zodat het niet één lange regel wordt als de css is uitgeschakeld. Zie bij De spider van 'n zoekmachine... om te zien hoe je zelf kunt bekijken hoe dit eruit ziet.

Afhankelijk van instellingen en programma, lezen screenreaders en dergelijke de tekst van de titel bij de link en/of de tekst binnen de pop-up. Omdat dus niet zeker is of de tekst van de pop-up wordt gelezen, moet hierin geen belangrijke informatie worden gezet.

Inmiddels kun je ook met de css3-eigenschap border-radius ronde hoeken maken in Firefox, Google Chrome, Opera, Safari en Internet Explorer 9. Dit is een veel betere manier dan die hier wordt beschreven. Voor oudere versies van Internet Explorer kan een filter worden gebruikt, of je kunt met behulp van 'conditional comments' de hier gebruikte methode speciaal voor die oudere browsers gebruiken. Zie voor voorbeelden met border-radius www.css-voorbeelden.nl/kader.

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

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

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

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Voor pop-ups wordt vaak JavaScript gebruikt. Heel vaak kan dat ook prima met css. Voordelen zijn dat het makkelijker is en ook 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 helaas alleen bij 'n echte link: <a>.

Daarom moeten vaak kunstgrepen worden toegepast om via een of andere constructie toch maar 'n <a> toe te voegen, zodat 't ook werkt in zonder twijfel de slechtste browser die ooit is gemaakt, maar die helaas - op het moment van schrijven - nog door zo'n twintig procent van de mensen wordt gebruikt.

Het vraagteken is een gewone link met maar één groot leesteken: het vraagteken. Als je over het vraagteken hovert opent een pop-up met daarin een tekst. Deze pop-up is zo groot te maken als je wilt en kan in principe overal worden neergezet. In dit geval staat ze boven het vraagteken, maar dat hoeft niet.

Omdat normale tekst wordt gebruikt, kan de tekst op de gewone manier vergroot en verkleind worden, binnen zekere grenzen natuurlijk.

Maar hoe kan het nou dat die hele pop-up tevoorschijn komt bij 'n gewone link? Deze link bevat de code <a>?</a>. 't Ziet er wat ingewikkelder uit, maar als je al 't tussenliggende weglaat, staat dit er echt.

Als ik nu achter het vraagteken 'n span toevoeg, blijk ik daar allerlei tekst in te kunnen zetten, inclusief opmaak enz., en zelfs een kader met ronde hoeken.

Die span verberg ik door hem buiten het scherm te parkeren, en bij hoveren plaats ik hem op het scherm.

Voor de maten gebruik ik zoveel mogelijk em, zodat ook in Internet Explorer vergroot/verkleind kan worden.

Rondom de tekst staat een kader met ronde hoeken. Je zou denken dat het redelijk simpel is om 'n kadertje met ronde hoeken om 'n blok tekst of zo te zetten, maar dat is niet zo. Rechte lijnen is geen probleem, dat kan gewoon met 'n border.

In css3 kun je ronde hoeken maken, maar dat wordt nog niet in alle browsers ondersteund. 'n Andere mogelijkheid zou SVG (Scalable Vector Graphics) zijn, 'n soort standaard-tekentaal, maar tot nu toe weigert Microsoft helaas dat te ondersteunen, waardoor het dus ook niet bruikbaar is op internet (buiten internet wordt het veel gebruikt). De enige mogelijkheid op dit moment is het gebruik van plaatjes. (Er zijn nog wel wat trucs, maar die sla ik nu maar even over, want die zijn veel ingewikkelder.)

Het probleem zit 'm erin dat je niet weet hoe groot de inhoud precies is. Letters kunnen vergroot en verkleind worden, er kan worden in- of uitgezoomd, enz. Kortom: het is onmogelijk om 'n kader te maken dat altijd past, tenzij dat kader mee kan krimpen en groeien met de inhoud.

Het hier gemaakte kadertje levert 'n simpel lijntje op met ronde hoeken, dat meegroeit en -krimpt met de inhoud.

De verticale lijnen zijn doodsimpel: dat zijn gewone borders. Dat is ook het deel dat meegroeit of -krimpt bij een andere lettergrootte en bij meer of minder inhoud. De breedte blijft hetzelfde. Als je dat wilt kun je trouwens de breedte ook mee laten veranderen met 'n andere lettergrootte, zie bij width: 400px.

Bij in- of uitzoomen verandert de breedte altijd, maar dat regelt de browser.

De twee hoeken aan de bovenkant zitten aan elkaar vast, met een lange lijn ertussen. Het geheel is 1500 px breed, dus daar kun je aardig wat in kwijt. Vooral omdat er twee naast elkaar worden gezet, dus dat is haast 3000 px. De bestandsgrootte is verwaarloosbaar, nog geen 300 byte, en als ze zo breed zijn, kunnen ze overal worden gebruikt.

Hoeken en lijn aan de bovenkant
In werkelijkheid is de witte achtergrond doorzichtig.

De eerste lijn met de twee hoeken wordt gewoon bovenaan neergezet, in een aparte span. De tweede wordt daar gelijk ondergezet, ook in 'n eigen span. Dit is twee keer precies hetzelfde plaatje. Van het eerste plaatje wordt de linkerhoek gebruikt, van het tweede de rechterhoek.

Omdat de spans in blok-elementen zijn veranderd, worden ze onder elkaar gezet, op 'n nieuwe regel. De plaatjes met het kader worden als achtergrond-afbeelding in de span neergezet. Een achtergrond-afbeelding heeft zelf geen afmeting, maar neemt de maat van het element waar ze in staat aan. Hier is dat de span. Als ik dus die spans de juiste maat geef, hebben de kadertjes automatisch ook de juiste maat. En als ik de spans op de juiste plaats neerzet, staan de afbeeldingen automatisch ook goed.

De juiste breedte krijgen de spans omdat het blok-elementen zijn. Een blok-element wordt normaal genomen automatisch even breed als het ouder-element. En laat dat nou net ook het element zijn waar de tekst in staat: span#pop. De span wordt dus even breed als het element met de tekst.

De hoogte geef ik niet op, het wordt automatisch zo hoog als nodig is.

Er staan bovenaan twee plaatjes onder elkaar, omdat 'n blok-element op 'n nieuwe regel wordt gezet. Het tweede plaatje moet 10 px omhoog, de hoogte van het plaatje. Nu staan ze beide op dezelfde hoogte. Dan moet er alleen nog 'n beetje naar links en naar rechts worden geschoven, en de lijntjes op de plaatjes sluiten netjes aan op de staande border.

Als je niet begrijpt wat er gebeurt, speel dan wat met de diverse marges. Verander er steeds eentje, geef 'n element 'n achtergrondkleurtje, dat soort dingen. Als je 't ziet veranderen, is 't makkelijker te begrijpen dan via lezen.

Aan de onderkant werkt het precies hetzelfde, maar dan met 'n plaatje (of feitelijk twee keer hetzelfde plaatje dus) met hoekjes naar boven toe gericht.

Hoeken en lijn aan de onderkant
In werkelijkheid is de witte achtergrond doorzichtig.

Zonder css zie je niets van de plaatjes, omdat het achtergrondplaatjes zijn: je ziet gewoon de tekst zonder kader. Ze leveren dus geen extra problemen voor spraakbrowsers en dergelijke op.

In de praktijk zitten er wel wat haken en ogen aan zo'n pop-up. Het moet daarom grondig worden getest in zoveel mogelijk browsers. Is dat eenmaal gebeurd, dan is het uiterst simpel te wijzigen.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Speciaal bij dit voorbeeld

In dit geval gebruik ik alleen :hover, omdat de pop-up de eronder liggende inhoud van de pagina kan afdekken.

Beschrijving van code en css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<style type="text/css">

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

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

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


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

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

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

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

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

font-size: 110%;

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

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

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

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

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

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

background: #ff9;

Gewoon 'n lichtgeel achtergrondkleurtje.

div#schermpje

De div met id="schermpje". Dit is de div waarbinnen de hele handel komt te staan.

position: absolute;

Om hem op een bepaalde plaats op het scherm neer te kunnen zetten.

Er wordt gepositioneerd ten opzichte van het eerste ouder-element dat zelf een positie heeft. Als dat ontbreekt, zoals hier het geval is, wordt gepositioneerd ten opzichte van het venster van de browser.

Een positie is ook nodig om elementen binnen deze div te kunnen positioneren ten opzichte van deze div, maar daarvoor zou een relatieve positie ook prima voldoen, ook als je daar verder niets bij invult.

left: 200px; top: 200px;

200 px van de linkerkant, 200 px van boven.

div#schermpje a

De links binnen de div met id="schermpje". Dat is er hier maar eentje.

text-decoration: none;

Ik wil hier niet de standaard-onderstreping van 'n link hebben.

color: black;

En de tekstkleur moet gewoon zwart zijn.

div#schermpje a:hover

Als de cursor boven 'n link binnen de div met id="schermpje" hangt. Dat is hier maar één link, die met het vraagteken. Omdat de pop-up gelijk opent in dat geval, geldt dit voor het hele gebied van de pop-up, niet alleen voor het vraagteken. De pop-up is immers onderdeel van de link.

cursor: pointer;

Niet elke browser laat boven de hele pop-up de cursor zien die hoort bij een link. Op deze manier wel.

span#vraagteken

De span met id="vraagteken". Dat is de span waar het vraagteken in staat.

font-size: 3em;

Vraagteken lekker groot maken. Ik gebruik em als eenheid, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

a#linkje span#pop

De span met id="pop" binnen de link met id="linkje". Dit is de span waarbinnen tekst en plaatje staan, de pop-up. Hoewel de pop-up pas zichtbaar wordt als je over het vraagteken hovert, kan ik toch hier al de opdrachten voor de lay-out en zo geven.

position: absolute;

Dit maakt het mogelijk de pop-up precies neer te zetten waar ik hem wil hebben.

Er wordt gepositioneerd ten opzichte van het eerste ouder-element dat zelf een positie heeft, dat is hier div#schermpje.

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

width: 400px;

Breedte. Omdat hier als eenheid px is genomen, verandert de breedte van de pop-up niet mee bij een andere lettergrootte, maar alleen bij zoomen.

Omdat de hoogte niet wordt opgegeven, verandert de hoogte mee met de lettergrootte. Als je als eenheid voor de breedte em neemt, verandert ook de breedte mee met de lettergrootte.

left: -8000px;

Plaats de pop-up 8000 px naar links. Hiermee komt het natuurlijk buiten het scherm te staan, en dat is precies de bedoeling. Dit is het enige wat wordt veranderd als ik over het vraagteken hover, alle andere opdrachten blijven gewoon hetzelfde.

top: -20px;

20 px naar boven zetten, zodat straks bij hoveren het vraagteken wordt bedekt.

background: white;

Witte achtergrond.

a#linkje:hover span#pop

Als ik over de link met id="link" hover, doe dan iets met de daarin liggende span met id="pop". Dat is de span waar de hele pop-up in staat.

left: -100px;

De buiten het venster geparkeerde pop-up wordt nu op het scherm gezet, en dus zichtbaar.

100 px naar links zetten ten opzichte van de eerste ouder met een positie: div#schermpje.

#lb, #rb

De elementen met id="lb" en met id="rb". Dit zijn de spans waarbinnen de plaatjes staan die aan de bovenkant worden gebruikt: lb staat voor linksboven, rb voor rechtsboven.

display: block;

Een span is van zichzelf 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als hoogte en background-image gebruiken.

background: url(067-pics/boven.png);

Dit is het plaatje met de twee bovenste hoeken en de daartussen liggende lijn. Hoewel deze afbeelding 1500 px breed is, heeft hij geen afmeting omdat het een background-image is. Een background-image neemt de afmeting aan van het element waarin hij staat. En omdat de spans zijn veranderd in blok-elementen, nemen die automatisch de breedte aan van het element waar ze in staan, hier span#pop. En omdat in dat element ook de tekst staat, wordt de span dus (ongeveer) even breed als de tekst.

Er worden twee plaatjes gebruikt. Van de ene wordt de linkerhoek gebruikt, van de ander de rechter. Door ze gedeeltelijk over elkaar heen te zetten is van elk plaatje maar één hoek zichtbaar. En aangezien de tussen de hoeken liggende lijnen op dezelfde hoogte worden gezet, krijg je dan: linkerhoek - horizontale lijn - rechterhoek. Met ongeveer de juiste breedte.

Dit is ongeveer te vergelijken met twee vellen papier waar je een rechthoek opzet. Door die vellen op elkaar te leggen en te schuiven, kun je de rechthoek groter en kleiner maken. Hier wordt door de breedte van het ouder-element span#pop (waar ook de tekst in staat) bepaald hoeveel er 'geschoven' wordt.

height: 10px;

Een blok-element heeft van zichzelf geen hoogte, dus zou je de background-image niet zien. Daarom maak ik hem even hoog als de background-image die erin wordt gezet, zodat deze nu zichtbaar is.

#lo, #ro

De elementen met id="lo" en met id="ro". Dit zijn de spans waarbinnen de plaatjes staan die aan de onderkant worden gebruikt: lo staat voor linksonder, ro voor rechtsonder.

display: block;

Een span is van zichzelf 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als hoogte en background-image gebruiken.

background: url(067-pics/onder.png);

Uitleg zie bij background: url(067-pics/boven.png), maar dan voor de onderste twee plaatjes.

height: 10px;

Een blok-element heeft van zichzelf geen hoogte, dus zou je de background-image niet zien. Daarom maak ik hem even hoog als de background-image die erin wordt gezet, zodat deze nu zichtbaar is.

#lb, #lo

De elementen met id="lb" en met id="lo": de spans waar de achtergrondafbeeldingen in staan waarvan de linkerhoek wordt gebruikt (linksboven en linksonder).

margin-right: 10px;

Omdat deze spans zijn veranderd in blok-elementen, nemen ze de breedte aan van hun ouder-element. Dat is maar goed ook, want het achtergrondplaatje wat er in staat is maar liefst 1500 px breed, en voor je 't weet steek je je buurman 'n oog uit met zo'n lange lijn.

Deze twee spans worden, net als alle blok-elementen, links op 'n nieuwe regel gezet. Het achtergrondplaatje kan er dan ook gewoon in gezet worden: de linkerhoek staat keurig links. Precies zoals de bedoeling is.

Naast die linkerhoek staat de horizontale lijn op de achtergrondafbeelding, dus die staat ook keurig op de goede plaats. En die lijn wordt niet breder dan span#pop, het ouder-element waar ook de tekst in staat. Aan het eind van het ouder-element wordt hij dus afgekapt.

Dat is heel mooi, want rechts moet 'n hoek komen te staan, en geen doodlopende lijn.

Die rechterhoek gebruik ik van het plaatje wat in span #rb staat. Dus dan heb ik keurig linkerhoek - horizontale lijn - rechterhoek.

Met één probleem: de achtergrond van de plaatjes is doorzichtig. Dus door de rechterhoek heen zie ik het einde van de horizontale lijn van #lb, want die loopt door tot het einde van span#pop.

Als ik nu rechts 'n marge van 10 px neerzet, kort ik als het ware de horizontale lijn met 10 px in, want 'n achtergrondafbeelding loopt niet door in 'n marge. Daardoor zie je nu onder de rechterhoek geen horizontale lijn meer.

(Een marge wordt weliswaar bij de breedte van de span opgeteld, maar marge en span samen moeten toch binnen span#pop blijven. Dus in dit geval is het effect dat die marge de span (en dus de background-image) 10 px naar links drukt.)

Aan de onderkant gaat het precies hetzelfde, met alleen andere id's en zo.

Als dit niet duidelijk is, speel dan wat met de marges en zo, en geef achtergrondkleurtjes of borders, dan zie je wat er gebeurt. Dat is veel makkelijker dan lezen.

#rb, #ro

De elementen met id="rb" en met id="ro". De spans met daarin de plaatjes waarvan de rechterhoek wordt gebruikt: rechtsboven en rechtsonder.

margin-left: 10px;

Ik zet iets verderop de background-images van deze spans aan de rechterkant neer, dus de rechterkant (met de afbeelding van de rechterhoek) van het plaatje tegen de rechterkant van de span. Dan staat de rechterhoek gelijk goed.

De aan de rechterhoek vast zittende horizontale lijn loopt dus van rechts naar links. Deze lijn is bijna 1500 px lang (de hoeken gaan eraf). En omdat de span waar hij in staat even breed is als span#pop, is deze lijn ook even breed. En loopt dus tot aan de linkerkant van span#pop.

Aan de linkerkant wordt, vanuit 'n andere span, de linkerhoek neergezet. En omdat deze doorzichtig is zie je de horizontale lijn daardoorheen. Daarom druk ik met 'n marge de span (en dus de background-image) 10 px naar rechts.

'n Iets uitgebreidere uitleg voor de linkerhoek staat bij #lb, #lo. Die werkt hetzelfde, alleen in omgekeerde richting.

margin-top: -10px;

De spans zijn veranderd in blok-elementen en komen dus op 'n nieuwe regel te staan. Deze twee spans komen als tweede in de html: rb na lb, en ro na rb. De spans zijn 10 px hoog, om ze dus op dezelfde hoogte te krijgen moet ik ze 10 px omhoog zetten. Nu staan de horizontale kaderlijnen van de eerste en van de tweede span op dezelfde hoogte.

background-position: right;

Van deze twee spans wil ik de rechterhoek gebruiken, dus ik moet de background-images vanaf rechts neerzetten: de rechterkant tegen de rechterkant van de span.

span#tekst

De span met id="tekst". Dit is de span waar de tekst in staat.

display: block;

Van zichzelf is een span een inline-element. Daarbij wordt een border alleen aan het begin en einde van de tekst weergegeven. Ik heb hier 'n border over de volle hoogte nodig, dus maak ik er een blok-element van.

border: black solid;

De border moet een zwarte gesloten lijn zijn. Ik geef hier alleen kleur en soort op en geen dikte, want ik wil niet aan alle vier de kanten 'n border hebben.

border-width: 0 1px;

Hier geef ik de dikte van de border hierboven alsnog apart op.

Achter border-width staan geen waarden voor onder en links, die krijgen dan automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 1px 0 1px in de volgorde boven - rechts - onder - links. Links en rechts 'n border van 1 px breed. Boven en onder 'n border van 0, oftewel: geen border boven en onder.

De verticale borders sluiten naadloos aan op de afbeeldingen, de horizontale borders staan te hoog of te laag, dus die moet ik weghalen. Dit leg ik verder niet uit, als je ze even zichtbaar maakt zie je gelijk wat ik bedoel.

padding: 0 5px;

Omdat hier alleen waarden zijn ingevuld voor boven en rechts, wordt voor onder en links automatisch dezelfde waarde genomen als voor boven en rechts en wordt dit dus gelezen als 0 10px 0 10px in de volgorde boven - rechts - onder - links. Links en rechts 'n kleine afstand tussen inhoud (tekst) en kadertje.

Boven en onder is dat niet nodig. De spans aan boven- en onderkant zijn10 px hoog, en omdat het lijntje aan de bovenkant van de span staat, is er dus al voldoende lege ruimte aan boven- en onderkant tussen tekst en kader.

Speciaal voor Internet Explorer 6

Omdat voor het kadertje een doorzichtige png is gebruikt, werkt dit niet in Internet Explorer 6. Zie verder bij Bekende problemen.

<!--[if IE 6]> <style type="text/css"> #lb, #rb, #lo, #ro {font-size: 36%;} </style> <![endif]-->

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

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 6, maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

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

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 6 in. De css voor Internet Explorer 6 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

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

#lb, #rb, #lo, #ro

De elementen met id="lb", "rb", "lo" of "ro": de spans waar de background-images in staan.

font-size: 36%;

Lettergrootte terugbrengen tot 36 %.

Dit is er weer zo eentje waar de verklaring waarschijnlijk ongeveer is dat de foezel niet in de gluup paste toen ze Internet Explorer 6 wroggelden, met als gevolg dat de hassemeflas het nu niet goed verfloust. Kortom: weer 'n bug of 'n afwijking van de standaard.

Zonder deze opdracht zet Internet Explorer 6 alle plaatjes twee keer neer, boven elkaar. Als ik no-repeat toevoeg zet 't kreng helemaal niks neer, geen een. Statistisch gezien is 't precies goed: 't gemiddelde van 0 plaatjes en twee plaatjes is exact 1 plaatje. Helaas heeft 't menselijk oog weinig op met statistiek en zie je er dus 2 of 0. Ook met een oog dicht.

Deze idiote opdracht blijkt 't op te lossen.

36 % is de hoogste waarde waarbij 't goed gaat. Met bijvoorbeeld 1% werkt 't ook, maar dat kunnen zoekmachines zien als 'n stiekeme manier om hoger in de resultaten terecht te komen. 'n Spider van 'n zoekmachine leest gewoon de html, ziet de tekst, en bepaalt mede op grond daarvan je plaats in de volgorde van de zoekresultaten. Door de lettergrootte belachelijk klein te maken kun je die tekst verstoppen voor mensen. De zoekmachine ziet dus iets anders dan 'n bezoeker, en dat kan leiden tot verwijdering uit de zoekresultaten.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 30 januari 2012.

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

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

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

Er is getest met behulp van muis en toetsenbord.

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

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

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

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

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

Wijzigingen

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

21 augustus 2009

Nieuw opgenomen.

7 februari 2011:

Doorzichtige gif met kadertje vervangen door doorzichtige png, omdat die kleiner in omvang is.

30 januari 2012:

Tekst aangepast aan de inmiddels verschenen Internet Explorer 9, onder andere bij Bekende problemen.

Bekende problemen

Alle browsers

Internet Explorer 6

Voor het kadertje wordt een doorzichtige png-afbeelding gebruikt. Internet Explorer 6 kan hier niet mee uit de voeten. Als je dit voor dit onding geschikt wilt maken, moet je een doorzichtige gif gebruiken in plaats van een png. Een andere mogelijkheid is het gebruik van 'pngfix' (even zoeken op internet), een stukje JavaScript dat ervoor zorgt dat ook Internet Explorer 6 min of meer met een doorzichtige png overweg kan.

Internet Explorer 9

Zodra je gaat inzoomen (vergroten) in het nieuwste kwaliteitsproduct van Microsoft, verschijnen gelijk boven en onder de tekst hele dunne zwarte lijntjes. Omdat je inmiddels beter border-radius kunt gebruiken, wat ook werkt in deze browser, heb ik verder niet gezocht naar de oorzaak hiervan.

Als je deze methode toch wilt gebruiken om in oudere versies van Internet Explorer voor ronde hoeken te zorgen, kun je die versies aparte css geven met behulp van 'conditional comments'. Of je kunt een zogenaamd filter gebruiken voor die oudere versies.