Skip links en inhoudsopgave

Laatst aangepast: .

Bij hoveren over vlag verschijnt gedraaide tekst (transform)

Korte omschrijving

Bij hoveren over een van de vlaggen verschijnt de naam van het land onder de vlag. De naam wordt cirkelvormig weergegeven.

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

Als je een element een bepaald aantal graden wilt draaien, moest je tot voor kort JavaScript of een afbeelding gebruiken. Bij die afbeelding is er natuurlijk geen sprake van echt 'draaien': je gebruikt gewoon een andere afbeelding, die al gedraaid ís.

css3 heeft een nieuwe eigenschap: transform. Een van de mogelijkheden hiervan is het draaien van elementen. Je geeft gewoon het aantal graden op dat het element moet draaien. Simpeler kan haast niet.

Door een aantal letters elk in een eigen span te zetten en die span te draaien, kun je elke letter afzonderlijk een bepaald aantal graden draaien, zonder gebruik van afbeeldingen of JavaScript. Als je de hoogte van de letters dan ook nog varieert, kun je cirkelvormige tekst maken.

De spans met de daarin zittende letters zijn normaal genomen onzichtbaar. Bij hoveren over 'n vlag worden ze zichtbaar gemaakt met behulp van position: inline-block; Daardoor kan gebruik worden gemaakt van eigenschappen als breedte, terwijl de spans met de daarin zittende letters toch op dezelfde regel blijven staan.

De spans hebben een breedte, die afhankelijk is van de lengte van het woord. De achtergrond van de spans is wit, zodat de zwarte tekst beter leesbaar is.

Elke span is een kleine rechthoek. Het zijn deze kleine rechthoeken die worden gedraaid en op een andere hoogte gezet. Daardoor lijken de erin zittende letters op een ronde lijn te staan. Líjken, want het is geen echte ronde lijn. Bij een vergroting kun je dit duidelijk zien: de 'ronde' lijn bestaat in werkelijkheid uit korte rechte lijntjes. Ook zitten er kleine kiertjes tussen de spans.

Om het er een beetje goed uit te laten zien, moet je wel wat trucjes toepassen.

De spans waar de letters in staan, hebben een bepaalde breedte gekregen. Die breedte is afhankelijk van de lengte van het woord. Door een vaste breedte te gebruiken, krijg ik links en rechts van de letters wat extra ruimte. Die extra ruimt krijgt ook de kleur van de achtergrond.

Omdat de spans allemaal dezelfde breedte hebben, moet ik een niet-proportioneel (monospaced) font gebruiken: de 'i' is even breed als de 'm'. Dit oogt beter bij spans van dezelfde breedte.

Omdat de achtergrond wat breder is, kan ik de spans waar de letters in staan nu iets naar links verschuiven, waardoor de aanwezige kieren tussen de spans veel kleiner worden en de achtergrondkleur van de letters dus een meer gesloten vlak.

In de beschrijving van de code staat dit uitgebreider beschreven, met afbeeldingen die een en ander duidelijk maken.

Internet Explorer 7 en 8 ondersteunen transform niet. Voor deze browsers kun je een veel ingewikkelder methode gebruiken: een filter. Ondanks de ingewikkeldheid van deze methode, kent hij veel minder mogelijkheden dan transform. Maar gelukkig levert hij wel bergen meer problemen op, zodat het filter statistisch gezien even goed werkt als transform: het grote aantal problemen valt weg tegen het kleine aantal mogelijkheden. (Iets zegt me dat er een kleine fout in mijn statistische redenatie zit. Ik had in de politiek moeten gaan, da's duidelijk.) En had ik al gezegd dat de kwaliteit ook slechter is?

Internet Explorer 9 ondersteunt transform in de vorm van het experimentele -ms-transform.

De voorvoegsels -moz-, -ms-, -o- en -webkit-

Voordat een nieuwe css-eigenschap wordt ingevoerd, is er in de regel een experimentele fase. Browsers passen het dan al toe, maar met een aangepaste naam. Tijdens deze fase kunnen problemen worden opgelost en worden veldslagen uitgevochten over hoe de standaard precies moet worden toegepast.

Als iedereen het overal over eens is en alle problemen zijn opgelost, wordt de officiële naam uit de standaard gebruikt.

De belangrijkste browsers hebben elk een eigen voorvoegsel:

Firefox: -moz-, naar de maker: Mozilla.

Google Chrome en Safari: -webkit-, naar de gebruikte weergave-machine: webkit.

Opera: -o-, je mag zelf bedenken waar de letter o vandaan komt (hint: Opera wordt door Opera Software gemaakt).

Internet Explorer: -ms-, naar de maker: Microsoft. Traditiegetrouw heeft Microsoft zich hier jarenlang niets van aangetrokken, pas bij Internet Explorer 8 is Microsoft -ms- gaan gebruiken. Omdat het ook zonder -ms- werkt en de speciale css voor Internet Explorer toch in een aparte stylesheet staat, gebruik ik -ms- nooit voor oudere versies dan Internet Explorer 9.

Hoewel deze voorvoegsels door w3c zelf genoemd worden, rekent de validator ze vreemd genoeg toch fout. Althans: dat denken veel mensen, waaronder ikzelf tot voor kort. De validator blijkt een instelling te hebben, waarmee je deze foutmelding uit kunt zetten.

Zodra de experimentele fase voorbij is, wordt het voorvoegsel weggelaten. Omdat dat moment niet bij alle browsers hetzelfde is, zet je nu ook al de officiële naam transform erbij. Deze wordt als laatste opgegeven. Bijvoorbeeld Firefox herkent -moz-transform. Zodra Firefox transform gaat herkennen, zal dit -moz-transform overrulen, omdat het er later in staat. Dat ze er beide in staan, is dus geen enkel probleem.

Op dit moment moet je dus de volgende css schrijven:

{-moz-transform: ...; -webkit-transform: ...; -o-transform: ...; -ms-transform: ...; transform: ...;}

In de toekomst kun je volstaan met:

{transform: ...;}

Dit zal nog wel 'n behoorlijke tijd duren. Firefox, Safari, Opera en Google Chrome hebben een goed update-mechanisme. Maar Internet Explorer blijft altijd jaren en jaren in omloop, en tijdens die omloop worden alleen bugs gerepareerd, er worden nooit veranderingen aangebracht. Dus pas als Internet Explorer 9 is uitgestorven is de laatste schrijfwijze eindelijk mogelijk.

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 voorbeeld gebruik ik :focus en :active niet. Als je met de cursor boven 'n vlag gaat hangen, verschijnt de naam van het land als tooltip. Alleen bij gebruik van de Tab-toets is niet duidelijk waar de link naartoe gaat (als je niet weet van welk land de vlag is).

Maar als ik de tekst zichtbaar maak als de link via de Tab-toets focus heeft gekregen, blijft de tekst zichtbaar en bedekt andere delen van de pagina. Dat is ook niet ideaal.

In dit geval kies ik ervoor de tekst niet te openen bij tabben. Maar je zou prima 'n andere afweging kunnen maken.

Ook zou je, als de link focus heeft, de naam van het land gewoon boven de vlag zichtbaar kunnen maken, zodat geen andere delen van de pagina worden afgedekt.

Touchscreen

Op een touchscreen kan hooguit een levende muis aanwezig zijn, en of dat enige invloed op hoveren heeft, weet ik eigenlijk niet. Kortom: op een touchscreen werkt hoveren bij gebrek aan een cursor totaal anders of zelfs helemaal niet.

Omdat steeds meer mensen sites bezoeken met mobiele apparaten, wordt het steeds belangrijker hier rekening mee te houden. Als het goed is, staat er al geen belangrijke informatie in 'n pop-up, want ook op een desktop kun je nooit zeker weten of zo'n pop-up wel verschijnt.

Op de door mij geteste systemen werkt deze pop-up als volgt:

De links werken dus in alle geteste systemen, maar in de verwerking van de pop-ups zit nogal verschil.

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> <html lang="nl">

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

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

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

Het hier gebruikte doctype is dat van html5. Dit kan al veilig worden gebruikt.

<meta charset="utf-8">

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

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

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

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

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

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

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 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 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 kinderen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

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.

Hoewel in dit voorbeeld verder geen em wordt gebruikt, laat ik dit toch staan. Op de meeste pagina's zullen wel lettergroottes worden gebruikt, en dan is deze truc nuttig.

color: black;

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

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. 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.

background: #ff9;

Achtergrondkleurtje.

ul

Alle ongeordende lijsten. Dat is hier alleen maar de ongeordende lijst, waarbinnen het menu staat.

position: absolute;

Met position: absolute; bij <ul>
Met position: absolute; bij <ul>

Als over een vlag wordt gehoverd, komt er tekst onder de vlag te staan. Deze tekst duwt andere elementen opzij. Als ik de <ul> absoluut positioneer, telt deze niet meer mee voor andere elementen. Hij gaat volledig z'n eigen gang, en dat geldt ook voor alles binnen de <ul>. Nu duwt de tekst, als deze verschijnt, andere elementen niet meer van hun plaats, maar komt er gewoon overheen te staan.

top: 20px;

Kleine afstand tussen bovenkant van het venster van de browser en menu.

left: 50%;

Zet de <ul> halverwege het venster van de browser neer. Omdat ik dit opgeef in procenten, maakt het niet uit hoe breed dit venster is. In combinatie met de breedte en de negatieve marge, die ik hieronder opgeef, kan ik op deze manier de <ul>, en dus de inhoud daarvan, horizontaal centreren.

width: 776px;

Binnen deze breedte passen de acht vlaggen en hun marges precies.

margin: 0 0 0 -388px;

Boven, rechts en onder geen marge. Links een negatieve marge.

Hierboven heb ik de <ul> 776 px breed gemaakt en halverwege het venster van de browser gepositioneerd. Als ik nu de <ul> de helft hiervan terug naar links zet, 388 px, staat de <ul> voor de helft links van het midden van het venster van de browser.

En omdat er nou eenmaal maar twee helften zijn, móét de rechterhelft van de <ul> dus rechts van het midden van het venster van de browser staan. Oftewel: de <ul> met het daarin zittende menu staat altijd horizontaal gecentreerd, ongeacht de grootte van het browservenster.

Verschillende browsers hebben verschillende standaardmarges bij een ongeordende lijst. Ook om die reden is het verstandig zelf een marge op te geven, omdat je anders verschillen in weergave krijgt.

padding: 0;

Verschillende browsers hebben verschillende standaard-instellingen voor padding. Daarom is het verstandig die zelf op te geven.

list-style-type: none;

De gebruikelijke bolletjes en zo van een ongeordende lijst wil ik hier niet hebben.

li

Alle lijst-items. In dit voorbeeld staat in elk lijst-item alleen maar een link met daarin een vlag en de naam van het bijbehorende land.

float: left;

Een <li> is een blok-element. Normaal genomen komt elk lijst-item dus op een nieuwe regel te staan. Door ze naar links te floaten, komen ze naast elkaar te staan.

width: 97px;

De afbeeldingen binnen de lijst-items zijn 81 px breed. Door de lijst-items iets breder te maken, kan er links en rechts van de vlaggen wat lege ruimte aan worden gebracht.

text-align: center;

Een <img> is een inline-element, net zoals gewone tekst. Weliswaar met wat aparte eigenschappen, maar het blijft een inline-element. Daardoor kan ook een <img> op deze manier horizontaal gecentreerd worden.

De vlaggen zijn 81 px breed en de lijst-items 97 px. Er blijft dus 16 px ruimte over. En omdat de vlaggen horizontaal zijn gecentreerd, komt er links en rechts van elke vlag een lege ruimte van 16 : 2 = 8 px.

De lijst-items staan helemaal tegen elkaar aan, maar tussen de vlaggen zit nu wat afstand.

img

Alle afbeeldingen. Dat zijn hier alleen de vlaggen.

width: 81px; height: 54px;

Omdat alle vlaggen even breed en hoog zijn, is het simpeler om de breedte en hoogte in de css op te geven dan in de html.

border: 0;

De afbeeldingen staan binnen een link. Afbeeldingen binnen een link krijgen standaard een ongelooflijk lelijke knalblauwe rand. Weg ermee.

li a

Alle links die binnen een lijst-item zitten. Dat zijn hier alleen de acht links, waarbinnen de vlaggen en de namen van de landen staan.

text-decoration: none; color: black;

Tekst binnen een link wordt onderstreept en heeft een aparte kleur. Dat geldt ook voor de tekst die bij hoveren tevoorschijn komt, want ook die staat binnen de link.

De afwijkende kleur is gewoon zichtbaar, de onderstreping niet altijd. Dat komt door het gebruik van transform en het verplaatsen van de tekst. Maar omdat de onderstreping soms wel zichtbaar is, moet ik hem toch weghalen.

Ik wil hier ook gewone zwarte tekst, daarom geef ik als voorgrondkleur zwart op.

font-family: "Lucida Console", "Courier New", FreeMono, monospaced;

Dit zijn alle drie niet-proportionele fonts: de letter 'm' heeft evenveel ruimte als de letter 'i'. De spans waar de letters in staan, staan op een denkbeeldige ronde lijn. Door alle spans even breed te maken, is de verdeling over die denkbeeldige ronde lijn beter. Maar dan moet ik wel een niet-proportionele letter gebruiken, anders ziet het er niet goed uit.

Als Lucida Console aanwezig is op de computer van de bezoeker, wordt die gebruikt. Als die er niet is, wordt gekeken of Courier New is geïnstalleerd. Als ook die niet is geïnstalleerd, wordt FreeMono gebruikt. Als ook die niet wordt gevonden, wordt in ieder geval een niet-proportioneel (monospaced) font gebruikt.

Met deze drie fonts wordt (vrijwel) elke computer met Windows, Apple en Linux gedekt.

Lucida Console is op (vrijwel) elke computer met Windows geïnstalleerd.

Courier New is op (vrijwel) elke computer geïnstalleerd.

FreeMono is op (vrijwel) elke computer met Linux geïnstalleerd.

Lucida Console staat vooraan, omdat die op Windows beter oogt dan Courier New.

li a span

Alle spans binnen een link die weer binnen een lijst-item staat.

Binnen elke link staat een span, waarbinnen de naam van een land staat. Binnen die span staat weer voor elke letter apart een geneste span. Omdat al deze spans aan deze selector voldoen, geldt dit voor álle spans.

display: none;

Verberg de spans, en dus ook de inhoud van de spans.

li a:hover span

Als ik over een link binnen een lijst-item hover, doe dan iets met de daarbinnen zittende spans.

Binnen elke link staat een span, waarbinnen de naam van een land staat. Binnen die span staat weer voor elke letter apart een geneste span. Omdat al deze spans aan deze selector voldoen, geldt dit voor álle spans.

display: inline-block;

Bij li a span zijn deze spans verborgen. Hier maak ik ze weer zichtbaar, maar alleen bij hoveren over de link.

Door het gebruik van inline-block gedragen de spans zich als een inline-element: ze worden niet op een nieuwe regel gezet. Maar ze gedragen zich ook min of meer als een blok-element: ik kan eigenschappen als breedte gebruiken. In dit geval het beste uit twee werelden.

position: relative;

Door de spans relatief te positioneren, kan ik ze verplaatsen. De grootte van de verplaatsing varieert per span, die geef ik later apart op.

span.negen

De spans met class="negen". Dit zijn de spans waarbinnen de namen van landen met negen letters staan: Bulgarije, Frankrijk en Macedonië.

width: 110px;

De lijst-items heb ik bij li een breedte van 97 px gegeven. Binnen span.negen staan namen van negen letters lengte. Hoewel ik van alles met die letters heb gedaan, blijven het gewoon letters. Ik heb het hier verder over Bulgarije, maar dit geldt voor álle langere namen.

De negen letters van Bulgarije passen niet binnen het lijst-item: de naam is gewoon te breed. Mede omdat elke letter in een eigen span staat, die 14 px breed is. 9 x 14 px is 126 px, dus dat past gewoon niet binnen een lijst-item van 97 px.

Normaal genomen wordt de hele naam toch getoond, omdat overflow standaard op visible staat. En omdat het één woord is, wordt normaal genomen alles op dezelfde regel gezet.

Maar hier heb ik elke letter binnen een eigen span gezet, die als een inline-block wordt weergegeven, en dan ligt het anders. Wat niet meer binnen het lijst-item past, wordt vrolijk op een nieuwe regel gezet.

Zonder breedte past de naam niet op één regel

Op de afbeelding hiernaast heb ik het lijst-item een dikke blauwe rand gegeven. De span waar 'Bulgarije' in staat heeft een groene achtergrond. Deze is, omdat het een inline-block is, even breed als het lijst-item. Elk wit blokje is een eigen span met daarin een letter.

'Bulgarij' past binnen de 97 px van het lijst-item, de laatste letter 'e' niet. Die wordt dus op een nieuwe regel gezet, omdat elke letter in een eigen inline-block-span staat.

(Als je dit narekent, klopt het niet: er zouden meer letters op de volgende regel moeten komen. Maar de spans worden verderop iets naar links verplaatst, vandaar dat alleen de letter 'e' niet op de regel past.)

Als ik de span waar het hele woord in staat een breedte geef, waarbinnen alle negen spans met letters passen, dan gaat het wel goed. Deze breedte is 110 px.

De spans met letters zijn samen 126 px, dus meer dan 110 px, maar ze worden bij span.negen span met behulp van een negatieve marge naar links verplaatst, waardoor 110 px toch breed genoeg is. Dat getal 110 heb ik gekregen door gewoon even uit te proberen.

De spans waar de namen van de landen in staan, worden als inline-block weergegeven. Daardoor krijgen ze automatisch dezelfde breedte als hun ouders, dat zijn hier de lijst-items die 97 px breed zijn. Ik hoef daarom alleen maar een breedte op te geven, als de naam van het land niet binnen het lijst-item past.

left: -7px;

Bij li a:hover span heb ik alle spans een relatieve positie gegeven, daardoor kan ik de span hier verplaatsen.

Zonder correctie naar links

Het lijst-item is 97 px breed, de span 110 px. Daardoor steekt de span rechts van het lijst-item uit. 110 - 97 = 13 px. Als ik de span 7 px naar links verplaats, staat hij horizontaal midden onder het lijst-item, en dus onder de daarin zittende vlag.

Hiernaast is de correctie naar links weggelaten. Duidelijk is te zien dat de naam te ver naar rechts staat. Bij langere namen is dat nog veel meer het geval.

span.negen span

De spans die binnen een span met class="negen" staan. Binnen elk van deze spans staat één letter van de namen van de landen, die negen letters lang zijn.

Een aantal van de eigenschappen is hetzelfde voor ál deze spans, die kan ik hier voor allemaal opgeven. De afwijkende instellingen geef ik dan later apart op.

width: 15px;

Ik maak de spans iets breder dan eigenlijk nodig is. Hierdoor wordt de achtergrondkleur ook breder.

Weergave zonder breedte bij de spans met letters

Bij li heb ik opgegeven dat de tekst binnen de lijst-items horizontaal gecentreerd moet worden. Dat geldt ook voor de kinderen van het lijst-item, dus ook voor de spans waarbinnen de letters van de naam staan. De letters staan dus horizontaal gecentreerd in de 15 px brede span.

De precieze breedte van deze spans is afhankelijk van het aantal letters in de naam van het land.

Hiernaast staat het sterk vergrote resultaat als ik geen breedte aan de spans opgeef. Omdat de achtergronden smal zijn, en dus de achtergrondkleur ook, zijn de kieren tussen de spans behoorlijk groot.

Voor de duidelijkheid heb ik de achtergronden hier even zwart gemaakt.

Weergaven zonder negatieve linkermarge bij de spans met letters

Op de afbeelding hiernaast hebben de spans een vaste breedte gekregen. Hierdoor hebben ze meer achtergrond gekregen. De kieren tussen de spans zijn in verhouding kleiner geworden, maar nog steeds te groot.

Op de vergroting hiernaast is ook goed te zien, dat de ronde lijn in werkelijkheid helemaal niet rond is. In werkelijkheid zijn het zes (of een ander aantal, afhankelijk van het aantal letters) rechte lijntjes.

margin-left: -3px;

Omdat de spans breder zijn gemaakt dan eigenlijk voor de erin staande letters nodig is, kan ik ze 'n paar pixel naar links verplaatsen, zonder dat de letters over elkaar heen komen te staan. Het resultaat daarvan is dat de achtergronden vrijwel over elkaar heen komen te staan.

Voor de verplaatsing gebruik ik een negatieve marge, omdat de spans daardoor daadwerkelijk worden verplaatst.

Weergave met negatieve linkermarge bij de spans met letters

Als ik left gebruik, worden ze voor het oog wel verplaatst, maar in werkelijkheid blijven ze de oorspronkelijke ruimte nog innemen. Dat betekent dat ik de eerste span 3 px zou moeten verplaatsen, de tweede 6 px, enz. Met een negatieve marge kan ik ze allemaal evenveel verplaatsen.

Op de afbeelding hiernaast is het resultaat te zien: de kieren tussen de spans zijn nu veel kleiner.

Bij een sterke vergroting zie je nog steeds kieren. Ook zie je nog steeds dat de 'ronde' lijn niet echt rond is. Maar zonder sterke vergroting zijn deze afwijkingen vrijwel niet te zien.

Wel is het verstandig om de achtergrondkleur van de span te laten lijken op de kleur waarboven de letters komen te staan, zodat eventuele kieren niet opvallen. Op deze afbeeldingen is een zwarte achtergrond boven een lichtgele pagina gebruikt. Daardoor zie je de afwijkingen veel beter dan wanneer je, zoals in het voorbeeld, een witte achtergrond boven een lichtgele pagina gebruikt.

background: white;

Witte achtergrondkleur.

span.negen-1

De spans met class="negen-1". Deze spans bevatten de eerste letter van de namen die negen letters lang zijn.

Bij span.negen span heb ik al de eigenschappen opgegeven, die gelden voor álle spans waarbinnen de letters voor de namen met een lengte van negen letters liggen.

-moz-transform: rotate(46deg); -o-transform: rotate(46deg); -webkit-transform: rotate(46deg); -ms-transform: rotate(46deg); transform: rotate(46deg);

Nee, ik had niet de hik toen ik dit typte. Hier staat in feite vijf keer hetzelfde. De reden daarvan staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-. In de toekomst blijft van deze hele riedel alleen transform: rotate(46deg); over.

transform is de eigenschap die voor de transformatie, de verandering, zorgt. De soort transformatie is hier rotate: een rotatie, een draaiing. De grootte van die draaiing is 46 graden.

span.negen-2

De spans met class="negen-2". Deze spans bevatten de tweede letter van de namen die negen letters lang zijn.

top: 7px;

Bij li a:hover span heb ik alle spans waarbinnen de namen staan een relatieve positie gegeven, daardoor kan ik hier gewoon top gebruiken.

Omdat de namen op een 'ronde' lijn moeten worden weergegeven, moet de tweede letter van de naam van het land iets lager dan de eerste letter komen te staan.

-moz-transform: rotate(36deg); -o-transform: rotate(36deg); -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); transform: rotate(36deg);

Zelfde als span.negen-1, alleen is het aantal graden anders.

span.negen-3 {top: 13px; -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
span.negen-4 {top: 18px; -moz-transform: rotate(13deg); -o-transform: rotate(13deg); -webkit-transform: rotate(13deg); transform: rotate(13deg);}

De spans met class="negen-3" en class="negen-4". Deze spans bevatten de derde en vierde letter van de namen die negen letters lang zijn.

Zelfde als span.negen-2, alleen is de verplaatsing naar omlaag en het aantal graden anders.

span.negen-5 {top: 19px;}

De spans met class="negen-5". Deze spans bevatten de vijfde letter van de namen die negen letters lang zijn.

Omdat deze letter precies in het midden staat, hoeft hij niet gedraaid te worden. Hij wordt alleen een eindje naar omlaag verplaatst.

span.negen-6 {top: 18px; -moz-transform: rotate(-13deg); -o-transform: rotate(-13deg); -webkit-transform: rotate(-13deg); -ms-transform: rotate(-13deg); transform: rotate(-13deg);}

tot en met

span.negen-9 {-moz-transform: rotate(-46deg); -o-transform: rotate(-46deg); -webkit-transform: rotate(-46deg); -ms-transform: rotate(-46deg); transform: rotate(-46deg);}

De spans met class="negen-6" tot en met class="negen-9". Deze spans bevatten de vijfde tot en met negende letter van de namen die negen letters lang zijn.

Zelfde als span.negen-2, alleen is de verplaatsing naar omlaag en het aantal graden anders.

Omdat de namen op een denkbeeldige ronde lijn staan, neemt rechts van het midden de verplaatsing naar omlaag af, en de draaiing is nu negatief. De negende en laatste letter krijgt helemaal geen top, deze komt gewoon op z'n normale plaats te staan.

span.zes span {width: 16px; margin-left: -3px; background: white;}
span.zes-1 {-moz-transform: rotate(35deg); -o-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg);}

tot en met

span.zes-6 {-moz-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); transform: rotate(-35deg);}

Deze spans bevatten de namen die zes letters lang zijn: Italië en Monaco. Zelfde verhaal als span.negen span en verder, alleen zijn alle maten anders.

Omdat deze zes letters binnen de breedte van het lijst-item passen (97 px), hoef ik hier geen breedte aan span.zes op te geven, zoals ik wel moest doen voor span.negen.

De eerste en de laatste letter krijgen geen top, deze komen gewoon op hun normale plaats te staan.

span.dertien {width: 146px; left: -25px;}
span.dertien span {width: 14px; margin-left: -3px; background: white;}
span.dertien-1 {-moz-transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg);}

tot en met

span.dertien-13 {-moz-transform: rotate(-40deg); -o-transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg);}

Deze spans bevatten de namen die dertien letters lang zijn, dat is hier alleen Liechtenstein. Zelfde verhaal als span.negen en verder, alleen zijn alle maten anders.

Omdat deze dertien letters niet binnen de breedte van het lijst-item passen (97 px), moet ik weer een breedte aan span.dertien geven, net als bij span.negen.

De eerste en de laatste letter krijgen geen top, deze komen gewoon op hun normale plaats te staan.

De zevende letter, die in span.dertien-7 staat, staat precies in het midden en wordt daarom niet gedraaid.

span.acht span {width: 14px; margin-left: -3px; background: white;}
span.acht-1 {-moz-transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg);}

tot en met

span.acht-8 {-moz-transform: rotate(-40deg); -o-transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg);}

Deze spans bevatten de namen die acht letters lang zijn: Litouwen en Oekraïne. Zelfde verhaal als span.negen span en verder, alleen zijn alle maten anders.

Omdat deze acht letters binnen de breedte van het lijst-item passen (97 px), hoef ik hier geen breedte aan span.acht op te geven, zoals ik wel moest doen voor span.negen.

De eerste en de laatste letter krijgen geen top, deze komen gewoon op hun normale plaats te staan.

div#tekst

De div met id="tekst". De div waarbinnen de Latijnse opvultekst staat.

width: 776px;

Even breed als het menu maken. Een breedte is ook nodig om horizontaal te kunnen centreren op de manier zoals ik gelijk hieronder doe.

margin: 90px auto 0;

Omdat voor links geen maat is opgegeven, wordt dit automatisch hetzelfde als rechts. Hier staat dus eigenlijk 90px auto 0 auto in de volgorde boven - rechts - onder - links.

Omdat de <ul> waar het menu in staat absoluut is gepositioneerd, komt de tekst niet vanzelf onder de <ul> te staan. Daarom geef ik aan de bovenkant een marge van 90 px.

Links en rechts auto. Dat betekent hier: evenveel. De tekst staat dus altijd horizontaal gecentreerd, ongeacht hoe breed het venster van de browser is.

Speciaal voor Internet Explorer ouder dan versie 9

<!--[if lt IE 9]> <style> li a span {font-size: 16px;} span.negen-1 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.71933980, M21=0.71933980, sizingMethod='auto expand');} span.negen-2 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.58778525, M21=0.58778525, sizingMethod='auto expand');} span.negen-3, span.zes-2, span.acht-3 {filter:progid:DXImageTransform.Microsoft.Matrix (M12=-0.34202014, M21=0.34202014, sizingMethod='auto expand');} span.negen-4 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.22495105, M21=0.22495105, sizingMethod='auto expand');} span.negen-5 {top: 20px; filter:progid:DXImageTransform.Microsoft.Matrix (M12=-0.01745241, M21=0.01745241, sizingMethod='auto expand');} span.negen-6 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.22495105, M21=-0.22495105, sizingMethod='auto expand'); font-size: 13px;} span.negen-7, span.zes-5, span.acht-6 {filter:progid:DXImageTransform.Microsoft.Matrix (M12=0.34202014, M21=-0.34202014, sizingMethod='auto expand');} span.negen-7 {font-size: 12px;} span.zes-5, span.acht-6 {font-size: 14px;} span.negen-8 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.58778525, M21=-0.58778525, sizingMethod='auto expand'); font-size: 12px;} span.negen-9 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.71933980, M21=-0.71933980, sizingMethod='auto expand'); font-size: 12px;} span.zes-1 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.57357644, M21=0.57357644, sizingMethod='auto expand');} span.zes-3 {top: 11px; filter:progid:DXImageTransform. Microsoft.Matrix(M12=-0.08715574, M21=0.08715574, sizingMethod='auto expand');} span.zes-4 {top: 11px; filter:progid:DXImageTransform. Microsoft.Matrix(M12=0.08715574, M21=-0.08715574, sizingMethod='auto expand');} span.zes-6 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.57357644, M21=-0.57357644, sizingMethod='auto expand'); font-size: 14px;} span.dertien-1, span.acht-1 {filter:progid:DXImageTransform.Microsoft.Matrix (M12=-0.64278761, M21=0.64278761, sizingMethod='auto expand');} span.dertien-2 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.52991926, M21=0.52991926, sizingMethod='auto expand');} span.dertien-3 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.40673664, M21=0.40673664, sizingMethod='auto expand');} span.dertien-4 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.35836795, M21=0.35836795, sizingMethod='auto expand');} span.dertien-5 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.30901699, M21=0.30901699, sizingMethod='auto expand');} span.dertien-6 {top: 28px; filter:progid:DXImageTransform.Microsoft.Matrix (M12=-0.13917310, M21=0.13917310, sizingMethod='auto expand');} span.dertien-7 {top: 30px; filter:progid:DXImageTransform.Microsoft.Matrix (M12=-0.01745241, M21=0.01745241, sizingMethod='auto expand');} span.dertien-8 {top: 28px; filter:progid:DXImageTransform.Microsoft.Matrix (M12=0.13917310, M21=-0.13917310, sizingMethod='auto expand'); font-size: 15px;} span.dertien-9 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.30901699, M21=-0.30901699, sizingMethod='auto expand'); font-size: 14px;} span.dertien-10 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.35836795, M21=-0.35836795, sizingMethod='auto expand'); font-size: 14px;} span.dertien-11 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.40673664, M21=-0.40673664, sizingMethod='auto expand'); font-size: 14px;} span.dertien-12 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.52991926, M21=-0.52991926, sizingMethod='auto expand'); font-size: 12px;} span.dertien-13, span.acht-8 {filter:progid:DXImageTransform.Microsoft.Matrix (M12=0.64278761, M21=-0.64278761, sizingMethod='auto expand');} span.dertien-13 {font-size: 12px;} span.acht-8 {font-size: 14px;} span.acht-2 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.50000000, M21=0.50000000, sizingMethod='auto expand');} span.acht-4 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=-0.12186934, M21=0.12186934, sizingMethod='auto expand');} span.acht-5 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.12186934, M21=-0.12186934, sizingMethod='auto expand');} span.acht-7 {filter:progid:DXImageTransform.Microsoft. Matrix(M12=0.50000000, M21=-0.50000000, sizingMethod='auto expand'); font-size: 14px;} </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 oudere versies dan Internet Explorer 9 (lt betekent less than, minder dan), maar je kunt het ook voor andere versies aangeven.

(Ik gebruik ouder dan versie 9 en niet specifiek versie 7 en 8. Ook Internet Explorer 6 valt hieronder. Dit werkt namelijk mogelijk ook in Internet Explorer 6. En hoewel ik niet meer test in deze browser, ga ik ook niet moedwillig dingen blokkeren. In de beschrijving heb ik het verder steeds over Internet Explorer 7 en 8.)

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

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

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

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

li a span

Alle spans die binnen een link zitten, die weer binnen een lijst-item zit. Binnen deze spans staan in dit voorbeeld de namen van de landen.

font-size: 16px;

Normaal genomen gebruik ik em als eenheid voor letters, omdat een lettergrootte in px in Internet Explorer niet vergroot of verkleind kan worden. In dit geval komt het echter goed uit als de lettergrootte niet kan worden veranderd, omdat de namen in Internet Explorer 7 en 8 volledig vernacheld worden als de lettergrootte wordt veranderd.

In andere browsers kan ook een lettergrootte in px worden veranderd, maar die mishandelen bij een andere lettergrootte de namen niet.

span.negen-1

De spans met class="negen-1". Deze spans bevatten de eerste letter van de namen die negen letters lang zijn.

{filter:progid:DXImageTransform.Microsoft.Matrix (M12=-0.71933980, M21=0.71933980, sizingMethod='auto expand');}

Internet Explorer 7 en 8 kennen transform niet. Internet Explorer 9 gaat dit wel herkennen. Daarom moet voor Internet Explorer 7 en 8 een andere manier worden gebruikt: een filter. Een filter is een door Microsoft bedachte methode die alleen in Internet Explorer werkt. Hij heeft veel minder mogelijkheden dan transform.

De plaatsing van de elementen wordt nogal verstoord, dus daarvoor zijn bergen correcties nodig. Die zijn voor Internet Explorer 7 en 8 niet hetzelfde.

De lettergrootte verandert spontaan in de tweede helft van de woorden, waar de spans met de letters een negatief aantal graden krijgen. Ook dat moet worden gecorrigeerd.

De kwaliteit is veel minder dan die van transform. Transform gebruikt vectoren voor de verandering. Dat zijn wiskundige formules die aangeven hoe iets getekend moet worden: trek een lijn van a naar b met een ronding van c, enz. Hierdoor kun je probleemloos vergroten en verkleinen.

Het filter matrix maakt een bitmap-afbeelding van het origineel. Hierbij worden geen formules gebruikt, maar worden puntjes opgegeven, die samen de nieuwe afbeelding vormen. Vergroten en verkleinen gaat hierdoor niet goed, en de kwaliteit is ook veel minder dan bij vectoren. (Soms zijn bitmaps een betere keuze dan vectoren, maar hier niet.)

En als klap op de vuurpijl is voor deze verzameling bagger een waanzinnig ingewikkelde schrijfwijze nodig. Eigenlijk zouden er vier van die grote getallen moeten staan, maar bij de draaiing van de letters blijken twee getallen genoeg te zijn. Evengoed nog steeds veel ingewikkelder dan het simpele rotate(...deg) van transform.

Ik heb er geen flauw idee van hoe dit werkt. De getallen kunnen worden berekend met behulp van sinus en cosinus en zo. Mijn kennis van sinus gaat niet verder dan dat sinus geen neefje is van Ot en Sien, dus dat schiet niet op.

Gelukkig zijn er op diverse sites programmaatjes te vinden, die een draaiing van een aantal graden omrekenen naar wat deze ellendepukkel, pardon, dit filter nodig heeft. Ik heb die op www.boogdesign.com/examples/transforms/matrix-calculator.html gebruikt.

Je voert daar het aantal graden in dat gedraaid moet worden en krijgt keurig een kant-en-klare formule voor het filter terug. Daar staan vier getallen in, maar in dit geval blijken twee getallen voldoende te zijn.

Uitleggen kan ik dit dus verder niet: ik begrijp het zelf niet. Om dit goed te kunnen begrijpen, moet je echt intensief met wiskunde aan de slag.

De kreet sizingMethod='auto expand' is nodig om een goed resultaat te krijgen. (Nou ja, goed...)

Dit filter werkt verder voor alle letters hetzelfde, alleen zijn de maten steeds anders.

Bij sommige letters moet de lettergrootte worden veranderd:

span.negen-7 {font-size: 12px;}

Bij li a span is de lettergrootte voor Internet Explorer 7 en 8 16 px gemaakt. Als de graden negatief worden, dus in de tweede helft van de woorden, worden om een of andere reden de letters spontaan groter. Om de zevende letter uit namen die negen letters lang zijn even groot te maken als de eerste zes letters, blijkt deze 12 px groot te moeten zijn.

Bij alle letters rechts van het midden moet de lettergrootte worden aangepast. Het aantal px kun je vinden door gewoon uit te proberen: het verschilt per letter.

Bij sommige letters moet de hoogte worden aangepast:

span.negen-5 {top: 20px; filter:progid:DXImageTransform.Microsoft.Matrix (M12=-0.017452414, M21=0.01745241, sizingMethod='auto expand');}

De vijfde letter uit namen van negen letters lang wordt 19 px omlaag verplaatst in de algemene css. Voor Internet Explorer 7 en 8 moet dat 20 px zijn.

Hoe groot de verplaatsing moet zijn, moet ook weer per letter worden uitgeprobeerd.

De code is dus voor alle letters vrijwel hetzelfde: een matrix filter en soms een top of een lettergrootte.

Dan zijn er nog twee andere vreemdigheden. De middelste letters van de woorden die negen en dertien letters lang zijn, worden bij de andere browsers niet gedraaid. Omdat ze in het midden staan, worden ze gewoon niet-gedraaid weergegeven. Maar omdat het matrix filter een bitmap van de letters maakt, zien de gedraaide letters er totaal anders uit dan de niet-gedraaide.

Om dit te voorkomen, worden span.negen-5 en span.dertien-7 1 graad gedraaid. Dit zie je nauwelijks, maar het zorgt er wel voor dat van de in deze spans staande letters ook een bitmap wordt gemaakt, waardoor alle letters er hetzelfde uitzien.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style> span.negen {width: 120px; margin-left: -3px;} span.negen span {width: 11px;} span.zes {width: 84px;} span.zes span {width: 13px;} span.dertien {width: 140px; margin-left: 3px;} span.acht {width: 96px;} span.dertien span, span.acht span {width: 11px;} span span.negen-2, span span.negen-9, span span.zes-6, span span.dertien-2, span span.dertien-12, span span.dertien-13, span span.acht-2, span span.acht-8 {margin-left: -11px;} span span.negen-3, span span.negen-8, span span.zes-2, span span.dertien-3, span span.dertien-11, span span.acht-3 {margin-left: -9px;} span span.negen-4, span span.negen-7, span span.zes-3, span span.zes-5, span span.dertien-4, span span.dertien-5, span span.dertien-9, span span.dertien-10, span span.acht-4 {margin-left: -5px;} span span.negen-5, span span.negen-6, span span.dertien-7 {margin-left: -2px;} span span.dertien-6, span span.dertien-8, span span.acht-5, span span.acht-6 {margin-left: -3px;} span span.acht-7 {margin-left: -7px;} div#tekst {padding-top: 80px;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 7. Uitleg zie bij Speciaal voor Internet Explorer ouder dan versie 9.

Laat ik het positief bekijken: Internet Explorer 7 zorgt ervoor dat ik door tijdgebrek geen hang-oudere kan worden. Ik heb allerlei manieren geprobeerd om dit met minder correcties op te lossen, maar dat is niet gelukt. Bijvoorbeeld het gebruik van vier getallen in plaats van twee bij het matrix filter had geen enkele invloed.

Er zit dus niets anders op dan vrijwel per letter correcties aan te brengen. De enige manier die ik heb kunnen ontdekken om te bepalen, welke correcties je moet aanbrengen, is gewoon uitproberen.

Je kunt natuurlijk voor Internet Explorer 7 ook gewoon een rechte tekst laten verschijnen. Als je de css voor het matrix filter ontoegankelijk maakt voor Internet Explorer 7, kun je simpel gewone labeltjes laten verschijnen bij hoveren. Misschien ook 'n idee om dan als tekst iets te nemen als: "Geef jezelf een échte browser cadeau! Omdat je jezelf niet langer wilt kwellen!"

span.negen {width: 120px; margin-left: -3px;} span.negen span {width: 11px;}

Binnen span.negen staan de namen die negen letters lang zijn. Deze zijn in de algemene css 110 px breed gemaakt.

Binnen span.negen span staan de afzonderlijke letters van deze namen. Deze zijn in de algemene css 14 px breed gemaakt.

Voor Internet Explorer 7 blijken deze maten niet te werken. De combinatie van bovenstaande maten levert wel een acceptabel resultaat op. Voor span.negen is ook nog een correctie naar links nodig. De maten zijn gevonden door gewoon uit te proberen.

span.zes {width: 84px;} span.zes span {width: 13px;} span.dertien {width: 140px; margin-left: 3px;} span.acht {width: 96px;} span.dertien span, span.acht span {width: 11px;}

Voor deze spans geldt hetzelfde als voor span.negen, alleen zijn de maten anders: voor elke span met z'n geneste spans is een eigen combinatie nodig. Voor span.zes en span.acht is geen verplaatsing naar links nodig.

span span.negen-2, span span.negen-9, span span.zes-6, span span.dertien-2, span span.dertien-12, span span.dertien-13, span span.acht-2, span span.acht-8 {margin-left: -11px;}

Om wat voor reden dan ook worden tweede en volgende letters binnen Internet Explorer 7 veel te ver naar links gezet. Per letter moet worden uitgeprobeerd, hoe ver deze terug naar links moet worden gezet om op de juiste plaats te komen. Om wat voor reden dan ook blijkt top niet te werken in combinatie met filter matrix, dus wordt een negatieve marge gebruikt.

Ik heb hier als selector span span.negen-2 enz. gebruikt, dus twee keer span. In de algemene css staat onder andere span.negen span {margin-left: -3px;}.

span.negen span heeft meer gewicht dan alleen span.negen-2, daardoor zou deze css worden genegeerd.

Door niet alleen span.negen-2, maar span span.negen-2 te gebruiken, krijgt deze selector evenveel gewicht. En omdat hij later in de css staat, overrulet hij nu de eerdere uit de algemene css.

span span.negen-3, span span.negen-8, span span.zes-2, span span.dertien-3, span span.dertien-11, span span.acht-3 {margin-left: -9px;} span span.negen-4, span span.negen-7, span span.zes-3, span span.zes-5, span span.dertien-4, span span.dertien-5, span span.dertien-9, span span.dertien-10, span span.acht-4 {margin-left: -5px;} span span.negen-5, span span.negen-6, span span.dertien-7 {margin-left: -2px;} span span.dertien-6, span span.dertien-8, span span.acht-5, span span.acht-6 {margin-left: -3px;} span span.acht-7 {margin-left: -7px;}

Voor al deze spans waarin letters staan geldt hetzelfde als voor span span.negen-2, alleen is de afstand waarover naar links verplaatst moet worden anders.

div#tekst

De div met id="tekst". De div waar de Latijnse opvultekst in staat.

padding-top: 90px;

Omdat Internet Explorer 7 een marge aan de bovenkant straal negeert, brengen we voor deze browser een padding aan, zodat de tekst onder het menu komt te staan.

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 8 mei 2012.

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

Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan bij Bekende problemen. Dat stukje is er niet voor niets. Hierboven is alleen aangegeven, waarin is getest. Dat wil niet zeggen dat het werkt, en al helemaal niet dat het foutloos werkt. Lees Bekende problemen dus!

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 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 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 wijzigingen en/of aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

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

Valideren

Omdat in de css gebruik wordt gemaakt van de voorvoegsels -ms-, -mozilla-, -webkit- en -o-, valideert de css mogelijk niet. Omdat in dit geval precies bekend is waarom dat is, lijkt me dat geen probleem. Je kunt in de instellingen van de validator deze foutmelding uitschakelen.

Firefox en Safari

Als de letters tot meer dan 150% worden vergroot, komen de letters in de pop-up gedeeltelijk over elkaar heen te staan. Bij zoomen speelt dit niet.

Zoomen

Bij inzoomen (vergroten) kunnen aan de linkerkant vlaggen verdwijnen. Op een 800 px breed scherm gebeurt dit gelijk, op een 1280 px breed scherm na inzoomen tot ongeveer 160%. Ik beken: slecht getest. Eigenlijk ben ik dit gewoon vergeten, denk ik.

Omdat het in dit voorbeeld hier niet om draait en makkelijk is op te lossen, ga ik dit niet corrigeren.

Touchscreen

Hoveren werkt op een touchscreen volledig anders dan op een desktop, of het werkt zelfs helemaal niet. Zie verder bij Touchscreen.

Wijzigingen

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

:

Nieuw opgenomen.

22 mei 2011:

Internet Explorer 9 in de tekst verwerkt.

8 mei 2012: