Skip links en inhoudsopgave

Laatst aangepast: 26 december 2011

Bij overflow wordt tekst onderaan langzaam vager

Korte omschrijving

Als tekst niet in een element past, dus als er 'n verticale scrollbar is, de tekst onderaan laten vervagen.

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

Dit werkt niet in Internet Explorer 6, want die kan niet met 'n doorzichtige png uit de voeten. Het zou wel werkend te maken zijn, maar omdat er geen essentiële info zoals tekst verloren gaat, geloof ik het wel voor die griezelbrowser. Als je 't werkend wilt maken in Internet Explorer 6, kun je zoeken naar 'pngfix'.

Het plaatje dat zorgt voor het vervagen aan de onderkant is 60 px hoog. Dat is vrij veel, het kan met minder. Maar omdat ik het goed duidelijk zichtbaar wilde hebben in dit voorbeeld, heb ik het plaatje vrij hoog genomen.

Deze constructie is niet geschikt voor tekst die waarschijnlijk geselecteerd gaat worden, of voor tekst met veel links erin, omdat de tekst onder de afbeelding onbereikbaar is. Zie verder bij Bekende problemen.

Omdat het hele effect volledig wordt aangestuurd door de css, heeft het geen invloed op de toegankelijkheid voor spraakbrowsers en dergelijke. Zonder afbeeldingen valt alleen het vervagen weg, voor de rest ziet de pagina er precies hetzelfde uit.

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

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

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

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

Achterliggend idee

Als de tekst niet in een blok-element past, zal daar normaal genomen een verticale scrollbar verschijnen. Dat gebeurt in dit voorbeeld ook.

Om duidelijk te maken dat de tekst nog verder doorloopt dan wat je ziet, lost de tekst aan de onderkant als het ware op in de ondergrond: hij wordt steeds vager. Dit wordt veroorzaakt door een png van 1x60 px, dus heel smal, waardoor hij snel laadt. De 60 px is vrij veel, maar ik wilde het goed zichtbaar hebben in dit voorbeeld.

Die png heeft dezelfde kleur als de achtergrond van de pagina. Aan de bovenkant is de png behoorlijk doorzichtig, en naar onder toe wordt hij steeds minder doorzichtig. Aan de onderkant is hij volledig ondoorzichtig. Omdat de png doorzichtig is, zie je de tekst door de png heen, maar naar onder toe steeds vager.

De png zit als achtergrond-afbeelding in een div die gelijk onder de tekst staat. Die div is absoluut gepositioneerd, zodat hij geen invloed heeft op de rest van de pagina. Met behulp van een negatieve marge wordt hij 60 px omhoog gezet, zodat de div (en dus de png) over de onderste regels tekst komt te staan.

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 http://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 om kleine verschillen tussen browsers te voorkomen.

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: #000;

Standaardkleur van de letters.

background: #ff9;

Achtergrondkleurtje.

div#content

De div met id="content". Dit is de div waarbinnen de tekst staat. Het plaatje dat voor het vervagen zorgt staat niet binnen deze div.

width: 500px;

Breedte. Ik reken deze in dit geval tot de essentiële code omdat de div hieronder, waar de png in staat, een op deze maat afgestemde breedte moet hebben.

height: 394px;

Door een hoogte te geven in combinatie met overflow: auto; zorg ik ervoor dat de tekst niet helemaal is te zien. Daardoor kan ik onderaan de tekst voor het vervagende effect zorgen.

margin: 20px auto 0;

Omdat voor links geen waarde is ingevuld krijgt die automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 20px auto 0 auto in de volgorde boven - rechts - onder - links.

20 px ruimte aan de bovenkant. Links en rechts auto oftewel evenveel oftewel: horizontaal gecentreerd. Deze manier van centreren werkt alleen maar als het te centreren blok-element een breedte heeft.

border: black solid 1px; border-bottom: 0;

Randje rondom de tekst, behalve aan de onderkant.

padding: 3px;

Kleine afstand tussen tekst en rand van de div.

overflow: auto;

De standaardwaarde hiervan is visible: laat alles zien, ook als het hoger is dan de opgegeven hoogte. auto zorgt ervoor dat dat niet gebeurt, maar dat er een scrollbalk verschijnt als de inhoud niet in de div past.

background: white;

Witte achtergrond.

div#content p

De paragrafen binnen de div met id="content". De paragrafen waar de tekst in staat. Dat is er hier, om het effect beter zichtbaar te maken, maar eentje.

margin: 0;

Een paragraaf heeft van zichzelf 'n marge aan boven- en onderkant, dat wil ik hier niet.

padding-bottom: 60px;

Omdat de tekst onder de png niet is te selecteren en omdat je onder de png ook niet op 'n link kunt klikken, geef ik aan de onderkant extra lege van de tekst ruimte. Als nu helemaal omlaag wordt gescrold, staat alle tekst boven de png, zodat alle tekst bereikbaar is voor selecteren en klikken.

div#vervaag

De div met id="vervaag". Dit is de div waar de png in staat die voor het vervagen zorgt.

position: absolute;

Deze div (en dus de daarin zittende png) moet over de tekst komen te staan. De png is een achtergrond-afbeelding, geen gewone <img>.

Een absoluut gepositioneerd element wordt gepositioneerd ten opzichte van de eerste ouder die zelf een positie heeft. Als die er niet is, zoals hier het geval is, wordt gepositioneerd ten opzichte van het venster van de browser.

Omdat ik geen top opgeef, blijft de verticale positie gewoon zoals die normaal zou zijn: gelijk onder de div waar de tekst in staat, div#content.

left: 50%;

div#content, de div met de tekst, is horizontaal in het midden van het venster van de browser gezet met behulp van margin. Dat werkt hier niet, omdat deze div absoluut is gepositioneerd.

div#content staat horizontaal in het midden van het venster van de browser. Als ik dus 'n manier kan vinden om ook met deze div vanuit dat midden te werken, dan kan ik div#content en deze div met de png op elkaar afstemmen, zodat de png precies de onderste regels van de tekst afdekt.

Zet de div horizontaal halverwege het venster van de browser. Nu heb ik 'n uitgangspunt wat los staat van grootte van browservenster, scherm, enz. Met behulp van dit uitgangspunt kan ik nu ook deze div horizontaal in het midden van het venster van de browser zetten. Indirect staan div#content en deze div dan ook ten opzichte van elkaar gepositioneerd.

Op deze pagina staat verder nauwelijks iets. Als er wel meer inhoud is, kan het natuurlijk prima zijn dat iets niet halverwege het browservenster staat. In dat geval kun je om div#content en div#vervaag een 'super-div' zetten, die je 'n relatieve positie geeft. Dan kun je positioneren ten opzichte van die div.

width: 490px;

Breedte van de div. Omdat een achtergrond-afbeelding geen afmetingen van zichzelf heeft - het vult alleen maar het element waar het in staat - moet ik breedte en hoogte hier opgeven.

De breedte van div#content is 500 px. Maar die div heeft 'n scrollbar, en die gaat van de breedte van div#content af. De scrollbar is ongeveer 10 px breed. Om te voorkomen dat de doorzichtige png ook de onderkant van de scrollbar bedekt, moet ik deze div dus 10 px smaller maken.

height: 60px;

De png wordt als achtergrond-afbeelding in deze div gezet. Van zichzelf heeft 'n achtergrond-afbeelding geen maat, hij vult alleen het element waar hij in staat. Daarom geef ik hier de hoogte van de afbeelding op: 60 px. Hierboven heb ik al 'n breedte opgegeven.

Dit is trouwens vrij hoog, maar dat maakt het beter zichtbaar, wat ik in dit voorbeeld wel handig vond. 40 px is ook hoog zat. Je hebt dan ruwweg 'n regel tekst minder waar je niet kunt klikken en selecteren en zo.

margin: -60px 0 0 -253px;

Dit wordt gelezen in de volgorde boven - rechts - onder - links.

Boven 'n negatieve marge van 60 px, dus de hele div (inclusief de png waar het eigenlijk om gaat) wordt 60 px naar boven verplaatst. Daarmee komt hij over het onderste deel van de tekst te staan.

Rechts en onder is geen marge nodig.

Ik heb hierboven de linkerkant van deze div halverwege het venster van de browser gezet. De div is 490 px breed. Als ik nu de div weer de helft hiervan. 245 px, terugzet naar links, dan staat hij horizontaal precies halverwege het venster van de browser. Net zoals de div met de tekst, div#content, zodat de png netjes over de onderste regels van de tekst komt te staan.

In werkelijkheid moet ik hem iets meer naar links zetten, omdat anders 'n deel over de scrollbar komt te staan. Dit was 'n kwestie van gewoon even uitproberen. Uiteindelijk ben ik op 253 px naar links uitgekomen.

background: url(057-pics/vervaag.png);

De png waar alles om draait, eindelijk.

Dit is een heel klein plaatje van 1 px breed. Maar omdat 'n achtergrond-afbeelding wordt herhaald, maakt dat niets uit: het vult toch de volle breedte van de div.

Bovenaan is deze png redelijk doorzichtig, onderaan heeft hij dezelfde kleur als de pagina en is ondoorzichtig. Van boven naar beneden wordt hij steeds minder doorzichtig, dus je ziet steeds minder van de tekst erdoorheen.

60 px is vrij hoog, dat heb ik alleen gedaan omdat ik het goed duidelijk wilde hebben in het voorbeeld. 60 px is, bij 'n normale lettergrootte, zo'n drie regels. 40 px, 2 regels, is ook voldoende.

Omdat de div waar deze afbeelding in zit de tekst eronder afschermt, kun je niet klikken of selecteren waar de afbeelding staat, en ook het scrollwieltje werkt niet boven de png. De scrollbalk werkt wel normaal.

In de hoop dat enigszins duidelijk te maken ben ik bovenaan niet volledig doorzichtig begonnen. Daardoor kun je zien waar het plaatje begint. Hopelijk begrijpen mensen dan dat je moet scrollen als je tekst daaronder wilt selecteren of zo.

Maar ik zou dit zelf nooit gebruiken als er 'n grote kans is dat tekst geselecteerd gaat worden om te kopiëren of zo, of als er veel links in zitten.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#vervaag {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#vervaag

De div met id="vervaag". Dit is de div waar de png in staat die voor het vervagen zorgt.

display: none;

Laat deze div helemaal niet zien.

In Internet Explorer 6 zie je gewoon de hele tekst, zonder vervagen. Internet Explorer 6 kan niet met 'n doorzichtige png uit de voeten. Je kunt 't wel aan de praat krijgen, maar 't gaat niet om iets essentieels: alle tekst zie je gewoon. Dus ik vind 't wel best, die browser had allang verdwenen moeten zijn. Als je 't werkend wilt krijgen in deze wandelende dode, moet je zoeken naar 'pngfix'.

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 26 december 2011

(Internet Explorer 6 is voor het laatst gecontroleerd op 19 januari 2010. 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!)

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

Wijzigingen

21 maart 2009:

Nieuw opgenomen.

10 april 2009:

13 april 2009:

Hierboven genoemde meta-tag weer weggehaald, het wordt nu ook goed weergegeven in de standaardmodus van Internet Explorer 8.

In de vorige versie stond de div met de doorzichtige png relatief gepositioneerd, zodat hij precies op de goede plaats gezet kon worden. Voor dat op de goede plaats zetten werd mede een negatieve marge aan de bovenkant van de div gebruikt. In Internet Explorer 8 blijkt een bug te zitten, waardoor dit niet meer kon.

De combinatie relatieve positie met een negatieve marge aan de bovenkant zorgde ervoor, dat de div met de doorzichtige png bij scrollen met de tekst mee omhoog schoof, dus over de tekst bleef staan. Bovendien kreeg de ruimte onder de div, die maar 60 px hoog is, dezelfde kleur als de achtergrond van de pagina, waardoor de tekst niet meer zichtbaar was.

Bij gebruik van top met een negatieve waarde gebeurde precies hetzelfde.

Door de relatieve positie van de div te veranderen in een absolute werd het probleem opgelost: nu blijft de div, en dus de png, wel op z'n plaats staan als de tekst wordt gescrold. Ook de horizontale marges moesten worden aangepast.

Er was al aparte css voor Internet Explorer 6 en 7. Als er ook nog aparte css voor Internet Explorer 8 zou komen, zouden er in totaal vier versies zijn: eentje voor alle serieuze browsers, en drie voor het speelgoed van de firma Microsoft. Dus de css voor div#vervaag zo aangepast, dat hij in alle browsers werkt (behalve in Internet Explorer 6, want daar werkt dit hele voorbeeld niet).

Bekende problemen

Alle browsers

Internet Explorer 6

Dit werkt niet in Internet Explorer 6, want die kan niet met doorzichtige png's uit de voeten. Dit is op te lossen met JavaScript. Als je zoekt naar 'pngfix' vind je ongeveer 27.863 oplossingen.

Internet Explorer 7

Bij zoomen - zowel bij vergroten als bij verkleinen - ontstaat er soms 'n kier aan de onderkant van de png. Je ziet dan - van boven naar beneden - gewone tekst, png en dan weer tekst door die kier heen. Dat komt door de hopeloos slechte zoom-functie van Internet Explorer 7: niets aan te doen. In Internet Explorer 8 werkt dit wel goed.