Skip links en inhoudsopgave

Laatst aangepast: 13 december 2011

Menu met afbeelding. Elke link heeft 'n bijbehorende vergrote uitsnede

Korte omschrijving

Naast een afbeelding staan drie lijsten met genummerde links. De nummers verwijzen naar het bijbehorende onderdeel van de afbeelding. Als je over 'n link hovert, wordt het bijbehorende onderdeel van de afbeelding vergroot.

Op de afbeelding staan getallen, die corresponderen met de links. Als je over 'n getal hovert wordt het bijbehorende onderdeel van de afbeelding vergroot. Bij klikken op 'n getal wordt de bijbehorende link gevolgd.

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

In totaal zijn er 57 stukjes van de afbeelding die vergroot worden weergegeven. Dat zouden 57 afbeeldingen zijn die elk apart moeten worden aangeroepen, waaronder veel heel erg kleine. Daarom heb ik de meeste kleine afbeeldingen aan elkaar geknoopt en worden die in één keer gedownload. Een serie op deze manier gecombineerde afbeeldingen heet een 'sprite'.

Alleen de grote afbeelding die je ziet bij het openen van de pagina wordt altijd gedownload. De andere afbeeldingen worden pas gedownload als je over de erbij horende link hovert of als de link focus heeft.

Omdat ik geen zin had om 36 pagina's te maken (eentje achter elke link), verkleuren alle links nadat je er eentje hebt geopend. Alleen nummer 3 heeft 'n eigen pagina, zodat je het verschil tussen 'n niet-bezochte en 'n bezochte link nog kunt zien. Als je achter elke link 'n eigen pagina zou stoppen, verkleurt alleen de bezochte link die bij die pagina hoort.

Als je de verkleuring van de links ongedaan wilt maken, moet je de geschiedenis van je browser legen.

Zonder css krijg je de afbeelding op het scherm, met daaronder drie rijen links. De achterliggende pagina's blijven dus redelijk toegankelijk zonder css. Hoewel zonder css natuurlijk wel de pop-ups missen.

Screenreaders en dergelijke lezen, afhankelijk van programma en instellingen, de titels of de schermtekst van de rijen links voor. Ook hiervoor is dit menu dus toegankelijk, hoewel ook hier de afbeeldingen natuurlijk geen nut hebben.

In Internet Explorer 6 werkt dit voorbeeld wel, maar met 'n paar kleine fouten en afwijkingen. In Internet Explorer 7 is de lay-out iets anders dan in andere browsers. Zie bij Bekende problemen. In Internet Explorer 8 werkt alles zoals het hoort te werken.

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

Dit leek eigenlijk 'n niet al te ingewikkeld iets. Heb ik me daar even op verkeken... Opera en Internet Explorer 7 vochten op leven en dood met elkaar om de prijs voor het lastigste probleem. (Internet Explorer 7 hééft eigenlijk geen problemen, dat ding ís 'n probleem, met al z'n afwijkingen van de standaard. Opera houdt zich normaal genomen heel goed aan de standaard, dus dit probleem is daar volgens mij echt 'n bug.) De strijd wie de lastigste was is onbeslist geëindigd, maar 't kostte wel de nodige tijd. In de beschrijving van de code kom ik terug op die problemen, want er zijn wat aanpassingen in de css voor nodig om ze te omzeilen.

Op het scherm staat een afbeelding van mijn computer. 't Onderwerp van die afbeelding maakt natuurlijk niets uit. Op die afbeelding heb ik in totaal 56 getallen gemonteerd, die elk via 'n lijntje zijn gekoppeld aan 'n bepaald onderdeel van de tekening. De zwarte getallen horen bij het onderdeel, de bruine horen bij 'n instelscherm of zoiets dat op mijn computer verschijnt als ik op het betreffende onderdeel hover of klik.

Rechts van de afbeelding staan drie ongeordende lijsten. Drie, omdat ik de afbeelding in drie onderdelen heb opgesplitst. Elke lijst heeft een maximum-hoogte en een eigen scrollbalk.

In elke ingang van die lijsten staan één of twee links.

De eerste link hoort bij 'n onderdeel van de afbeelding en heeft ook het nummer van dat onderdeel in de link staan. 'n Eventuele tweede link is bruin en heet altijd 'pop'. Deze hoort bij 'n eventueel instelscherm of zoiets dat bij het onderdeel van de afbeelding hoort.

Binnen elke link zit 'n span. Als je over 'n link hovert, of als je daar met de Tab-toets of zo aankomt, wordt die span zichtbaar. In de span zit 'n achtergrond-afbeelding met daarop 'n vergroting van het deel van de afbeelding dat bij de link hoort. Via positioneren wordt die vergroting op 'n (min of meer) logische plaats op de afbeelding neergezet.

Elke link heeft ook nog 'n tweede span. Deze tweede span is altijd zichtbaar. Eigenlijk klopt het woord 'zichtbaar' hier niet helemaal, want deze span is wel altijd actief, maar juist onzichtbaar. Het is een klein vierkantje, dat wordt gepositioneerd boven het nummer dat bij de link hoort. En omdat deze vierkante span binnen de link ligt, reageert deze ook op hoveren. Dus als je over deze span hovert, opent de bijbehorende vergroting ook.

Met 'n beetje uitproberen kun je elk vierkantje precies boven 'n getal op de afbeelding zetten. Als je nu over 'n getal hovert, opent de bijbehorende vergroting dus ook. En als je op 'n getal klikt, wordt de bijbehorende link gevolgd, want daar is het vierkantje in de span gewoon 'n onderdeel van.

Dan zitten er verder nog wat kleine dingen in als 'n verkleuring als er over 'n link (of bijbehorend getal) wordt gehoverd, en 'n hulpschermpje en zo, maar dat is de afdeling toeters en bellen.

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 :hover, :focus en :active alle drie, omdat er geen andere onderdelen van de pagina verdwijnen achter de vergrotingen. Het enige dat op deze pagina staat zijn de links en de bijbehorende afbeelding, dus in dit geval vind ik de voordelen van :focus en :active groter dan de mogelijke nadelen.

Ook al blijft een link focus houden, zodra er op de Tab-toets wordt gedrukt of met de muis ergens buiten 'n voor hoveren gevoelige plek wordt geklikt, verdwijnt de vergroting. Hij blijft dus niet hardnekkig in de weg zitten.

Bij het hulpschermpje (achter het vraagteken) gebruik ik alleen :hover, omdat het wel heel irritant kan zijn als dat open blijft staan en 'n groot deel van de afbeelding bedekt.

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

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: 90%;

Iets kleiner dan de standaard. 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: 0.9em; zou hetzelfde moeten zijn als font-size: 90%;), 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;

Zwarte letter.

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.

div#wrapper

De div met id="wrapper". Dit is de div waar alles in staat.

position: relative;

Om kinderen van deze div te kunnen positioneren ten opzichte van deze div, moet hij zelf 'n positie hebben, ook al vul ik daar verder niets bij in.

Omdat alle hoofd-onderdelen worden gepositioneerd ten opzichte van deze div, hebben ze hetzelfde basispunt. In feite staan ze dan gelijk ook ten opzichte van elkaar gepositioneerd, wat precies de bedoeling is.

width: 790px;

Deze breedte past vrijwel in z'n geheel op 'n 800x600 scherm. Er verschijnt op zo'n klein scherm wel 'n horizontale scrollbalk, maar er is duidelijk te zien dat die eigenlijk geen nut heeft. Als ik het smaller maak, kom ik met de maat van de afbeelding in de knoei.

height: 465px;

Een div neemt automatisch de hoogte aan van de inhoud. Maar in dit geval niet, omdat de inhoud allemaal absoluut is gepositioneerd. Zonder opgegeven hoogte zou de div geen hoogte hebben. En omdat overflow op hidden staat, zou je dan helemaal niets zien.

margin: 0 auto;

Omdat onder en links niet zijn opgegeven, krijgen die automatisch hetzelfde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links. Links en rechts auto, oftewel evenveel, oftewel horizontaal gecentreerd. Centreren op deze manier kan alleen maar als het te centreren element een breedte heeft.

overflow: hidden;

Wat niet in de div past verbergen. Dit is alleen maar nodig vanwege 'n bug in Opera. Dat staat verder beschreven bij float right.

img#desktop

De image met id="desktop". De grote afbeelding.

position: absolute;

Om de afbeelding precies op de juiste plek neer te kunnen zetten. De eerste ouder met 'n positie is div#wrapper, dus er wordt gepositioneerd ten opzichte van die div.

left: 30px;

Omdat 'n aantal vergrotingen links buiten de afbeelding uitsteken, moet er 'n kleine marge aan de linkerkant zijn tussen div#wrapper en de afbeelding. Omdat div#wrapper overflow op hidden heeft staan, zouden de uitstekende vergrotingen anders in het virtuele hiernamaals eindigen.

top: 5px;

De afbeelding is groter dan je zou zeggen, omdat ik de eigenlijke afbeelding op een ondergrond heb gemonteerd van dezelfde kleur als de pagina. Dat was in dit geval het makkelijkste. De afbeelding (met achtergrond) komt aan de bovenkant precies tot aan de bovenkant van de getallen. Om 'n kleine speling te krijgen aan de bovenkant tussen getallen en rand van het venster, moet ik dus de hele afbeelding iets omlaag zetten.

h1

De belangrijkste kop van de pagina. Deze staat aan de onderkant op de afbeelding geprojecteerd, maar in de html staat hij vrijwel bovenaan, omdat dit voor zoekmachines, spraakbrowsers, en dergelijke 'n meer logische plaats is dan helemaal onderaan.

Omdat de standaardmaat van de letters veel te groot is, pas ik die aan. Maar voor zoekmachines en dergelijke blijft dit gewoon 'n kopregel van de eerste categorie, dat staat helemaal los van lettergrootte en dergelijke.

position: absolute;

Om hem precies neer te kunnen zetten. De eerste ouder met 'n positie is div#wrapper, dus er wordt gepositioneerd ten opzichte van die div.

top: 403px; left: 93px;

Hier bleek nog plek te zijn om 'n kopregel tussen te wriemelen. De letters kunnen zelfs nog 'n behoorlijk stuk worden vergroot, zonder dat 't misgaat.

Omdat de afbeelding net als deze kopregel wordt gepositioneerd ten opzichte van div#wrapper, kan ik ze dus indirect ook heel precies ten opzichte van elkaar positioneren.

width: 210px;

'n Breedte geven omdat bij 'n grotere letter anders de kopregel over de getallen rechts van de kopregel komt te staan.

margin: 0;

De standaardmarges van 'n kopregel zijn hier niet welkom.

font-size: 1em;

Normale lettergrootte. De standaard-lettergrootte van 'n <h1> is hier veel te groot. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

text-align: center;

Bij 'n andere lettergrootte blijft de tekst in de kopregel nu netjes in het midden van de breedte van 210 px staan.

ul

Alle links staan, uitgesorteerd in drie onderdelen, in drie ongeordende lijsten.

float: right;

Dit zou niet nodig moeten zijn, maar Opera werkt anders niet goed. Deze <ul>'s staan binnen div#links, die 270 px breed is, even breed als deze <ul>'s. Dus dit floaten slaat eigenlijk nergens op.

Als ik de <ul>'s echter niet float, worden in Opera verschillende vergrotingen niet of maar half getoond, en sommige sluiten niet meer. In alle andere browsers gaat dit wel goed.

Omdat ik deze <ul>'s float, moet ik de ouder hiervan, div#links, een breedte geven, anders komen de <ul>'s naast elkaar te staan in plaats van onder elkaar.

Deze twee dingen hebben weer tot gevolg, dat Opera de hoogte van de drie <ul>'s bij elkaar op lijkt te tellen, met daarbij nog de hoogte van de spans, of zoiets. Op de wildste momenten verschijnt rechts 'n gigantische scrollbar, maar alleen maar als je over de woorden scrolt, niet als je over 'n leeg deel van de <ul> scrolt.

Dit vang ik op door bij div#wrapper overflow op hidden te zetten. En dan ben ik er eindelijk, pfff. Dat was wel even zoeken, want er zijn maar liefst drie eigenlijk overbodige attributen nodig.

Het enige wat nu nog te zien is, is overbodige witte ruimte onderaan de <ul>'s, maar daar valt mee te leven, en ook dit is er alleen in Opera.

Dit lijkt 'n echte bug in Opera, want de absoluut gepositioneerde spans horen geen invloed te hebben op de rest van de pagina, er wordt op een of andere manier overbodig wit onder de <ul>'s gezet, er verschijnen wilde scrollbars, enz. 'n Iets eerdere versie liet de afbeelding stilstaan, maar de voor hoveren gevoelige plekken op de getallen scrolden wel, ook heel geestig, vooral als je iemand wilt pesten. Dus kennelijk wordt er aan dit probleem gewerkt.

width: 270px;

Breedte geven, anders krijgen ze 'n breedte die afhangt van de lengte van de links.

height: 140px;

Om 't ook nog op 'n 800x600-scherm te laten passen ('n hobby van mij...), moet ik wat woekeren met de ruimte. Dus ik maak de drie <ul>'s niet hoger dan 140px.

overflow: auto;

Door overflow op auto te zetten, krijgen ze 'n scrollbar en zijn toch alle links te bereiken. En ik vind 't er persoonlijk nog leuk uitzien ook.

margin: 3px 0 0 3px; padding: 0;

Omdat de standaard wat onduidelijk is, hebben verschillende browsers 'n verschillende marge en padding in 'n <ul>. Hiermee zien ze er allemaal hetzelfde uit. Geen padding, en alleen boven en links 'n marge van 3px.

border: black solid 1px;

Zwarte rand rondom de <ul>'s, en dus rondom de links.

list-style: none;

De gebruikelijke attributen van 'n <ul> wil ik hier niet.

background: white;

Witte achtergrond.

li

De ingangen in de ongeordende lijsten.

padding-left: 5px;

Links 'n padding van 5 px. Dit geeft 'n kleine afstand aan de linkerkant tussen tekst en zwarte rand rondom de <ul>.

ul li:first-child

De <li> binnen de <ul>, maar alleen maar als het de eerste <li> binnen de <ul> is. Dat zijn dus hier alleen maar de kopjes met de namen van de drie groepen. Internet Explorer 6 kent geen :first-child, dat corrigeer ik later voor die browser.

background: #ccc;

Kopjes lichtgrijze achtergrond geven.

h2

De kopjes van de drie groepen. Zonder css heb je nu nog steeds 'n in drie groepen verdeelde reeks links, met boven elke groep 'n kopregel.

margin: 0;

De standaardmarges van 'n kopregel zijn hier niet welkom.

font-size: 1em;

Even groot als de normale tekst maken. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

li a

De links binnen 'n ingang van 'n lijst. Dit zijn alle links in de drie lijsten, want die voldoen allemaal aan deze selector. Sommige ingangen hebben twee links, maar dat maakt niet uit, dit geldt voor álle links.

margin: 0 5px;

Omdat voor onder en links geen waarden zijn ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 5px 0 5px in de volgorde boven - rechts - onder - links. Boven en onder geen marge, links en rechts 5 px.

Dit geeft een redelijke plaatsing van de links, in combinatie met de padding-left in de <li>'s. Omdat links én rechts een marge staat, geeft dit gelijk ook wat extra afstand tussen de links in de ingangen waar twee links achter elkaar staan.

text-decoration: none;

De gebruikelijke onderstreping van 'n link vind ik hier niet mooi.

color: maroon;

Ik heb 't moeten opzoeken, maar dit is in 't Nederlands donkerrood. De tekst van de links wordt dus donkerrood, in normale niet-bezochte staat.

li a:visited

'n Bezochte link uit 'n ingang in 'n lijst.

color: #f44;

Kleur iets lichter rood maken.

li a:first-child

De links uit de ingangen in 'n lijst, maar alleen maar de eerste link in elke ingang. Dit zijn alle links, behalve de links die bestaan uit het woordje 'pop'.

color: black;

Maak de kleur van de tekst in deze links zwart. Nu zijn dus alle links zwart, behalve degene die bestaan uit de tekst 'pop'. Daardoor heb ik nu 'n duidelijk onderscheid tussen deze twee soorten links. In Internet Explorer 6 werkt :first-child niet, dus daar hebben alle links gewoon dezelfde kleur.

li a:first-child:visited

'n Bezochte link uit 'n ingang in 'n lijst, maar alleen maar als deze de eerste link binnen die lijst-ingang is.

color: #666;

Grijs maken.

li a:hover, li a:focus, li a:active, li a:first-child:hover, li a:first-child:focus, li a:first-child:active

Als ik over een link uit 'n lijst hover, of als deze focus heeft. De tweede serie selectors met :first-child is nodig, omdat de selector hier gelijk boven anders altijd 'wint' van deze regel. Daar staan namelijk twee pseudo-classes (:first-child en :visited), en dat heeft meer specificiteit dan deze selector.

text-decoration: underline;

Link onderstrepen.

background: black;

Achtergrond zwart maken.

color: white;

Kleur van de tekst wit maken.

li a span.b

De spans met class="b" binnen 'n link, die weer binnen 'n ingang in 'n lijst ligt. Dit zijn de spans waarin de vergrotingen staan, die bij hoveren over 'n link tevoorschijn komen.

'n Aantal instellingen is voor al deze spans hetzelfde, die kan ik hier in één keer opgeven.

display: none;

Verberg de span. Normaal genomen ben ik hier niet zo dol op, omdat niet alle spraakbrowsers en dergelijke dit schijnen te lezen. Maar in dit geval staat er alleen een achtergrond-afbeelding in deze span. En zonder css werkt dit toch al niet, ook al omdat je moet positioneren. (Zonder css zie je wel de afbeelding met drie groepen links.)

border: red solid 2px;

Dikke rode rand, zodat de vergroting te onderscheiden is van de afbeelding. Mooi? Nee, brrr. Maar 't is wel duidelijk. Vooral de kleine vergrotingen zijn nu makkelijker te vinden.

Omdat de span verborgen is, zul je normaal genomen die rand niet zien.

li a:hover span.b, li a:focus span.b, li a:active span.b

Als ik over 'n link binnen 'n ingang in 'n lijst hover, of als die link focus heeft, doe dan iets met de spans met class="b" die daarbinnen liggen.

Ook bij hoveren en focus zijn 'n aantal instellingen weer hetzelfde voor al deze spans, dus die zet ik hier neer.

display: block;

De span zichtbaar maken.

position: absolute;

Om ze precies op de goede plaats neer te kunnen zetten. Het eerste ouder-element met een positie is div#links, dus er wordt gepositioneerd ten opzichte van die div. En omdat div#links zelf weer is gepositioneerd ten opzichte van div#wrapper, wordt indirect ten opzichte van de wrapper-div gepositioneerd.

De afbeelding is ook gepositioneerd ten opzichte van de wrapper-div, dus in feite staat alles (indirect) gepositioneerd ten opzichte van elkaar.

li a#a-1:hover span.b, li a#a-1:focus span.b, li a#a-1:active span.b

Als ik over de link met id="a-1" die binnen 'n lijst-ingang ligt hover, doe dan iets met de daarin liggende spans met class="b". Doe dat ook als de link focus heeft.

Dit zijn de spans waarin, in de vorm van een achtergrond-afbeelding, de vergrote uitsnedes van de afbeelding worden getoond.

Deze link, en dus de span daarbinnen, hoort bij nummer 1.

left: -25px; top: 350px;

Door middel van uitproberen bleek dit de juiste plaats te zijn.

width: 17px; height: 60px;

De afbeelding wordt als achtergrond-afbeelding neergezet. Een achtergrond-afbeelding heeft nooit 'n afmeting, hij vult alleen maar het element waar hij in staat. Daarom moet ik dat element, hier de span, de juiste maten geven, zodat de achtergrond-afbeelding in z'n geheel wordt getoond.

background: url(054-pics/taakbalk.jpg) right;

Deze achtergrond-afbeelding bestaat uit de volledige taakbalk van mijn computer, 1280 px breed. Van deze taakbalk worden, op allerlei plaatsen op de afbeelding, veel stukjes getoond bij hoveren over 'n link of als de link focus heeft. Om te voorkomen dat er 'n groot aantal kleine afbeeldingen moet worden geladen, laad ik in één keer 'n afbeelding met de hele taakbalk, waarvan ik dan vervolgens alleen het juiste stukje toon. Dit spaart 'n hele serie verzoeken aan de server uit.

Deze eerste vergroting, nummer 1, is anders dan de andere, omdat er twee sluitknoppen worden getoond, eentje links en eentje rechts. Dit is ook de enige <li> die twee spans van de class "b" heeft. De opdrachten hier gelden voor beide spans met class="b" binnen deze link. De sluitknoppen zijn even groot, dus ik kan hier onder andere de maten voor beide sluitknoppen opgeven. De afwijkende instellingen geef ik hieronder op met behulp van :first-child, die gelden dan alleen voor de eerste span.

Omdat beide sluitknoppen op taakbalk.jpg van 1280 px breed staan, eentje helemaal links en eentje helemaal rechts, moet ik hier ook right opgeven, zodat het uiterste rechterstukje van de taakbalk, waar de rechter-sluitknop staat, wordt getoond.

li a#a-1:hover span.b:first-child, li a#a-1:focus span.b:first-child, li a#a-1:active span.b:first-child

Als ik over de link met id="a-1" die binnen 'n lijst-ingang ligt hover, doe dan iets met de daarin liggende spans met class="b", maar alleen als dat de eerste span binnen de link is. Doe dat ook als de link focus heeft.

Deze situatie doet zich alleen bij nummer 1 voor, omdat daar twee sluitknoppen moeten worden getoond. De instellingen die hetzelfde zijn voor de rechter- en de linker-sluitknop heb ik gelijk hierboven al opgegeven. Hier komen alleen de afwijkende instellingen voor de linker-sluitknop. Die horen bij de eerste span, want alleen die voldoet aan de voorwaarde :first-child.

Omdat Internet Explorer 6 :first-child niet kent, toont deze maar één sluitknop. Dat kun je allemaal opvangen door classes te gebruiken of zoiets, maar ik vind dat mensen die Internet Explorer 6 gebruiken onderhand maar 'ns moeten updaten.

left: -505px;

De hoogte is hierboven bij de rechterknop al opgegeven, alleen de breedte moet worden veranderd, zodat de linker-sluitknop links komt te staan.

background: url(054-pics/taakbalk.jpg);

De linker-sluitknop staat links op taakbalk.jpg van 1280 px breed. Nu kan ik de taakbalk dus gewoon neerzetten als achtergrond-afbeelding, zonder right of zo, want ik moet gewoon de linkerkant zien. Ik moet de hele opdracht herhalen, als ik alleen left in zou vullen, zie je helemaal niets.

li a#a-2:hover span.b, li a#a-2:focus span.b, li a#a-2:active span.b

Als ik over de link met id="a-2" die binnen 'n lijst-ingang ligt hover, doe dan iets met de daarin liggende spans met class="b". Doe dat ook als de link focus heeft.

Deze link, en dus de span daarbinnen, hoort bij het zwarte nummer 2.

width: 54px; height: 60px;

De breedte van de achtergrond-afbeelding die moet worden getoond is 54 px, de hoogte 60 px. Omdat 'n achtergrond-afbeelding geen eigen hoogte en breedte heeft, maar alleen het element opvult waar hij in staat, moet ik dat element de juiste hoogte en breedte geven.

left: -493px; top: 300px;

Door middel van uitproberen bleek dit de juiste plaats te zijn.

background: url(054-pics/taakbalk.jpg) -16px;

Ook deze afbeelding staat weer op taakbalk.jpg van 1280 px breed, maar iets meer naar rechts dan de sluitknop van nummer 1. Dus zet ik taakbalk.jpg 16 px naar links, dan staat de achtergrond-afbeelding (dat is hier de witte K op blauwe achtergrond) precies goed.

li a#a-2p:hover span.b, li a#a-2p:focus span.b, li a#a-2p:active span.b

Als ik over de link met id="a-2p" die binnen 'n lijst-ingang ligt hover, doe dan iets met de daarin liggende spans met class="b". Doe dat ook als de link focus heeft.

Deze link, en dus de daarbinnen liggende span, hoort bij het bruine nummer 2.

De links die 'n id hebben die op 'n 'p' eindigt, horen bij de pop-ups en dergelijke. Dat zijn extra schermpjes die bij 'n bepaald onderdeel van de afbeelding horen, zoals in dit geval het menu dat achter de witte K op blauwe achtergrond zit. Deze links hebben als tekst allemaal alleen 'pop'. Ze werken precies hetzelfde als de links zonder 'p', maar hebben 'n andere achtergrond-afbeelding, en dus 'n andere positie, hoogte en breedte.

width: 176px; height: 450px;

Breedte en hoogte van het menu wat getoond moet worden. Een achtergrond-afbeelding heeft van zichzelf geen breedte en hoogte, hij vult alleen de achtergrond van het element waar hij in staat, dus ik moet dat element de juiste breedte en hoogte geven.

left: -425px; top: 5px;

Via uitproberen blijkt dit de goede plaats te zijn.

background: url(054-pics/t-menu-kde-pop.jpg)

Dit is de afbeelding met het menu dat bij de witte K op de blauwe achtergrond hoort. Het opent (op mijn computer dus) bij klikken op de witte K, of via 'n sneltoets.

li a#a-3:hover span.b, li a#a-3:focus span.b, li a#a-3:active span.b {width: 420px; height: 60px; left: -450px; top: 300px; background: url(054-pics/taakbalk.jpg) -70px;}

tot en met

li a#a-36:hover span.b, li a#a-36:focus span.b, li a#a-36:active span.b {width: 21px; height: 29px; left: -47px; top: 270px; background: url(054-pics/statusbalk.jpg) -1253px;}

Deze selectors werken precies hetzelfde als die van de nummers 1, 1p en 2, die hierboven worden uitgelegd. Alleen de id's verschillen (a-3 tot en met a-36). Links die bij 'n pop-up of zo horen hebben 'n 'p' achter het nummer.

Ook de positie verschilt, omdat de vergrotingen op de juiste plaats moeten worden neergezet. Hoogte en breedte verschillen ook, want die worden aangepast aan de grootte van de achtergrond-afbeelding.

Veel van de kleinere achtergrond-afbeeldingen staan, net als de voorbeelden hierboven, met meerdere op 'n grotere afbeelding. Bij die grotere afbeeldingen staat ook 'n achtergrond-positie, die afhankelijk is van het deel dat moet worden weergegeven.

li a span.h

De spans met class="h" binnen 'n link, die weer binnen 'n ingang in 'n lijst staat. Dit zijn de spans die zorgen voor de voor hoveren gevoelige plekjes boven de getallen op de afbeelding. 'n Aantal instellingen is voor alle spans van deze class hetzelfde, dus die kan ik hier in één keer opgeven.

position: absolute;

Om ze precies op de goede plaats neer te kunnen zetten. Omdat de getallen vrij klein zijn, luistert dit vrij nauw. Het eerste ouder-element met een positie is div#links, dus er wordt gepositioneerd ten opzichte van die div. En omdat div#links zelf weer is gepositioneerd ten opzichte van div#wrapper, wordt indirect ten opzichte van de wrapper-div gepositioneerd.

De afbeelding is ook gepositioneerd ten opzichte van de wrapper-div, dus in feite staat alles (indirect) gepositioneerd ten opzichte van elkaar. Nu kan ik de voor hoveren gevoelige plekjes exact boven de getallen op de afbeelding zetten.

Een span is 'n inline-element. Maar door 'n inline-element absoluut te positioneren, verandert dit in een blok-element, zodat ik attributen als breedte en hoogte kan gebruiken.

width: 12px; height: 12px;

Dit komt ongeveer overeen met de grootte van de cirkels rondom de getallen. Die zijn weliswaar rond, maar omdat ze zo klein zijn maakt 't geen fluit uit dat de voor hoveren gevoelige plekjes vierkant zijn.

background: url(054-pics/space-1x1.gif);

Meestal levert Opera geen problemen op, maar in dit voorbeeld is dat bepaald anders. Opera heeft dit nodig, omdat het hoveren boven deze span anders niet werkt. In feite is het al voldoende als ik background: url(); neerzet, maar, ik weet niet, dat slaat helemaal nergens op, en Opera heeft 't al zo moeilijk... Dus doe ik 't maar netjes volledig met 'n doorzichtig plaatje. De andere browsers hebben er geen last van, dus...

li a#a-1 span.h

De span met class="h" binnen 'n link met id="a-1", die weer binnen 'n ingang in 'n lijst ligt. Dit is de link die bij nummer 1 hoort.

De instellingen die voor alle spans met class="h" hetzelfde zijn, zijn hier gelijk boven al opgeven. Hier staan alleen maar de instellingen die voor elke span anders zijn.

left: -257px; top: 448px;

Er wordt gepositioneerd ten opzichte van div#links, het eerste ouder-element met een positie. Door uitproberen blijken dit de juiste waarden te zijn om nummer 1 te bedekken met deze span, waardoor dit getal gevoelig wordt voor hoveren. En omdat deze span onderdeel is van 'n link, werkt hoveren over dit kleine vierkantje precies hetzelfde als hoveren over de 'grote' link met de tekst. Bij hoveren over dit blokje veranderen zelfs kleur van tekst en achtergrond van de bijbehorende link, zodat je ook makkelijk kunt zien bij welke link het betreffende getal hoort. (Die verkleuring zie je alleen maar als de tekst in de link zichtbaar is, als hij onder het zichtbare venstertje staat zie je het helaas niet.)

li a#a-2 span.h {left: -465px; top: 418px;}

tot en met

li a#a-36 span.h {left: -46px; top: 347px;}

Alle andere spans met 'n class="h" zijn precies hetzelfde, alleen is de positie anders, en de id. Het volgnummer van de id correspondeert met het nummer op de afbeelding. Dat is bij de bruine nummers ook zo, maar daar staat nog 'n 'p' achter het nummer (van pop-up).

div#schermpje

De div met id="schermpje". Dit is de div waarbinnen het vraagteken en het bijbehorende hulpschermpje staan.

position: absolute;

Om het op de goede plaats neer te kunnen zetten. De eerste ouder met 'n positie is div#wrapper, dus er wordt gepositioneerd ten opzichte van die div. Omdat de afbeelding en div#links (waar de links in staan) ook worden gepositioneerd ten opzichte van div#wrapper, worden ze in feite ook ten opzichte van elkaar gepositioneerd en kan ik het vraagteken precies tussen afbeelding en div#links wurmen.

right: 285px;

285 px vanaf rechts blijkt de goede plaats te zijn.

div#schermpje a

De links binnen de div met id="schermpje". Dat is er hier maar eentje. Binnen die link staan het grote vraagteken en het daarbij horende hulpschermpje.

text-decoration: none;

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

color: black;

En de gebruikelijke kleuren van 'n link wil ik ook niet. Gewoon 'n zwart vraagteken.

span#vraagteken

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

font-size: 3em;

Vraagteken lekker groot maken, zodat het goed opvalt. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen. Dit vraagteken is weliswaar al heel groot, maar nu blijven de verhoudingen ten opzichte van de andere tekst min of meer het zelfde als de lettergrootte wordt veranderd.

div#schermpje a:hover

Als ik over de link binnen de div met id="schermpje" hover. Dat is de link met het vraagteken.

cursor: default;

Normaal genomen verandert de cursor boven 'n link in 'n handje. Dat wil ik hier niet, want dit is geen gewone link. De cursor moet gewoon hetzelfde blijven.

a#link span.hulp

De span met id="hulp" die binnen de link met id="link" staat.

Binnen deze span staat de tekst van het hulpschermpje. Omdat deze tekst binnen 'n span staat ('n inline-element), mag ik geen blok-elementen zoals 'n <p> gebruiken voor nieuwe regels. Daarom moet ik in de html nieuwe regels beginnen met 'n <br />>.

Ik gebruik 'n class en geen id, omdat er voor Internet Explorer 6 'n andere tekst in 'n andere span met 'n class="hulp" wordt gebruik. En 'n id mag je maar één keer gebruiken.

position: absolute;

Om de span en dus de tekst van het hulpschermpje op de goede plaats neer te kunnen zetten. De eerste ouder met 'n positie is div#schermpje, dus er wordt gepositioneerd ten opzichte van die div.

'n Span is van zichzelf 'n inline-element. Door hem absoluut te positioneren, verandert hij in 'n blok-element en kan ik attributen als breedte gebruiken.

left: -8000px;

Ver links buiten het scherm parkeren, zodat ik het niet zie. Ik kan de hele opmaak verder hier al opgeven, om de tekst zichtbaar te maken hoef ik 'm straks alleen maar binnen het scherm te zetten.

top: 5px;

Iets onder de bovenkant van het venster plaatsen.

width: 350px;

Breedte. Ik geef geen hoogte op. Als ik de lettergrootte nu verander, verandert alleen de hoogte van het hulpschermpje, niet de breedte. Daardoor kan ik de letters behoorlijk vergroten voordat de tekst buiten div#wrapper (die overflow op hidden heeft staan) dreigt te vallen.

border: black solid 2px;

Zwart randje rondom het hele hulpscherm.

padding: 3px;

Kleine afstand tussen rand en tekst.

background: #eee;

Heel lichtgrijze achtergrond.

a#link:hover span.hulp

Als ik over de link met id="link" hover, doe dan het volgende met de daarin liggende span met class="hulp". Binnen deze span staat de tekst van het hulpschermpje.

left: auto; right: 0;

Het eerste ouder-element met een position is div#schermpje, dus er wordt gepositioneerd ten opzichte van die div. Omdat die div#schermpje zelf vanaf rechts is neergezet, is het het simpelste om deze span ook vanaf rechts neer te zetten, dan blijft hij altijd precies gelijk met de rechterkant van div#schermpje staan, ongeacht lettergrootte en zo.

Ik moet dan wel de eerder opgegeven left uitschakelen door deze op auto te zetten. Anders is het vergelijkbaar met twee mensen die elk aan één arm van iemand lopen te rukken: dat loopt niet goed af. In dit geval zou left winnen en zie je het hele schermpje niet, omdat het buiten het scherm blijft staan.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#links {right: 5px;} h2 {margin-left: -5px;} li a {color: black;} li a:hover {color: white;} li a:visited {color: #a55;} .hide-ie-6 {display: none;} </style> <![endif]-->

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

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

Dit stukje geldt voor Internet Explorer 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.

div#links

De div met id="links". Dit is de div waarin de lijsten met links staan.

right: 5px;

Om een of andere reden zet Internet Explorer 6 deze hele div 5 px te veel naar links, waardoor de voor hoveren gevoelige punten niet boven de bijbehorende nummers staan. Dit corrigeert dat. Wat precies de oorzaak is, heb ik verder niet uitgezocht. Dit werkt, en ik geloof 't onderhand wel met deze flutbrowser.

h2

De kopjes bovenaan elke lijst met links.

margin-left: -5px; padding-left: 5px;

Dit lijkt op het eerste oog wat vreemd. Zet de kopjes 5 px terug naar links met 'n negatieve marge, en dan weer 5 px naar rechts met 'n padding. Dit heeft met de achtergrondkleur van de kopjes te maken.

Elke <h2> staat binnen 'n <li>. Die <li>'s hebben in de algemene css links 'n padding van 5px gekregen, dus er is 'n afstand van 5 px tussen de linkerkant van de <li> en het begin van de <h2>.

In de algemene css krijgt elke <li> die het eerste element is een achtergrondkleur met behulp van :first-child. Internet Explorer 6 kent dat niet. Als ik nu alleen de <h2> 'n achtergrondkleur geef, heb ik links 'n kier van 5 px zonder achtergrondkleur.

Die kier los ik op met de negatieve marge: ik zet de <h2> precies de afstand van de in de algemene css gegeven padding terug naar links.

Maar dan heb ik helemaal geen afstand tussen het kopje en de rand rondom de links, en dat is lelijk. Dus zet ik de inhoud van de kopregel, de tekst, weer 5 px naar rechts met de padding.

background: #ccc;

Achtergrondkleur. In de algemene css gebruik ik daar :first-child voor, maar dat kent Internet Explorer 6 niet.

li a

Alle links binnen een lijst-ingang. Dat zijn de rijen met links aan de rechterkant.

color: black;

Tekst van deze links zwart maken.

In de algemene css worden deze links bruin gemaakt. Daarna worden alle links, behalve die met het woord 'pop', weer zwart gemaakt met behulp van :first-child. Omdat Internet Explorer 6 dat niet kent, zouden alle links bruin blijven. Dan kun je ze beter zwart maken. (Dit lijkt trouwens wel 'n beetje op 'n onfrisse erfeniskwestie of zoiets: iemand zwart maken met behulp van 't eerste kind...)

Je kunt Internet Explorer 6 er net zo laten uitzien als alle andere browsers met behulp van 'n hele serie classes en zo, maar ik vind 't zo goed genoeg voor deze browser.

li a:hover

Als ik over 'n link in 'n lijst-ingang hover. Dat zijn de rijen met links aan de rechterkant.

color: white;

Tekstkleur wit maken. Omdat ik hierboven de tekstkleur van de links voor Internet Explorer 6 zwart heb gemaakt, werkt deze regel uit de algemene css niet meer en moet ik deze dus hier herhalen.

De regel werkt niet meer omdat de li a hier gelijk boven evenveel gewicht heeft als de regel uit de algemene css. En omdat de regel hier gelijk boven na de regel uit de algemene css komt, wint hij van de regel uit de algemene css, en zou de tekst dus altijd zwart blijven, ook bij hoveren. Wat niet handig leest op 'n zwarte achtergrond.

li a:visited

Als 'n link in 'n lijst-ingang is bezocht. Dat zijn de rijen met links aan de rechterkant.

color: #a55;

Bruin maken. In de algemene css regel ik met behulp van :first-child dat de 'gewone' links 'n andere kleur krijgen dan die met 'pop'. Dat werkt dus niet in Internet Explorer 6, dus hier krijgen alle links gewoon dezelfde kleur.

Ook dit zou weer met 'n heel kastensysteem van classes op zijn te lossen. Ik wens de enthousiaste knutselaar veel plezier met het ontwerpen daarvan.

.hide-ie-6

Alle elementen met class="hide-ie-6". Dat is hier alleen maar de tekst in het hulpschermpje.

display: none;

Omdat er wat afwijkingen in de werking van dit voorbeeld zitten ten opzichte van andere browsers, krijgt Internet Explorer 6 'n eigen hulpschermpje. Dat geeft gelijk de mogelijkheid om te suggereren dit in verregaande staat van ontbinding verkerende lijk de deur uit te gooien en in plaats daarvan 'n mooie, lieve, vrolijke, goedaardige nieuwe huis-browser aan te schaffen.

Met deze regel voorkom ik dat het algemene hulpscherm wordt getoond in Internet Explorer 6.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> li a {float: right;} li a:first-child {float: left;} </style> <![endif]-->

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

In Internet Explorer 7 deed zich 'n lastige bug voor. Althans: lastig op te lossen. De zoomfunctie in Internet Explorer 7 is werkelijk om te huilen, en dat speelde hier weer 'ns op.

Zowel bij in- als uitzoomen veranderde wel de breedte van de spans binnen de links, maar de grootte van de letters veranderde niet. Hoe verzin je 't. Werkelijk van alles uitgeprobeerd, maar niets werkte (behalve uiteindelijk de oplossing hieronder natuurlijk).

Dit maakte de links onleesbaar bij zoomen, omdat bij hoveren over 'n link of als de link focus had regelmatig 'n deel van de witte letters op 'n witte achtergrond stond. En dat is wel 'n leuk geheimschrift-spelletje, maar als je echt wilt lezen wordt je er wat depressief van. De tijd dat ik geheimschriften leuk vond, ligt ver achter me. (Met vriendjes zelf onzichtbare inkt in mekaar fabrieken, terloops het halve meubilair besmeuren met de in mijn kinderogen redelijk onzichtbare inkt, die helaas voor de ogen van mijn moeder niet zo heel erg onzichtbaar bleek te zijn...)

Ik neem aan dat dit 'n heuse bug is, want zelfs voor Internet Explorer is dit vreemd gedrag. Uiteindelijk bleek Internet Explorer 7 ook float volkomen foutief uit te voeren. In plaats van netjes de ruimte zoveel mogelijk op te vullen, zoals alle andere browsers wel doen, zet Internet Explorer de floats onder elkaar. Met behulp van deze bug kon ik uiteindelijk de andere bug oplossen.

'n Soort biologische landbouw: met het ene schadelijke insect het andere schadelijke insect bestrijden. Bij deze vraag ik patent aan op de volgende reclameleus: 'Internet Explorer 7, de enige browser met wie u ecologisch verantwoord bugs kunt bestrijden.'

li a

Alle links binnen 'n lijst-ingang. Dat zijn de rijen met links aan de rechterkant.

float: right;

Zo ver mogelijk naar rechts zetten. Dit verhelpt het boven beschreven probleem.

li a:first-child

Alle links binnen 'n lijst-ingang, maar alleen maar als het de eerste link is. Dit zijn de 'gewone' links, niet die met 'pop'.

float: left;

Hierboven zijn alle links naar rechts gefloat, waardoor ze helemaal tegen elkaar aan staan. Als ik nu de voorste links weer naar links float, heb ik 'n afstand tussen de 'gewone' links en die met 'pop'. En 't gaat ook goed bij vergroten/verkleinen van de letters.

De links zien er nu anders uit dan in andere browsers, maar dat is niet zo'n probleem, lijkt me. Eventueel zou je, met enige moeite, de andere browsers er net zo uit kunnen laten zien als Internet Explorer 7, maar ik vind 't er allebei wel netjes uitzien, dus laat ik 't zo.

Html speciaal voor Internet Explorer 6

<!--[if IE 6]> <span class="hulp">Werk je nog met (... tekst van hulpscherm voor Internet Explorer 6 ...) andere kleur.</span> <![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.

Dit is de tekst van het hulpschermpje voor Internet Explorer 6. Omdat dit alleen door Internet Explorer 6 wordt gelezen, en de tekst van het algemene hulpscherm wordt verborgen, heb ik nu 'n aangepaste tekst, die alleen in Internet Explorer 6 wordt getoond.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

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

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

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

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 13 december 2011.

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

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

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

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

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

Dit voorbeeld is niet getest op geschiktheid voor mobiele apparaten (hier worden geen laptop/notebook/netbook en dergelijke mee bedoeld, want die gedragen zich als een gewone desktopcomputer). Er wordt in veel voorbeelden css en/of html gebruikt, waar niet elk mobiel apparaat mee uit de voeten zal kunnen. En lang niet alles is geschikt voor schermen met een breedte van minder dan 800 px.

Dingen die problemen zouden kunnen opleveren, zijn onder andere een te grote breedte, het gebruik van (te veel) afbeeldingen en/of css en html die niet (volledig) wordt ondersteund, zoals :hover, float en position.

Onder Opmerkingen staat mogelijk nog wat meer over de geschiktheid van dit voorbeeld voor mobiele apparaten.

(Terzijde: de site zelf is zeker niet geschikt voor kleine mobieltjes. Dat gaat ook niet veranderen. Ik kan me namelijk niet voorstellen dat iemand zo masochistisch is 'n uitleg van tientallen schermen op 'n klein mobieltje te gaan lezen. Voor de site zelf is een minimale breedte van 800 px vereist.)

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.

8 februari 2009:

Nieuw opgenomen.

31 maart 2009:

Tekst aangepast aan de nieuw verschenen Internet Explorer 8. De code is hetzelfde gebleven.

3 januari 2011:

Voor Opera stuk tekst toegevoegd bij Bekende problemen.

13 december 2011:

Bekende problemen

Internet Explorer 6

De hieronder staande (kleine) problemen kunnen allemaal worden verholpen, maar dat mag de liefhebber doen. Ik vind 't goed genoeg zo voor deze verouderde browser.

Hele lage afbeeldingen, zoals de horizontale scrollbalk, worden drie keer weergegeven. Om een of andere reden vergroot Internet Explorer 6 de hoogte bij dit soort constructies altijd tot 'n bepaald minimum, dus de achtergrond-afbeelding wordt herhaald. Als je no-repeat toevoegt, zit er 'n enorme opening tussen afbeelding en rode kader, dus dat schiet ook niet op.

Dit is op te lossen door iets van margin te gebruiken in plaats van hoogte of zo, maar ik vind, samen met 'n snel groeiende groep sitemakers, dat mensen gewoon maar hun browser moeten updaten als ze alle toeters en bellen willen.

Bij de link met nummer 1 horen twee sluitknoppen te verschijnen. Er verschijnt er bij Internet Explorer 6 maar eentje. Ook dit is op te lossen met enig geknutsel, succes!

De links met 'pop' zijn zwart, net als de 'gewone' links. In alle andere browsers zijn ze bruin. Door in plaats van :first-child 'n class te gebruiken bij de links, kun je dit oplossen, als je dat wilt.

Door die spontane minimum-hoogte van Internet Explorer 6 zijn de voor hoveren gevoelige plekjes onder de getallen 'n paar px te hoog. Maar dat valt eigenlijk nauwelijks op.

Internet Explorer 7

Bij alle browsers staat de link met 'pop' vrij dicht achter de 'gewone' link. Bij Internet Explorer 7 staat deze helemaal rechts. Eigenlijk geen probleem, maar 'n iets andere lay-out. De reden staat bij Speciaal voor Internet Explorer 7.

Opera

Safari en Firefox

Als de letters meer dan 185% vergroot worden, valt het laatste woord van 'Firefox draaiend op Kubuntu' weg. Als je alleen zoomt, gaat het wel goed. Omdat alleen Safari en Firefox de tekst zo sterk kunnen vergroten, speelt dit probleem alleen in deze browsers.