Skip links en inhoudsopgave

Laatst aangepast: .

Pop-up met Periodiek Systeem en links naar betreffende Wikipedia-pagina's

Korte omschrijving

Pop-up met tabel met daarin Periodiek Systeem der Elementen. Onder elke cel zit een link naar de bijbehorende pagina in Wikipedia.

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. 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. Maar 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 - door nog ruim twintig procent van de mensen wordt gebruikt.

De letter 'P' zit in een gewone div. Als je over die div hovert opent een pop-up met daarin een tabel met het Periodiek Systeem der Elementen.

In feite is dit een doodgewone tabel met wat opmaak. Omdat normale tekst wordt gebruikt kan de tekst op de gewone manier vergroot en verkleind worden, binnen zekere grenzen natuurlijk.

Ook als niet over de div met de 'P' wordt gehoverd, is de tabel al compleet aanwezig, met opmaak en al. Maar hij staat dan links buiten het scherm geparkeerd. Bij hoveren over de div gebeurt er maar één ding: de tabel wordt binnen het scherm gezet en is nu dus zichtbaar. Door de tabel een absolute positie te geven komt hij over andere elementen op de pagina te staan en duwt deze niet opzij.

Internet Explorer 6 herkent hoveren alleen boven 'n link <a>. Daarom wordt voor Internet Explorer 6 gebruik gemaakt van geneste links. Dat kan eigenlijk helemaal niet, maar Internet Explorer 6 slikt deze troep gewoon. Door conditional comments te gebruiken ziet alleen Internet Explorer 6 de extra <a> in de html.

De opmaak is verder niet zo heel bijzonder. Wat lijntjes en kleuren. Onder elke cel zit een link naar de bijbehorende pagina in Wikipedia.

In de praktijk zitten er wel wat haken en ogen aan zo'n pop-up met opmaak. Daarom moet dit soort pop-ups grondig worden getest in zoveel mogelijk browsers. Is dat eenmaal gebeurd, dan zijn ze 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 pagina eronder hinderlijk 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: 100%;

Dit slaat natuurlijk nergens op, want hier staat gewoon dat de letters de normale grootte moeten hebben. Dit is nodig vanwege Internet Explorer.

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: 1em; zou het zelfde moeten zijn als font-size: 100%), maar %, dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

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

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

color: black;

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

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

background: #ff9;

Achtergrondkleurtje.

#content

Het element met id="content". Dit is de div waar de hele pagina in staat.

width: 90%;

Vult altijd 90 % van het venster van de browser, ongeacht hoe groot dit is. Dit is bepaald 'n ruwe instelling, maar het gaat hier niet om de tekst maar om de pop-up, dus ik houd het lekker simpel.

margin: 0 auto;

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

Boven en onder geen marge, links en rechts auto oftewel: evenveel. Hierdoor staat deze div, en dus de daarin zittende tekst, altijd horizontaal in het midden. Deze manier van horizontaal centreren van een blok-element werkt alleen als het te centreren blok-element een breedte heeft.

#systeem

Het element met id="systeem". Dit is de div waarbinnen de letter 'P' en de pop-up staan.

position: absolute;

Om op de juiste plaats op het scherm te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een positie heeft. Als die er niet is, zoals hier, wordt gepositioneerd ten opzichte van het venster van de browser.

Omdat deze div nu een positie heeft, kan ik de kinderen van deze div positioneren ten opzichte van deze div. Dat kan alleen als de ouder zelf een positie heeft.

top: 10px; right: 10px;

10 px vanaf boven- en rechterkant neerzetten.

width: 30px; height: 35px;

Dit is een grootte die goed bij de erin staande letter 'P' past.

border: black solid 1px;

Zwart randje.

background: white;

Witte achtergrond.

font-size: 2em;

Lekker grote letter. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

text-align: center;

Tekst horizontaal centreren. Tekst? Nou ja, da's 'n wat megalomane omschrijving, want het gaat hier alleen om de letter 'P'.

#systeem table

De tabellen binnen het element met id="systeem". Hier is maar één tabel: die waar de hele pop-up in staat.

Elke cel in de tabel krijgt automatisch wat padding. Daardoor vult de in de cel zittende link de cel niet volledig, maar blijft er aan elke kant 'n kleine ruimte over.

Bij hoveren over de link verandert de achtergrondkleur van de link in wit. Maar omdat deze niet de hele cel vult, blijft 'n klein stukje van de oorspronkelijke achtergrondkleur van de cel zichtbaar.

Ik laat dat zo, want het komt hier goed uit. De achtergrondkleur van de cel geeft informatie over de chemische reeks waar het element in zit, en een strookje van die achtergrondkleur blijft nu aan de buitenkant zichtbaar.

position: absolute;

Om op de juiste plaats op het scherm te kunnen zetten. Voordeel van een absolute positie is in dit geval ook, dat het de rest van de pagina niet stoort. Als de tabel tevoorschijn komt, wordt hij door de absolute positie gewoon over de andere elementen op de pagina gezet, zonder deze van hun plaats te duwen.

top: -1px;

Normaal genomen zou de tabel onder de div worden neergezet. Dat vind ik niet mooi, ik wil hem boven de div met de letter 'P' hebben. En dan nog 1 px hoger, zodat de border van de div ook wordt bedekt.

right: 3000px;

Parkeer de tabel links buiten het scherm. Omdat de rest van de opmaak al helemaal klaar is, hoef ik de tabel dan alleen maar op het scherm te zetten om hem zichtbaar te maken.

border: black solid 1px;

Randje rondom de hele tabel. Omdat de pop-up in dit geval uit niet meer dan de tabel bestaat, is dit randje ook gelijk de buitenkant van de pop-up.

background: #e4e4e4;

Achtergrondkleur van de tabel. Aparte cellen geef ik later 'n andere kleur. Maar alles wat later geen andere kleur krijgt, heeft nu alvast 'n lichtgrijze achtergrond.

font-size: 0.35em;

Bij #systeem heb ik een lettergrootte van 2 em opgegeven. En omdat deze tabel binnen #systeem staat, erft ze deze lettergrootte. Dat is natuurlijk veel te groot. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

Dit is een vrij kleine letter, maar het is ook een vrij grote tabel. En anders past hij niet meer op kleinere schermen.

caption

De kop van de tabel.

background: #e4e4e4;

De caption krijgt (vreemd genoeg) standaard niet dezelfde achtergrondkleur als de bijbehorende tabel. Dus die moet ik apart opgeven.

border: black solid 1px;

Ook de border rondom de tabel slaat de caption over.

border-bottom: 0;

De border aan de onderkant van de caption komt tegen de border aan de bovenkant van de tabel te staan. Daardoor zou tussen caption en tabel een border van 2 px komen, en dat is niet mooi. Dus weg met de border aan de onderkant van de caption.

font-size: 2em;

Omdat de caption binnen de tabel staat, krijgt hij de daar opgegeven kleine lettergrootte. Dat is veel te klein, dus maak ik de letters voor de caption hier weer groter. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

td

Alle cellen van de tabel.

min-width: 32px;

Een kolom, en dus de daarin liggende cellen, wordt automatisch even breed als nodig is voor de inhoud van de breedste cel. In een aantal kolommen staan alleen maar smalle tekstjes, dus die zouden heel smal worden, wat niet mooi is. Daarom geef ik 'n minimum-breedte.

Dit speelt niet bij alle kolommen met smalle tekstjes, want sommige worden opgerekt door de cellen aan de onderkant van de tabel die meerdere kolommen omspannen. Maar aangezien dit alleen 'n minimum-breedte is, negeren kolommen die al breed genoeg zijn het gewoon.

Internet Explorer 6 kent min-width niet en Internet Explorer 7 voert het niet goed uit in 'n tabel, dus voor die twee browsers komt later wat aparte css.

border: black solid 1px;

Randje rondom elke cel. Er zit automatisch wat ruimte tussen alle cellen. Als ik er 'n randje om zet, levert dat dus twee lijntjes op tussen alle cellen. In dit geval vind ik dat wel mooi en laat het dus zo.

Internet Explorer 6 en 7 zetten geen rand rondom 'n lege cel. Daarom staat er in de lege cellen een vaste spatie   voor die browsers. Daar vliegen ze enthousiast in: de cel is nu niet meer leeg voor hun. 'n Kinderhand is gauw gevuld, zullen we maar zeggen.

td a

De links binnen een cel van de tabel. Dit zijn de links naar de Wikipedia-pagina's bij de diverse elementen en groepen.

display: block;

Van zichzelf is een <a> een inline-element. Dat betekent onder andere dat ik precies op de tekst moet klikken om de link te laten werken. Daarom maak ik er 'n blok-element van. Nu kan ik de hoogte opgeven en kan ik de link even hoog maken als de cel waar hij in staat.

In de breedte vult een blok-element automatisch de volle breedte van z'n ouder, dat is hier de cel van de tabel. Daardoor is de hele cel nu klikbaar, wat veel logischer is.

In Internet Explorer 6 en 7 wordt foutief niet de hele breedte van de cel gevuld, daar is nog wat aparte css voor nodig.

min-height: 2.4em;

De <a> is in een blok-element veranderd. Dat houdt onder andere in dat hij niet hoger wordt dan nodig is om de inhoud weer te geven. In links met alleen een getal is de hoogte daardoor nog maar één regel. Daardoor vult de link niet de hele cel en is dus niet de hele cel klikbaar.

Met deze minimum-hoogte vult ook in die cellen de link de hele cel en is dus de hele cel klikbaar. Internet Explorer 6 kent min-height niet, daar komt later wat aparte css voor. Als eenheid neem ik em, zodat het mee verandert met de lettergrootte.

(In werkelijkheid is de cel natuurlijk helemaal niet klikbaar, maar de daarin zittende link. Voor de gebruiker lijkt het echter of de cel klikbaar is.)

De cel wordt automatisch even hoog als nodig is om de inhoud (dat is hier de <a>) weer te geven, dus ik hoef geen aparte hoogte voor de cel op te geven.

text-decoration: none;

De gebruikelijke onderstreping van 'n link wil ik hier niet.

color: black;

En ook de kleurtjes van 'n link wil ik niet. Sommige letters en cijfers moeten wel 'n andere kleur krijgen. Niet omdat ze 'n link zijn, maar als code voor de groep waar ze bij horen. Dat regel ik later.

tr.groep, td.groep

De rijen en cellen met class="groep". Dit zijn de losse, verspreid liggende losse cellen die naar een groep linken, en daarnaast de onderste twee rijen in hun geheel.

background: #bbb;

Donkergrijze achtergrond.

tr.groep

De rijen met class="groep". Dit zijn de twee onderste rijen waarin aggregatietoestanden en chemische reeksen staan. (Voor je je heel dom gaat voelen: aggregatietoestanden zijn gas, vast en vloeibaar en wat chemische reeksen zijn zou ik ook niet weten.)

line-height: 2.4em;

Bij td a heb ik een minimum-hoogte van 2.4 em opgegeven. Omdat in deze rijen maar één regel tekst staat, is die minimum-hoogte hier van toepassing.

Tekst wordt automatisch halverwege de regelhoogte gezet. Als ik de regelhoogte dus even hoog maak als de hoogte, komt de tekst in deze twee rijen verticaal in het midden te staan.

Hoewel de tekst binnen de link in de cel staat, hoeft de selector toch geen tr.groep a te zijn, want line-height wordt geërfd door de kinderen, hier dus door de <a>.

td.t-m

De cellen met class="t-m". De twee cellen waar ... t/m ... in staat.

font-size: 0.7em;

Omdat in deze cellen drie regels tekst staat, maak ik de lettergrootte wat kleiner. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

letter-spacing: 0.2em;

Omdat het nu wel erg krap wordt in deze cel, geef ik iets meer ruimte tussen de letters.

td.tekst

De cellen met class="tekst". Twee cellen met 'n wat meer tekst.

padding: 6px 0;

Omdat voor onder en links geen waarde is opgegeven, krijgen deze automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 6px 0 6px 0 in de volgorde boven - rechts - onder - links. Met deze padding aan boven- en onderkant staat de tekst in het midden en hebben de cellen gelijk de goede hoogte.

font-size: 1.3em;

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

.alkali

De elementen met class="alkali". Dit zijn de cellen die een achtergrondkleur moeten krijgen die hoort bij de chemische reeks Alkalimetalen (wat dat ook voor griezels mogen zijn, 't klinkt niet echt als 'n gezellige vergiet, zoals je bij 't koken gebruikt).

Door de cel met het woord 'Alkalimetalen' én de cellen waarin de elementen zitten die hierbij horen dezelfde achtergrondkleur te geven, wordt via kleur extra informatie gegeven. De hele tabel heeft bij #systeem table een lichtgrijze achtergrondkleur gekregen. De achtergrondkleur van de cellen wordt daar gewoon overheen gezet, zodat je het lichtgrijs niet meer ziet.

Dit is absoluut geen waterdichte methode. Zo'n tien procent van de mensen heeft in meerdere of mindere mate last van kleurenblindheid. Je moet dus nooit alleen kleur gebruiken voor echt belangrijke informatie. Maar hier gaat het om extra informatie, dus hier kan het wel, volgens mij.

background: #f55;

Roodachtige achtergrond.

.aard {background: #f99;} .overgang {background: #f93;} .hoofd {background: #fc3;} .metallo {background: #ccf;} .niet {background: #ff0;} .halo {background: #cc6;} .edel {background: #cf0;} .lan {background: #ffa;}
.act {background: #cff;}

Zelfde verhaal als bij .alkali, maar nu voor de andere chemische reeksen, dus met andere achtergrondkleuren.

.gas

De elementen met class="gas". De cellen waarin een gasvormig element staat.

color: #a52a5a;

Verander de tekstkleur in roodachtig. Hierdoor wordt extra informatie over het element gegeven.

Dit is absoluut geen waterdichte methode. Zo'n tien procent van de mensen heeft in meerdere of mindere mate last van kleurenblindheid. Je moet dus nooit alleen kleur gebruiken voor echt belangrijke informatie. Maar hier gaat het om extra informatie, dus hier kan het wel, volgens mij.

.vs {color: blue;}

Zelfde verhaal als bij .gas, maar nu voor vloeistoffen. Hier maak ik de tekst blauw.

#systeem a:hover

Bij hoveren over een link binnen het element met id="systeem". Alle links binnen #systeem liggen binnen de tabel, dus deze selector bestrijkt alle links binnen de tabel.

background: white;

Maak de achtergrond wit. Omdat de link vrijwel de hele cel vult, wordt vrijwel de hele cel wit. Alleen aan de rand blijft 'n stukje van de originele achtergrondkleur over door de padding die automatisch aan een cel wordt gegeven. (Voor die padding zie verder bij Elke cel...)

#systeem:hover table

Als ik over het element met id="systeem" hover, doe dan iets met de daarin liggende tabel.

Het element met id="systeem" is de div waar de letter 'P' in staat.

Omdat Internet Explorer 6 hoveren alleen herkent boven 'n <a>, komt daar later aparte css voor. Deze selector wordt door Internet Explorer 6 gewoon genegeerd.

right: -1px;

Bij #systeem table is de tabel ver links buiten het scherm geparkeerd. De hele lay-out is ook al daar (en in latere delen van de css) opgegeven. Het enige wat ik hoef te doen om de tabel zichtbaar te maken is deze op het scherm plaatsen.

Als ik hem op deze plaats neerzet, bedekt hij ook de border van de div met de 'P' erin.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> a#a-ie-6 {display: block; height: 35px; text-decoration: none; color: black;} td a {width: 100%; height: 2.4em;} td.takke-ie a {width: 32px;} #systeem a:hover table {right: -1px;} </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.

a#a-ie-6

De link met id="a-ie-6". Dit is de extra link die alleen voor Internet Explorer 6 zichtbaar is. Binnen deze link staat de hele tabel. Verderop bij Html speciaal voor Internet Explorer 6 staat hoe je html kunt aanbrengen, die alleen door Internet Explorer 6 wordt gezien.

display: block;

Van zichzelf is een <a> een inline-element. Dat betekent onder andere dat ik precies op de tekst moet klikken om de link te laten werken. Daarom maak ik er 'n blok-element van. Nu kan ik de hoogte opgeven.

In de breedte vult een blok-element automatisch de volle breedte van z'n ouder, dat is hier div#systeem, de div met de 'P'. Daardoor is de hele div nu klikbaar, wat veel logischer is.

height: 35px;

Van zichzelf wordt een blok-element niet hoger dan nodig is om de inhoud weer te kunnen geven. Dat betekent dat ik precies op de tekst moet klikken. Door de <a> even hoog te maken als de div met de 'P' waar hij in staat, wordt de hele div klikbaar, wat veel logischer is. (In feite is de div niet klikbaar, maar de <a> daarbinnen, maar voor de gebruiker maakt dat geen verschil.)

text-decoration: none;

De gebruikelijke onderstreping van 'n link wil ik hier niet.

color: black;

En ook de gebruikelijke kleuren van 'n link zijn hier niet welkom.

td a

De links binnen 'n cel van de tabel.

height: 2.4em;

In de algemene css is hier min-height: 2.4em; opgegeven, maar dit technische hoogstandje van Microsoft herkent dit niet. Gelukkig (wat heet) behandelt Internet Explorer 6 foutief height alsof het min-height is. Door deze geniale opeenstapeling van blunders werkt alles toch zoals het hoort te werken.

td.takke-ie a

De links binnen de cellen met class="takke-ie". De ietwat eigenaardige classnaam heb ik kosmisch doorgekregen nadat ik 37 uur achter elkaar met Internet Explorer 6 en 7 in gevecht was geweest. Na mijn derde fles whisky zag ik plotseling het licht, de oplossing en deze classnaam. De classnaam stond op 'n voorbij vliegende roze olifant, dus de naam is kosmisch, holistisch en alcoholistisch geheel verantwoord.

width: 32px;

In de algemene css wordt aan de cellen een min-width van 32 px gegeven. Internet Explorer 6 kent dit niet. Bovendien negeert Internet Explorer 6 width in een cel.

Door aan de link binnen de cel een breedte te geven komt alles toch nog goed. Want dit blijkt wel te werken binnen deze browser. In elke kolom die te smal zou worden heeft één link de class "takke-ie" gekregen. Dat is genoeg, want een kolom wordt automatisch even breed als de breedste cel in die kolom.

#systeem a:hover table

Als ik over 'n link binnen #systeem hover, doe dan iets met de daarin zittende tabel.

Speciaal voor Internet Explorer 6 is een extra link aangebracht, omdat deze alleen hoveren over 'n <a> herkent. Binnen deze extra link ligt de tabel. Andere browsers zien deze extra link helemaal niet.

Deze selector geldt alleen voor de buitenste extra <a>, want dat is de enige <a> waarbinnen een tabel ligt. De links binnen de tabel voldoen niet aan de criteria van deze selector.

right: -1px;

Bij #systeem table is de tabel ver links buiten het scherm geparkeerd. De hele lay-out is ook al daar (en in latere delen van de css) opgegeven. Het enige wat ik hoef te doen om de tabel zichtbaar te maken is deze op het scherm plaatsen.

Als ik hem op deze plaats neerzet, bedekt hij ook de border van de div met de 'P' erin.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> td.takke-ie a {width: 32px;} #systeem:hover {cursor: pointer; #systeem table {cursor: default;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 7. Uitleg zie bij Speciaal voor Internet Explorer 6.

td.takke-ie a

De links binnen de cellen met class="takke-ie". De etymologie van de classnaam wordt uitgelegd bij td.takke-ie a.

width: 32px;

Internet Explorer 7 negeert width en min-width binnen een cel van een tabel.

Door aan de link binnen de cel een breedte te geven komt alles toch nog goed. Want dit blijkt wel te werken binnen deze browser. In elke kolom die te smal zou worden heeft één link de class "takke-ie" gekregen. Dat is genoeg, want een kolom wordt automatisch even breed als de breedste cel in die kolom.

#systeem:hover

Als ik over het element met id="systeem" hover. Dat is de div met de 'P'.

cursor: pointer;

Verander de cursor in het handje dat eigenlijk bij een link hoort. Als ik dit niet doe, werkt om een of andere reden hoveren niet in Internet Explorer 7.

#systeem table

De tabel binnen het element met id="systeem".

cursor: default;

Verander de cursor in de standaardcursor. Hierboven heb ik de cursor in een handje veranderd bij hoveren over #systeem. Omdat de hele tabel binnen #systeem ligt, verandert nu de cursor boven de héle tabel in een handje.

Hier verander ik hem boven die tabel weer terug in de standaardcursor. Boven de links binnen de tabel verandert hij vervolgens weer in het handje dat bij een link hoort.

Html speciaal voor Internet Explorer 6

<!--[if IE 6]><a id="a-ie-6" href="#"><![endif]--> <!--[if IE 6]></a><![endif]-->

Deze html wordt alleen gelezen door Internet Explorer 6, uitleg bij Speciaal voor Internet Explorer 6. De uitleg daar is voor css, maar voor html werkt het precies hetzelfde, alleen kan de html natuurlijk niet in 'n extern bestand worden gezet.

De bovenste regel staat gelijk boven de tabel, de onderste regel gelijk eronder. De hele tabel staat dus tussen deze twee regels.

Als we de conditionele comments eromheen weghalen, blijven de volgende twee regels over:

<a id="a-ie-6" href="#"> </a>

Met daartussenin dus de tabel. Oftewel: de hele tabel staat binnen een link.

Omdat hoveren bij Internet Explorer 6 alleen werkt boven een <a>, moet de hele pop-up binnen een link staan.

In de tabel zelf staat een forse verzameling links. Dat zijn dus geneste links, en dat is absoluut verboden. Veel browsers flipper op zoiets de pan uit. Dus moet deze rommel verborgen worden voor fatsoenlijke browsers.

Internet Explorer vreet deze vreselijke code zonder probleem, en nu werkt hoveren ook bij deze veelvraat: waar de andere browsers 'n div#systeem hebben om op hoveren te reageren, heeft Internet Explorer 6 nu 'n <a>.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

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 22 februari 2012.

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

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

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

Er is getest met behulp van muis en toetsenbord.

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

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

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

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

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

Wijzigingen

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

:

Nieuw opgenomen.

10 maart 2010

29 juli 2011:

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

22 februari 2012:

Bij Bekende problemen stukje over zoomen en grotere letter toegevoegd.

Bekende problemen

Alle browsers

Internet Explorer 6

Als je over 'n cel in de tabel hovert, wordt de daaronder zittende link niet getoond in de statusbalk.

Opera en Internet Explorer 7

Bij inzoomen (vergroten) worden sommige lijntjes iets dikker. Bij uitzoomen (verkleinen) verdwijnen sommige lijntjes.