Uitleg van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen

Dit voorbeeld is verouderd

Dit voorbeeld werkt helemaal niet of niet goed op touchscreens. De in dit voorbeeld gebruikte technieken zijn volstrekt ongeschikt voor touchscreens. Voor touchscreens heb je - om dit voorbeeld werkend te krijgen - nauwelijks css nodig, maar wel veel JavaScript. En daar is deze site niet voor bedoeld.

Normaal genomen wordt een voorbeeld vroeger of later geüpdatet. In dit geval gebeurt dat niet, omdat een update nog weinig met css te maken zou hebben. Omdat dit voorbeeld niet meer wordt bijgewerkt, zijn ook grote delen van de meer algemene teksten over zoekmachines, toegankelijkheid, en dergelijke (zwaar) verouderd.

In de uitleg wordt nog over code voor oudere versies van Internet Explorer gesproken, maar die code zelf is verwijderd. Het is echter wat zonde van de tijd om elke verwijzing naar die mensenhatende browser uit de tekst te verwijderen, dus her en der zijn die blijven staan.

Omdat het, toen het werd gemaakt, best wel leuk werkte, blijft het gewoon op de site staan. Maar de gebruikte techniek is dus echt volstrekt ongeschikt voor touchscreens, waarop het voorbeeld dan ook niet (goed) zal werken.

Los van de verouderde code kunnen ook de overige teksten in deze uitleg, zoals die over toegankelijkheid, (sterk) verouderd zijn.

Korte omschrijving

Als je met de cursor vanaf de buitenkant naar binnen beweegt, sleep je een nieuwe afbeelding over de oude. Welke nieuwe afbeelding is afhankelijk van de richting, waarvan je komt. De vervanging is tijdelijk, zodra de cursor de afbeelding verlaat, staat de originele er weer.

Opmerkingen

De foto's zijn gemaakt in het Vondelpark in Amsterdam op Koninginnedag 2009. Als je jezelf herkent en de originele foto wilt hebben, stuur dan even 'n mailtje naar info@css-voorbeelden.nl.

De veranderde afbeelding verdwijnt weer als niet meer over de afbeelding wordt gehoverd, het gaat dus niet om een blijvende verandering.

Als je bij div#wrapper de overflow: hidden; even uitzet, kun je beter zien wat er gebeurt als je dingen verandert.

Zonder css wordt alleen de eerste afbeelding getoond, alsof er geen tweede is. Daarom moet je geen belangrijke informatie op deze manier geven. Als je dat toch doet, zorg dan ook voor 'n alternatieve manier, bijvoorbeeld gewone links die je buiten het scherm positioneert, en die dus alleen zonder css zichtbaar worden.

De vervangende afbeeldingen worden pas geladen als ze nodig zijn.

Opmerking 3 oktober 2011: deze tekst is inmiddels alweer 'n tijdje oud. Ongetwijfeld is een aantal van de in de tekst genoemde problemen inmiddels opgelost. Ik heb dat verder niet meer gecontroleerd, omdat dat veel tijd zou kosten. En deze constructie is wel leuk en aardig en zo, maar inmiddels biedt css3 veel en veel meer mogelijkheden op dit gebied, dus ik kan m'n tijd wel beter gebruiken.

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

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Visual Studio Code, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

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

Achterliggend idee

De hele constructie staat in een wrapper-div met position, zodat daarop gepositioneerd kan worden. Deze wrapper-div heeft 40 px meer hoogte en breedte dan de afbeeldingen, zodat er aan alle kanten 20 px ruimte is voor 'n zone voor 'n speciaal doel.

Binnen deze wrapper-div komen vier absoluut gepositioneerde divs, eentje voor elke vervangende afbeelding, die absoluut gepositioneerd worden.

Onder deze vier divs komt een gewone afbeelding. Dat is van belang voor mensen die geen css gebruiken: die zien 'n gewone normale afbeelding. Vervangen kan uiteraard niet, want daarvoor is css nodig.

Omdat de vier divs absoluut gepositioneerd zijn, komt de afbeelding ook gewoon bovenin de wrapper-div te staan. En omdat de afbeelding als laatste in de code staat, komt deze dus óver de vier divs te staan, en schermt daarmee deze af tegen hoveren. Behalve 'n zone aan alle kanten van 20 px: elk van de vier divs heeft aan 'n eigen kant 'n zone waar alleen die div reageert op hoveren. Voor dit afschermen tegen hoveren moet de afbeelding trouwens ook nog absoluut gepositioneerd worden, anders werkt het niet goed.

Ik beschrijf hier eerst de afbeelding die je vanaf de bovenkant kunt binnenslepen.

Deze staat dus binnen absoluut gepositioneerde div. In deze div zit alles wat nodig is om de nieuwe afbeelding binnen te slepen.

In de div staat 'n enorme serie lege <span>'s, waar via css van alles mee wordt gedaan. De hoogte van de spans is 5 px. Je kunt ook 'n grotere hoogte nemen, dan heb je minder code nodig, maar bij 'n te grote hoogte wordt de beweging schokkerig.

De vervangende afbeelding is een background-image. Die heeft van zichzelf geen hoogte en breedte, maar vult alleen het element op waar hij in staat. Dus de spans moeten de breedte van de afbeelding krijgen. Die krijgen ze bij hoveren, maar zonder hoveren is de hoogte 5 px. Omdat ze als blok-element worden weergegeven, beginnen ze automatisch op 'n nieuwe regel. Dit levert dus 'regels' van 5 px hoogte op. De spans moeten de hele originele afbeelding bedekken, dat is 'n kwestie van tellen en proberen.

En dan beginnen de problemen: Firefox en Safari gaan overal mee akkoord, maar Opera en Internet Explorer 7 gedragen zich als 'n veganist versus 'n carnivoor. Wat de een het einde vindt, leidt bij de ander tot het virtuele equivalent van 'n woede-koliek. Bij de beschrijving van de code zal ik zoveel mogelijk erbij zetten waarom iets zo is gedaan, hier alleen het belangrijkste.

Als ik de spans 'n hoogte en breedte geef, werkt 't niet in Opera en Internet Explorer 7, want die constateren hoveren dan niet. Als ik 'n doorzichtig plaatje boven de spans zet, werkt 't prima in Opera, maar Internet Explorer wordt dan ongelooflijk traag. Zelfde verhaal voor 'n background-image in de spans. Opera en Internet Explorer 7 blijken uiteindelijk beide gelukkig met 'n span die 0 px hoog is (anders maakt Internet Explorer 7 'm veel te hoog), en 'n doorzichtige border. Door die border reageren de spans op hoveren, ook al zijn ze verder leeg.

Tot nu toe is alleen nog maar 't constateren van de hover bereikt. Er moet natuurlijk ook nog echt iets gebeuren als er over de spans wordt gehoverd.

Als er over 'n span wordt gehoverd krijgt die 'n background-image: het nieuwe plaatje. De span krijgt de hoogte van het plaatje. Maar omdat die spans als blok-elementen worden weergegeven, staan ze onder elkaar. Dus bij elke volgende span begint 't plaatje weer iets lager. En omdat dat plaatje volledig wordt weergegeven, schuift het de eronder liggende spans omlaag. Die worden daardoor onbereikbaar voor de cursor.

Om dat te voorkomen zet ik de spans met 'n negatieve marge terug omhoog. Die negatieve marge is even groot als de hoogte van 't plaatje (met 'n kleine afrondingscorrectie). Dit werkt in alle browsers, position en andere oplossingen werken niet in alle browsers. En omdat de spans onder elkaar staan met 'n hoogte (eigenlijk 'n border) van 5 px, lijkt de afbeelding mee omlaag te schuiven met de cursor.

Het plaatje wordt over de volle hoogte zichtbaar en gaat dus boven de oude afbeelding uitsteken. Om dat te hoge deel af te kappen is bij de wrapper-div overflow op hidden gezet.

Omdat de originele afbeelding de bovenste div volledig bedekt, reageert deze (en dus de daarin liggende spans) niet op hoveren. Aan de bovenkant is daarom een padding aangebracht van 20 px. Deze ligt boven de afbeelding en reageert dus wel op hoveren. Zodra hierover gehoverd wordt, krijgt de div met de spans 'n hogere z-index, waardoor deze boven de originele afbeelding komt te liggen en dus reageert op hoveren.

Omdat deze 'gevoelige' zone alleen aan de bovenkant ligt, verschijnt de nieuwe afbeelding alleen maar als de cursor vanaf de bovenkant de originele afbeelding binnengaat.

Zodra de nieuwe afbeelding exact gelijk is met de originele afbeelding en de cursor nog 1 px meer omlaag gaat, verdwijnt de nieuwe afbeelding. In de praktijk blijkt dit nogal sadistisch te zijn: net als je de afbeelding zichtbaar hebt is hij floep, weg. Daarom is onderaan ook 'n zone van 20 px aangebracht waarin de nieuwe afbeelding nog zichtbaar blijft.

Voor de andere drie vervangende afbeeldingen geldt in principe hetzelfde, maar dan steeds vanaf 'n andere kant. In principe. In de praktijk zijn er nogal wat aanpassingen nodig. Deze code moet dus heel goed worden getest in zoveel mogelijk browsers.

De code aanpassen aan je eigen ontwerp

• Als je dit voorbeeld gaat aanpassen voor je eigen site, houd het dan in eerste instantie zo eenvoudig mogelijk. Ga vooral geen details invullen.

• Gebruik vooral geen FrontPage, Publisher of Word (alle drie van Microsoft). Deze programma's maken niet-standaard code die alleen goed te bekijken is in Internet Explorer. In alle andere browsers zie je grotendeels bagger, áls je al iets ziet.

  Publisher en Word zijn niet bedoeld om websites mee te maken. FrontPage is zwaar verouderd en wordt niet meer onderhouden door Microsoft.

  Ook OpenOffice en LibreOffice leveren een uiterst beroerd soort html af. Tekstverwerkers met al hun toeters en bellen zijn gewoon niet geschikt om websites mee te bouwen.

  Je kunt natuurlijk ook een goed gratis programma gebruiken. Links naar dat soort programma's vind je op de pagina met links onder Gereedschap → wysiwyg-editor.

  Maar het allerbeste is om gewoon zelf html, css, enzovoort te leren, omdat zelfs het allerbeste programma het nog steeds zwaar verliest van 'n op de juiste manier met de hand gemaakte pagina.

• Als je in een desktopbrowser met behulp van zoomen het beeld vergroot, heeft dit hetzelfde effect, als wanneer de pagina in een kleiner browservenster wordt getoond. Je kunt hiermee dus kleinere apparaten zoals een tablet of een smartphone simuleren. Maar het blijft natuurlijk wel een simulatie: het is nooit hetzelfde als testen op een écht apparaat. Zo kun je bijvoorbeeld aanrakingen alleen echt testen op een echt touchscreen.

  Inmiddels hebben veel browsers mogelijkheden voor het simuleren van weergave op een kleiner scherm in de ontwikkelgereedschappen ingebouwd. Ook dit blijft een simulatie, maar geeft vaak wel een beter beeld dan zoomen.

• Ik maak zelf het liefst een site in Firefox. Als je 'n site maakt in Firefox, Opera, Safari, Google Chrome of Edge, is er 'n hele grote kans dat hij in alle browsers werkt. Ik geef de voorkeur aan Firefox, omdat het de enige grote browser is die niet bij een bedrijf hoort dat vooral op je centen of je data uit is.

  Google Chrome wordt ook door veel mensen gebruikt, maar ik heb dus wat moeite met hoe Google je hele surfgedrag, je schoenmaat en de kleur van je onderbroek vastlegt. Daarom gebruik ik Google Chrome zelf alleen om in te testen.

• Het allereerste dat je moet invoeren, is het doctype, vóór welke andere code dan ook. Een lay-out met een missend of onvolledig doctype ziet er totaal anders uit dan een lay-out met een geldig doctype. Wát er anders is, verschilt ook nog 'ns tussen de diverse browsers. Als je klaar bent en dan nog 'ns 'n doctype gaat invoeren, weet je vrijwel zeker dat je van voren af aan kunt beginnen met de lay-out.

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

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

• Gebruik een 'strict' doctype of (beter!) het doctype voor html5. Deze zijn bedoeld voor nieuwe sites. Het transitional doctype is bedoeld voor al bestaande sites, niet voor nieuwe.

  Het transitional doctype staat talloze tags toe, die in html5 zijn verboden. Deze tags worden al zo'n tien jaar afgeraden. Het transitional doctype is echt alleen bedoeld om de puinhoop van vroeger, toen niet volgens standaarden werd gewerkt, enigszins te herstellen.

  Het strict doctype staat verouderde tags niet toe. Daardoor kan met 'n strict doctype, of het nu html of xhtml is, probleemloos worden overgestapt naar html5. Met een transitional doctype en het gebruik van afgekeurde tags kun je niet overstappen naar html5. Je moet dan eerst alle verouderde tags verwijderen, wat echt ontzettend veel werk kan zijn.

  Het doctype voor html5 is uiterst simpel: <!DOCTYPE html>. Omdat het doctype voor html5 in alle browsers werkt, zelfs in de gelukkig vrijwel uitgestorven nachtmerrie Internet Explorer 6, is er geen enkele reden dit uiterst simpele doctype niet te gebruiken.

• Als tweede voer je de charset in. Dit vertelt de browser, welke tekenset er gebruikt moet worden, zodat letters met accenten en dergelijke overal goed worden weergegeven. Het beste kun je utf-8 nemen. Als je later van charset verandert, loop je 'n grote kans dat je alle aparte tekens als letters met accenten weer opnieuw moet gaan invoeren. In html5 is het simpele <meta charset="utf-8"> voldoende.
• Test vanaf het allereerste begin in zoveel mogelijk verschillende browsers in 'n aantal resoluties (schermgroottes). Onder het kopje Getest in kun je in deze uitleg vinden, waar dit voorbeeld in is getest. Ook van Internet Explorer kun je meerdere versies naast elkaar draaien. Op de pagina met links staan onder het kopjes Gereedschap → Weergave en dergelijke testen 'n aantal links die daarbij kunnen helpen. De compatibiliteitsweergave in Internet Explorer is niet geschikt om in te testen, omdat deze enigszins verschilt van de weergave in échte browsers.
• Voor alle voorbeelden geldt: breng veranderingen stapsgewijs aan. Als je bijvoorbeeld foto's wilt laten weergeven, begin dan met het alleen veranderen van de namen van de foto's, zodat je eigen foto's worden weergegeven. Maakt niet uit als de maten niet kloppen en de teksten fout zijn. Als dat werkt, ga dan bijvoorbeeld de maten aanpassen. Dan de teksten. En controleer steeds, of alles nog goed werkt.
• Als het om een lay-out of iets dergelijks gaat: zorg eerst dat header, kolommen, footer, menu, en dergelijke staan en bewegen, zoals je wilt. Ga daarna pas details binnen die blokken invullen. In eerste instantie gebruik je dus bijvoorbeeld 'n leeg blok op de plaats, waar uiteindelijk het menu komt te staan.

• Als je begint met allerlei details, is er 'n heel grote kans dat die de werking van de blokken gaan verstoren. Bouw eerst het huis, en ga dan pas de kamers inrichten. Zorg eerst dat de blokken werken, zoals je wilt. Dan zul je het daarna gelijk merken, als 'n toegevoegd detail als tekst of 'n afbeelding iets gaat verstoren. Daarvoor moet je natuurlijk wel regelmatig controleren in verschillende browsers, of alles nog wel goed werkt.

  Je kunt de blokken tijdens het aanpassen opvullen met bijvoorbeeld <br>1<br>2<br>3 enzovoort, tot ze de juiste hoogte hebben. Het is handig om aan het einde even iets toe te voegen als 'laatste', zodat je zeker weet dat er niet ongemerkt drie regels onderaan naar 't virtuele walhalla zijn verhuisd.

  Om de breedte te vullen, kun je het best 'n kort woord als 'huis' duizend keer of zo herhalen. Ook hier is het handig om aan 't eind (en hier ook aan 't begin) 'n herkenningsteken te maken, zodat je zeker weet dat je de hele tekst ziet.

• Zolang je in grotere dingen zoals 'n lay-out aan 't wijzigen bent, zou ik je aanraden de verschillende delen een achtergrondkleur te geven. Je ziet dan goed, waar 'n deel precies staat. Een achtergrondkleur heeft - anders dan bijvoorbeeld een border - verder geen invloed op de lay-out, dus die is hier heel geschikt voor.
• Als je instellingen verandert in de style, verander er dan maar één, hooguit twee tegelijk. Als je er zeventien tegelijk verandert, is de kans groot dat je niet meer weet, wat je hebt gedaan. En dat je 't dus niet meer terug kunt draaien.

• margin, padding en border worden bij de hoogte en breedte van het element opgeteld. Hier worden vaak fouten mee gemaakt. Als je bijvoorbeeld in een lay-out 'n border toevoegt aan een van de 'hoofdvakken' (header, footer, kolommen), dan wordt deze er bij opgeteld. Bij 'n border van 2 px rondom de linkerkolom wordt deze dus plotseling 4 px breder (2 aan beide kanten), en 4 px hoger. Zoiets kan je hele lay-out verstoren, omdat iets net te breed of te hoog wordt. Je moet dan elders iets 4 px kleiner maken. Dat zal vaak zo zijn: als je één maat verandert, zul je vaak ook 'n andere moeten aanpassen.

  Css geeft de mogelijkheid om met behulp van box-sizing de padding en border bínnen de breedte en hoogte van de inhoud te zetten, als je dat handiger vindt.

  Met nieuwere css-eigenschappen als grid en flexbox, die speciaal zijn gemaakt om een lay-out mee te maken, spelen dit soort problemen veel minder. Maar hier moet je weer goed op de ondersteuning door browsers letten, want niet elke browser ondersteunt al alles van deze eigenschappen, en zeker niet foutloos.

• In plaats van een absolute eenheid als px kun je ook een relatieve eenheid gebruiken, met name em en rem. Voordeel van em en rem is dat een lettergrootte, regelhoogte, en dergelijke in em en rem in alle browsers kan worden veranderd. Nadeel is dat het de lay-out sneller kan verstoren dan bijvoorbeeld px. Dit moet je gewoon van geval tot geval bekijken. Voor weergave in mobiele apparaten zijn relatieve eenheden als em en rem vrijwel altijd beter dan absolute eenheden als px.

  (De minder bekende rem is ongeveer hetzelfde als de em. Alleen is de lettergrootte bij rem gebaseerd op de lettergrootte van het <html>-element, waardoor de rem overal op de pagina precies even groot is. Bij de em kan de lettergrootte worden beïnvloed door de voorouders van het element, bij de rem niet.)

  Zoomen kan trouwens altijd, ongeacht welke eenheid je gebruikt.

• Valideren, valideren, valideren en dan voor 't slapen gaan nog 'ns valideren.

  Valiwie???

  Valideren is het controleren van je html en css op 'n hele serie fouten. Computers zijn daar vaak veel beter in dan mensen. Als je 300 keer <h2> hebt gebruikt en 299 keer </h2> vindt 'n computer die ene missende </h2> zonder enig probleem. Jij ook wel, maar daarna ben je misschien wel aan vakantie toe.

  Valideren kan helpen om gekmakende fouten te vinden. Valide code garandeert ook dat de weergave in verschillende browsers (vrijwel) hetzelfde is. En valide code is over twintig jaar ook nog te bekijken.

  Valideren moet trouwens ook niet worden overdreven. Het is een hulpmiddel om echte fouten te vinden, meer niet. Het gaat erom dat je site goed werkt, niet dat je het braafste kind van de klas bent. Als de code niet valideert, maar daar is een goede reden voor, is daar niets op tegen. Zeker met nieuwere html en css wil de validator nog wel eens achterlopen, terwijl dat al prima is te gebruiken.

  Op deze site is alle css en html gevalideerd. Als de code niet helemaal valide is (wat regelmatig voorkomt), staat daar onder Bekende problemen (en oplossingen) de reden van.

  Je kunt je css en html valideren als 't online staat, maar ook als het nog in je computer staat.

  Html kun je valideren op: validator.w3.org/nu.

  Css kun je valideren op: jigsaw.w3.org/css-validator.

Toegankelijkheid en zoekmachines

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een schermlezer 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:

• Gebruik altijd een alt-beschrijving bij een afbeelding. De alt-tekst is wat wordt gebruikt als afbeeldingen niet kunnen worden gezien (dat geldt dus ook voor zoekmachines). Als je iets wilt laten zien als je over de afbeelding hovert, gebruik daar dan het title-attribuut voor, niet de alt-beschrijving.
• Gebruik bij een link een title, waarin je omschrijft waar de link naar toe leidt.

• Accesskeys (sneltoetsen) kun je beter niet gebruiken, deze gaven te veel problemen omdat ze vaak dubbelop zijn met sneltoetsen voor de browser of andere al gebruikte sneltoetsen. Bovendien is voor de gebruiker meestal niet duidelijk welke toetsen het zijn.

  In de komende html5 waren ze eerst niet toegestaan, maar inmiddels lijkt het erop dat ze toch worden toegestaan, maar op 'n andere manier dan in html 4.01. Ik ga ze zelf pas weer gebruiken als duidelijk is hoe ze gaan werken, en als ze beter zijn uitgedacht dan in html 4.01 het geval was, want bij een goede toepassing is het op zich een heel goed idee.

• Met behulp van de Tab-toets (of op 'n soortgelijke manier) kun je in de meeste browsers door de links lopen. Elke tab brengt je één link verder, Shift+Tab één link terug. Met behulp van tabindex kun je de volgorde aangeven waarin de Tab-toets werkt. Zonder tabindex wordt de volgorde van de code aangehouden, maar soms is een andere volgorde logischer.

• In het verleden werd vaak aangeraden de volgorde van de code aan te passen. Een menu bijvoorbeeld kon in de html onderaan worden gezet, terwijl het op het scherm met behulp van css bovenaan werd gezet. Inmiddels zijn schermlezers en dergelijke zo verbeterd, dat dit niet meer wordt aangeraden. De volgorde in de html kan tegenwoordig beter hetzelfde zijn als op het scherm, omdat het anders juist verwarrend kan werken.

  Een andere mogelijkheid is een zogenaamde skip-link: een link die je buiten het scherm parkeert met behulp van css, zodat hij normaal genomen niet te zien is. Zo'n link is wel zichtbaar te maken in speciale programma's zoals schermlezers. Die link staat boven het menu en linkt naar de inhoud van de pagina, zodat mensen met één klik het hele menu kunnen passeren.

• Van oorsprong was html een taal om wetenschappelijke documenten weer te geven, pas later is hij gebruikt voor lay-out. Maar daar is hij dus eigenlijk nooit voor bedoeld geweest. Het gebruiken van html voor lay-out leidt tot enorme problemen voor gehandicapten en tot een lage plaats in zoekmachines.

  De html hoort alleen inhoud te bevatten, lay-out doe je met behulp van css. Die css moet in een extern stylesheet staan of, als hij alleen voor één bepaalde pagina van toepassing is, in de head van die pagina. Zoekmachines zijn ook niet dol op een oerwoud van inline-stijlen (dat zijn stijlen in de tag zelf: <div style="...">.)

• Breng een logische structuur aan in je document. Gebruik een <h1> voor de belangrijkste kop, een <h2> voor een subkop, enzovoort. Schermlezers en dergelijke kunnen van kopregel naar kopregel springen. En een zoekmachine gaat ervan uit dat <h1> belangrijke tekst bevat.

  Dit geldt voor al dit soort structuurbepalende tags.

  Als een <h1> te grote letters geeft, maak daar dan met behulp van je css 'n kleinere letter van, maar blijf die <h1> gewoon gebruiken. Op dezelfde manier kun je al dit soort dingen oplossen.

• Een table is fantastisch, maar alleen als die wordt gebruikt om een echte tabel weer te geven, niet als hij voor opmaak wordt misbruikt. In het verleden is dat op grote schaal gebeurd bij gebrek aan andere mogelijkheden. Een tabel is, als je niet heel erg goed oplet, volstrekt ontoegankelijk voor gehandicapten en zoekmachines. Het lezen van een tabel is ongeveer te vergelijken met het lezen van een krant van links naar rechts: niet per kolom, maar per regel. Dat gaat dus alleen maar goed bij een echte tabel zoals een spreadsheet. In alle andere gevallen garandeert 'n tabel 'n lagere plaats in een zoekmachine.

• Frames zijn een volstrekt verouderde techniek, die heel veel nadelen met zich meebrengt. <iframe>'s hebben voor een deel dezelfde nadelen. Eén van die nadelen is dat de verschillende frames voor zoekmachines, schermlezers, en dergelijke als los zand aan elkaar hangen, omdat ze los van elkaar worden weergegeven. Ze staan wel naast elkaar op het scherm, maar er zit geen verband tussen.

  Als je 'n stuk code vaak wilt gebruiken, zoals 'n menu dat op elke pagina hetzelfde is, include dat dan met PHP of SSI. Dan ziet iedereen (ook 'n zoekmachines dus!) alles als één pagina in plaats van als los zand aan elkaar hangende teksten.

• Geef de taal van het document aan, en bij woorden en dergelijke die afwijken van die taal de afwijkende taal met behulp van lang="..". Ik doe dat op mijn eigen site maar af en toe, omdat de tekst (en vooral de code) een mengsel is van Engels, Nederlands en eigengemaakte namen. Dit soort teksten is gewoon niet goed in te delen in een taal.
• Gebruik de tag <abbr> bij afkortingen. Doe dat de eerste keer op een pagina samen met de title-eigenschap: <abbr title="en dergelijke">e.d.</abbr>. Daarna kun je op dezelfde pagina volstaan met <abbr>e.d.</abbr>. Doe je dit niet, dan is er 'n grote kans dat 'n schermlezer en dergelijke uit gaat spreken als Ed, en 'n zoekmachine kan er ook geen chocola van maken.

• De spider van 'n zoekmachine, schermlezers, en dergelijke kunnen geen plaatjes 'lezen'. Het is soms verbazingwekkend om te zien hoe veel, of eigenlijk: hoe weinig tekst er overblijft op een pagina als de plaatjes worden weggehaald. Hetzelfde geldt voor die fantastisch mooie flash-pagina's, als daarbij geen voorzieningen voor dit soort programma's zijn aangebracht.

  Op Linux kun je met Lynx kijken, hoe je pagina eruitziet zonder plaatjes en dergelijke, als echt alleen de tekst overblijft. Een installatie-programma voor Lynx op Windows is te vinden op invisible-island.net/lynx.

  In Windows kun je ook het gratis programma WebbIE installeren. WebbIE laat de pagina zien, zoals een schermlezer en dergelijke hem zien. WebbIE is te downloaden vanaf www.webbie.org.uk.

  Ten slotte kun je je pagina nog online laten controleren op 'n behoorlijk aantal sites. Ik noem er hier enkele. Helaas zijn ze bijna allemaal Engelstalig.

  lowvision.support Laat zien hoe een kleurenblinde de site ziet. Engelstalig.

  wave.webaim.org Deze laat grafisch zien hoe de toegankelijkheid is. Heel erg duidelijk, maar bij grotere pagina's wordt 't al snel erg chaotisch.

Getest in

Laatst gecontroleerd op 4 oktober 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 15 november 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 en 1280x1024. 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 en 1280x1024 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 staan bij Bekende problemen (en oplossingen).

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 schermlezer, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox die de pagina laat zien zoals een schermlezer 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.

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, enzovoort in wel geteste browsers: graag!)

Wijzigingen

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

12 mei 2008:

Nieuw opgenomen.

17 juni 2008:

Werkt nu ook (min of meer) in Internet Explorer 6 door het toevoegen van wat html en css speciaal voor die browser.

25 juli 2008:

• Alle aanpassingen voor Konqueror verwijderd.

• (Oenige) typefout verbeterd in de download waardoor vanaf links niet werd geopend in Internet Explorer 7.

• Diverse kleinere aanpassingen in Bekende problemen (en oplossingen) en de rest van de tekst.

• Bij gebruik van de nieuwe zoomfunctie in Firefox 3 bleef aan alle kanten 'n kier over, zowel bij in- als uitzoomen, behalve bij van beneden naar boven slepen. Door het toevoegen van position: absolute; en respectievelijk left: 0; bottom: 0; en right: 0; is dit opgelost. Dit is toegevoegd aan de 'laatste' span aan elke kant bij hoveren daarover: div#rechts span#rechts-meest-links:hover, div#boven span#boven-onderste:hover en div#links span#links-meest-rechts:hover.

4 januari 2009:

• Links en rechts is, eh, niet m'n sterkste kant. Heb span#rechts-meest-rechts hernoemd naar span#rechts-meest-links. Omdat het de meest linkse span is binnen div#rechts... Technisch maakte 't niets uit, maar 't was natuurlijk nogal verwarrend, grinnik.

• Bij Safari werd bij slepen vanaf rechts de vervangende afbeelding heel even helemaal geopend. Hetzelfde gebeurde bij Google Chrome, waarop ik nu ook test. Beide zijn gebaseerd op dezelfde weergave-machine.

  Aan de rechterkant van de doorzichtige border ontstond om een of andere reden 'n zone van 1px breed, waar de vervangende afbeelding volledig werd geopend. Door het toevoegen van padding-right: 1px; aan div#rechts is dit opgelost.

  Waarom dit werkt is me 'n volslagen raadsel, want de border is nog precies hetzelfde en staat ook nog op dezelfde plaats. Maar goed, 't werkt.

25 maart 2009:

• Tekst aangepast aan de nieuw verschenen Internet Explorer 8.

• meta-tag toegevoegd zodat het wordt weergegeven zoals in Internet Explorer 7 het geval was.

14 april 2009:

• Hierboven vermelde meta-tag weer weggehaald, omdat het nu ook goed werkt in de standaardmodus van Internet Explorer 8.

• In Internet Explorer 8 werkte dit niet. Door het toevoegen van border-top: none; aan div#spans span:hover werkt het nu ook in de standaardmodus van Internet Explorer 8.

28 oktober 2010:

Opmerkingen over overbodige display: block; toegevoegd aan beschrijving code.

30 december 2009:

Afbeeldingen van lp's vervangen door eigengemaakte foto's van Koninginnedag 2009 in het Vondelpark in Amsterdam. Dit in verband met copyright. Ook op deze afbeeldingen bleek dat te zitten. Tja.

4 oktober 2011:

• Tekst aangepast aan de inmiddels verschenen Internet Explorer 9.
• Afbeeldingen begrijpelijke namen gegeven. De zeer creatieve naam 033‑01.jpg bijvoorbeeld is veranderd in levend-standbeeld.jpg. In dit voorbeeld maakt het niets uit, maar normaal genomen is een begrijpelijke naam van belang voor schermlezers, zoekmachines, en dergelijke.

20 april 2018

• Code voor oudere versies van Internet Explorer verwijderd. (Her en der in de tekst zijn wel verwijzingen blijven staan.)
• Waarschuwing toegevoegd dat dit voorbeeld is verouderd.

Bekende problemen (en oplossingen)

Dit voorbeeld wordt niet meer bijgewerkt. Het werkt niet (goed) op touchstreens. Meer details zijn te vinden bij Dit voorbeeld is verouderd.

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van 'n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

* Je gebruikt het materiaal uit deze download volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte code en dergelijke zitten. Voor eventuele schade die door gebruik van materiaal uit deze download ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn 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.

afbeelding-033.html: de pagina met het voorbeeld.

afbeelding-033.pdf: deze uitleg (aangepast aan de inhoud van de download).

afbeelding-033-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

Beschrijving van code en css

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

        div p {
            margin-left: 16px;
            height: 120section
            text-align: center;
        }