Skip links en inhoudsopgave

Laatst aangepast: 7 november 2011

Tekst uitlijnen naast een ronde afbeelding

Korte omschrijving

Tekst laten aansluiten op een onregelmatig gevormde afbeelding. In dit voorbeeld gaat het om een ronde afbeelding.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee beperkingen:

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

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Opmerkingen

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

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

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

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

Achterliggend idee

In drukwerk zie je regelmatig tekst meelopen met de vorm van een afbeelding. Op een site is dat heel moeilijk voor elkaar te krijgen, mede doordat afmetingen onbekend zijn en ook nog veranderd kunnen worden. Een gedrukte folder is niet meer te veranderen, een browser kan op tig manieren worden aangepast. En dan zijn er ook nog verschillen in de weergaven tussen de verschillende browsers.

Om o.a. die redenen is het sowieso onmogelijk om iets te maken wat zelfs maar in de buurt komt van de precisie die je met drukwerk kunt bereiken.

Toen ik dit probeerde kwam ik er eerlijk gezegd niet goed uit. Ik gebruikte 'n gewone afbeelding en zette de tekst daarnaast in kleine spans. Maar zodra je dan de tekst gaat vergroten of verkleinen, of gaat zoomen, slaat de chaos toe, omdat de tekst niet meer in de spans past.

Op couchfort.net vond ik 'n heel andere benadering. Zet de hele handel in 'n grote div. Maak van de afbeelding 'n achtergrond-afbeelding in die grote div.

Binnen die div wordt de tekst gewoon op de normale manier neergezet, in paragrafen.

Ook binnen die div zet je lege spans, die de achtergrond-afbeelding bedekken, en die de tekst zijdelings van het plaatje af duwen.

Dit is het basis-idee.

De html begint dus met de wrapper-div, waar alles in komt te staan. Bovenaan in die wrapper komen de spans die moeten zorgen dat de achtergrond-afbeelding vrij blijft van tekst.

De spans worden allemaal gefloat naar links. Omdat ze de ronding van het plaatje moeten volgen, is de lengte van de spans verschillend. Omdat de spans gefloat zijn, komt de tekst ernaast te staan. Waardoor de tekst dus de ronding van de afbeelding volgt.

Omdat de tekst gewoon binnen 'n paragraaf en zo staat, leveren vergroten, verkleinen en zoomen geen problemen op. Bij grotere letters wordt de paragraaf ook gewoon groter.

De regelhoogte is in em genomen, zodat deze in alle browsers samen met de lettergrootte mee verandert. Dit levert in Internet Explorer 6 problemen op, die voor die browser worden gecorrigeerd met wat css speciaal voor die browser.

De hoogte van de spans wordt in px uitgedrukt. Elke span is ongeveer even hoog als 'n regel met tekst. Door de hoogte van de spans in px te nemen, groeit deze niet mee als ik alleen de lettergrootte verander. Dat is ook precies de bedoeling, want de achtergrond-afbeelding groeit ook niet mee. Als de spans wél zouden meegroeien, zouden die niet meer alleen de afbeelding bedekken, maar veel meer dan dat, wat gaten oplevert tussen tekst en afbeelding.

En als de lettergrootte zou worden verkleind, zou de hoogte van de spans verminderen en zou tekst boven de afbeelding komen te staan.

Bij zoomen maakt het niets uit, want dan wordt álles vergroot of verkleind: tekst, spans en afbeelding.

Maar nogmaals: de precisie van drukwerk is in de verste verte niet te benaderen. Als je dat wilt, moet je van de pagina 'n volledige afbeelding maken. En dat is om allerlei andere redenen weer geen goed idee. Of gewoon huis-aan-huis 'n folder bezorgen.

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

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

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

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

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

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

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

color: white

Witte letter.

background: black

Zwarte achtergrond. Het plaatje heeft een zwarte achtergrond, en die valt nu weg.

#wrapper

Het element met id="wrapper": de div waarbinnen de hele handel staat. In deze div komt ook het achtergrondplaatje te staan. Door alles binnen dezelfde div te zetten, kan ik het makkelijker op elkaar afstemmen.

width: 770px;

Breedte.

margin: 20px auto;

Omdat bij de marge alleen boven en rechts zijn ingevuld, krijgen onder en links automatisch dezelfde waarden. Hier staat dus eigenlijk 20px auto 20px auto in de volgorde boven - rechts - onder - links. 20 px marge boven en onder, links en rechts auto oftewel evenveel. Hierdoor staat de hele div gecentreerd. Deze truc met auto werkt alleen maar als het te centreren element een breedte heeft.

text-align: justify;

Tekst links en rechts uitlijnen. Dat vind ik hier het mooiste.

background: url(043-pics/planeet.jpg) left 160px no-repeat;

Het achtergrondplaatje. Omdat dit zichtbaar blijft, lijkt het gewoon bij de tekst te horen.

Plaatje links neerzetten op 160 px vanaf de bovenkant. Omdat dit plaatje als illustratie dienst doet, moet het niet worden herhaald.

Een achtergrondplaatje zie je niet als css uitstaat. Daarom is deze afbeelding niet geschikt om belangrijke informatie te geven.

line-height: 1.1em;

Deze instelling geldt voor de hele inhoud van #wrapper. De standaard-regelhoogte is ongeveer 1.2 em, maar ik vind dit hier wat mooier. Het maakt het verloop van de ronding in de tekst iets minder springerig.

Door hier em als eenheid te nemen, wordt de regelhoogte ook in Internet Explorer aangepast als ik de lettergrootte verandert. (Dat levert in Internet Explorer 6 trouwens problemen op, maar dat corrigeer ik later.)

#wrapper span

De spans binnen het element met id="wrapper". Ik geef hier de instellingen op die voor alle spans hetzelfde zijn.

float: left;

Zet elke span zo hoog mogelijk en dan zover mogelijk naar links. Een span is een inline-element. Door ze te floaten worden ze in 'n min of meer normaal blok-element veranderd, waardoor ik attributen zoals hoogte kan gebruiken.

clear: left;

Wat hierboven staat zou betekenen dat de spans naast elkaar worden gezet tot de regel vol is, en pas dan op een nieuwe regel worden gezet. Door ze te clearen voorkom ik dat: elke span wordt op een nieuwe regel gezet.

height: 18px;

Hoogte van de spans. Dit is ongeveer gelijk aan de regelhoogte van de tekst (1.1 em). Door hier px als eenheid te nemen, groeit de hoogte niet mee als ik de lettergrootte verander. Dat is precies de bedoeling, want de achtergrond-afbeelding groeit ook niet mee. Als de spans, die voor de lege ruimte boven de afbeelding zorgen, wel zouden meegroeien, zouden er gaten vallen tussen tekst en afbeelding.

Bij zoomen groeien de spans wel mee, maar dat is dan prima, want de achtergrond-afbeelding groeit dan ook mee.

span#boven

De span met id="boven". Een afwijkende span bovenaan, die zorgt dat de andere spans op de juiste afstand vanaf de bovenkant van div#wrapper pagina komen te staan.

De spans staan in de html vrijwel helemaal bovenaan. Omdat ze naar links worden gefloat én worden gecleard, komen ze allemaal onder elkaar te staan. Door de bovenste span dus heel hoog te maken, komen de spans die voor het daadwerkelijke opzij zetten van de tekst worden gebruikt op de goede hoogte te staan: precies boven de achtergrond-afbeelding.

width: 1px;

Deze span is alleen nodig om de andere spans 'omlaag te duwen'. Feitelijk mag hij zelfs 0 px zijn, maar dan negeren Internet Explorer 6 en 7 hem, dus dat kan niet. (Internet Explorer 8 werkt hier net zoals alle andere browsers).

Omdat ook deze span de tekst opzij duwt, levert dit een marge links op van 1 px breed. Dit is zo weinig, dat zelfs de grootste zeurkous dit niet ziet.

height: 140px;

Van de bovenkant van div#wrapper tot de bovenkant van de achtergrond-afbeelding die vrij van tekst moet blijven is 140 px. Deze span zorgt er dus voor dat de volgende span op 140 px vanaf de bovenkant van div#wrapper komt te staan. Die volgende span is de eerste die echt breedte heeft, en de eerste die de tekst echt buiten het plaatje moet 'duwen'.

.marge-166 {width: 166px;} .marge-180 {width: 180px;} .marge-200 {width: 200px;} .marge-207 {width: 207px;} .marge-219 {width: 219px;} .marge-221 {width: 221px;} .marge-238 {width: 238px;} .marge-245 {width: 245px;} .marge-251 {width: 251px;} .marge-252 {width: 252px;} .marge-263 {width: 263px;} .marge-265 {width: 265px;} .marge-273 {width: 273px;} .marge-275 {width: 275px;} .marge-281 {width: 281px;} .marge-283 {width: 283px;} .marge-286 {width: 286px;} .marge-287 {width: 287px;} .marge-291 {width: 291px;}
.marge-292 {width: 292px;}

Dit zijn de spans die zorgen dat de afbeelding vrij blijft van tekst. Ik kon niet zo goed 'n zinvolle naam bedenken, dus heb ik de breedte maar in de naam opgenomen. Het zijn classes, geen id's, zodat spans met dezelfde breedte dezelfde code kunnen gebruiken.

Elke span is een blok van 18 px hoog (dat is bij #wrapper span opgegeven).

Ik heb hier dus 'n hele serie spans van 18 px hoog, die onder elkaar komen te staan. De breedte van de span hangt af van de plaats waar hij staat: de hele afbeelding moet worden bedekt. Hierdoor wordt de ronding van de afbeelding gevolgd (op dezelfde manier kun je ook andere vormen volgen).

En omdat de tekst rechts van deze gefloate spans komt te staan, volgt die ook automatisch de ronding van de afbeelding.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> #wrapper {line-height: 18px;} </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.

#wrapper

Het element met id="wrapper". De div waar de hele handel in staat.

line-height: 18px;

In de algemene css is een regelhoogte van 1.1 em opgegeven. Daardoor verandert ook in Internet Explorer de regelhoogte mee met de lettergrootte. Maar om onduidelijke redenen verandert Internet Explorer 6 dan ook de hoogte van de spans. Waardoor er bij een grotere letter gaten tussen tekst en afbeelding vallen, en bij een kleinere letter tekst over de afbeelding heen komt te staan. Met deze instelling voorkom ik dat.

Bij een grotere letter in Internet Explorer 6 komen de letters nu wel dicht bij elkaar te staan, daar is verder niets aan te doen.

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 7 november 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 4 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.

4 oktober 2008:

Nieuw opgenomen.

10 april 2009:

Tekst aangepast aan de nieuw verschenen Internet Explorer 8. De code is niet veranderd.

1 december 2010

Bij body stond al color: white; background: black;. Deze css is tot essentieel gepromoveerd, omdat je zonder die kleuren helemaal geen ronding ziet.

Bekende problemen

Internet Explorer 6

Bij alle andere browsers verandert de regelhoogte min of meer proportioneel mee met de lettergrootte en met zoomen. Bij Internet Explorer 6 ontstaat bij een grotere lettergrootte een enorm gat onder de afbeelding, en bij een kleinere lettergrootte komt de tekst over de afbeelding heen te staan.

Daarom heb ik voor Internet Explorer 6 de regelhoogte opgegeven in px, dan blijft die hetzelfde. Bij een grotere lettergrootte komt de tekst nu wel heel dicht op elkaar te staan. Zie verder bij Speciaal voor Internet Explorer 6.