Skip links en inhoudsopgave

Laatst aangepast: 5 december 2011

Blok tekst met schaduw. Schaduw past zich aan grootte blok, lettergrootte, en dergelijke aan

Korte omschrijving

Aan rechterkant en onderkant van de box met tekst wordt met behulp van een grijze lijn een schaduw gesuggereerd. De schaduw past zich automatisch aan bij zoomen, veranderen van lettergrootte en veranderen van de hoeveelheid tekst.

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

Een donkere lijn aan een van de zijkanten en aan boven- of onderkant van bijvoorbeeld een box met tekst, kan de suggestie van een schaduw geven. Met een gewone border lukt dat niet, omdat die even hoog en breed is als de box met de tekst. En juist de ontbrekende stukjes geven de suggestie van diepte en dus schaduw.

De tekst wordt eerst op de gewone normale manier neergezet in 'n paragraaf, die weer binnen 'n div staat. Eventueel kan het ook gewoon zonder paragraaf.

Achter alle tekst wordt binnen diezelfde div een tweede div geplaatst, die even hoog en breed wordt als de eerste div. Deze tweede div krijgt een grijze achtergrond en wordt iets naar rechts en naar onder verplaatst.

De eerste div krijgt een bepaalde breedte. Of desnoods kan hij het hele browservenster vullen, maakt niet uit. De tweede div heeft een breedte van 100%, en wordt dus even breed als de eerste.

De hoogte van de eerste div past zich automatisch aan de inhoud aan. En omdat de tweede div een hoogte van 100% heeft, wordt deze even hoog als de eerste div.

Bij meer of minder tekst, verandering van lettergrootte of zoomen, past de eerste div zich automatisch aan. En dus de tweede div, die voor de schaduw zorgt, ook, want die is even hoog en breed als de eerste div.

Hierdoor is het enige wat je moet veranderen de breedte van de box met de tekst. Voor de rest is de css helemaal hetzelfde, ongeacht hoeveelheid tekst, lettergrootte, enz. (In Internet Explorer 6 moet ook nog de hoogte van de div met de schaduw worden opgegeven.)

In Internet Explorer 6 kreeg ik dit niet volledig werkend. Bij elke verandering van lettergrootte stortte de hele lay-out in elkaar: gaten in de schaduw en/of de schaduw stond over de tekst heen. Daarom heb ik voor deze browser de lettergrootte onveranderbaar gemaakt. Zie verder bij Bekende problemen.

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.

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: black;

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#content, div#content-2

De div met id="content" en de div met id="content-2". In de eerste div staat de eerste box met tekst en schaduw, in de tweede de tweede box met tekst en schaduw. Omdat bijna alle instellingen voor beide divs hetzelfde zijn, kan ik ze hier allemaal in één keer opgeven.

Alleen de breedte verschilt, dat corrigeer ik later. Dat is ook de enige reden dat er twee id's worden gebruikt: ze hebben 'n verschillende breedte.

position: relative;

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

width: 250px;

Breedte van de eerste div. Door de breedte hier op te geven, spaar ik 'n regel in de css uit. De breedte voor de tweede div geef ik later opnieuw op, en die overrulet deze dan.

margin: 20px auto;

Omdat onder en links niet zijn ingevuld, krijgen die automatisch dezelfde waarden als boven en rechts. Hier staat dus eigenlijk 20px auto 20px auto in de volgorde boven - rechts - onder - links.

'n Kleine marge boven (en onder, maar die maakt hier niets uit omdat er verder niets onder staat).

Links en rechts auto oftewel evenveel oftewel: de div (en dus de afbeelding) staan horizontaal gecentreerd. Deze manier van centreren werkt alleen maar bij 'n blok-element met een breedte.

div#content-2

De div met id="content-2". De div waarbinnen de tweede box met tekst en schaduw staat.

width: 500px;

Deze div wordt twee keer zo breed als de eerste div.

div.tekst

De div met id="tekst". De div waarbinnen alle paragrafen met tekst staan.

position: relative;

Om z-index te kunnen gebruiken moet de div een positie hebben.

z-index: 2;

De div met de schaduw heeft een massief grijze achtergrond. Die div komt in de html na deze div. Daardoor zou de grijze achtergrond over de div met tekst worden geplaatst.

Door nu deze div met de tekst 'n hogere z-index te geven, wordt deze div toch boven de div met de grijze achtergrond gezet, ook al komt die in de html na deze div.

padding: 0 10px;

Omdat de waarden voor onder en links niet zijn ingevuld, krijgen die automatisch dezelfde waarden als boven en rechts. Hier staat dus eigenlijk 0 10px 0 10px in de volgorde boven - rechts - onder - links. Aan de linker- en rechterkant 'n kleine afstand tussen zijkant van de div en tekst.

border: black solid 1px;

Hele div 'n dunne zwarte rand geven.

background: white;

Witte achtergrond. Voor deze constructie moet de div met de tekst 'n ondoorzichtige achtergrond hebben, omdat je er anders de grijze achtergrond van de div met de schaduw doorheen zou zien. Dat mag ook 'n achtergrond-afbeelding zijn, als 't maar ondoorzichtig is.

Geen probleem, lijkt me, want 'n schaduw naast 'n doorzichtige box ziet er wat vreemd uit.

div#schaduw-1, div#schaduw-2

De div met id="schaduw-1" en de div met id="schaduw-2". De bovenste en onderste div die voor de schaduw zorgen.

De enige reden dat deze divs 'n aparte id hebben is vanwege Internet Explorer 6, omdat je voor die browser de hoogte voor elke schaduw apart moet opgeven. Voor alle andere browsers is de css precies hetzelfde voor elke div met schaduw.

position: absolute;

Om div op de goede plaats neer te kunnen zetten en om z-index te kunnen gebruiken. Het eerste ouder-element met een positie is div#content respectievelijk div#content-2, dus er wordt gepositioneerd ten opzichte van deze divs.

bottom: -5px; left: 5px;

5 px naar onderen en 5 px naar rechts verplaatsen. Hierdoor wordt de grijze achtergrond aan de rechter- en onderkant als een grijze lijn zichtbaar: de schaduw.

Omdat deze div precies even groot is als de div met de tekst, missen linksonder en rechtsboven 5 px bij de grijze lijn. Deze missende stukjes suggereren de diepte van de schaduw.

Daarom is een gewone border bij div#tekst ook niet bruikbaar: die zou geen stukjes missen en er gewoon alleen maar raar uitzien, als 'n border waar halverwege 't geld en de verf op was.

z-index: 1;

Omdat deze div in de html na div#tekst - de div met de tekst - komt, zou deze div daaroverheen worden gezet. Inclusief de grijze achtergrond. Dus de tekst zou wegvallen achter de grijze achtergrond. Door deze div 'n lagere z-index dan div#tekst te geven, voorkom ik dat. Nu wordt de div met de tekst boven deze div met de grijze achtergrond gezet.

background: #999;

Div vullen met 'n grijze achtergrondkleur. Het stukje wat hiervan zichtbaar is suggereert de schaduw.

width: 100%;

Van zichzelf vult een div de volle breedte van het ouder-element, maar niet als hij absoluut is gepositioneerd. Dit zorgt ervoor dat deze div even breed wordt als z'n ouder, div#tekst. Als de breedte van div#tekst wordt aangepast, wordt de breedte van deze div dus ook automatisch aangepast. En dus ook de breedte van de achtergrond kleur en dus van de schaduw.

height: 100%;

De hoogte van een div past zich automatisch aan de inhoud aan. Omdat deze div helemaal leeg is ('n achtergrondkleur telt niet mee als vulling), zou de hoogte 0 worden. Oftewel: onzichtbaar. 'n Onzichtbare schaduw is misschien leuk als je van beroep inbreker bent of bij de AIVD werkt, in dit geval wil ik de schaduw toch wel graag zien. We zitten toch niet voor de kat z'n viool te werken.

'n Hoogte van 100 % zorgt ervoor dat de div even hoog wordt als z'n ouder-element, hier div#tekst. Bij 'n verandering van de hoogte van div#tekst verandert deze div nu automatisch mee, en dus de hoogte van de achtergrondkleur, en dus de schaduw.

Speciaal voor Internet Explorer 6

<!--[if IE 6]>, <style type="text/css"> div.tekst {font-size: 18px;} div#schaduw-1 {height: 122px;} div#schaduw-2 {height: 204px;} </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.tekst

De div met id="tekst". Dit is de div waarbinnen alle paragrafen met tekst staan.

font-size: 18px;

In Internet Explorer 6 kan 'n lettergrootte niet worden gewijzigd, als die is opgegeven in px. Dat komt in dit geval goed uit, want bij 'n andere lettergrootte ontstaan gaten in de schaduw en/of komt deze over de tekst heen te staan.

Door als eenheid px te nemen, zorg ik dat de lettergrootte niet kan worden veranderd. De divs blijven dan ook even groot, want die richten zich naar de hoeveelheid inhoud.

Mogelijk kan dit worden opgelost met 'n grote achtergrond-afbeelding in de kleur van de schaduw, die je dan maar gedeeltelijk laat zien, of zoiets, maar 'n simpele oplossing is er niet. Op deze manier zie je in ieder geval 'n schaduw, en ik had geen zin om uren te gaan zoeken naar 'n oplossing die ook werkt bij 'n andere lettergrootte voor deze zwaar verouderde browser.

div#schaduw-1

De div met id="schaduw-1". De div die zorgt voor de schaduw bij de bovenste box.

height: 122px;

Omdat de letters 'n vaste grootte hebben, kan ik precies uitproberen hoe hoog de div met de schaduw moet zijn. Die hoogte verandert niet, dus de schaduw wordt nu ook niet verhaspeld. Enige nadeel is dat ik bij elke box met 'n schaduw 'n eigen waarde moet invullen.

div#schaduw-2

De div met id="schaduw-2". De div die zorgt voor de schaduw bij de onderste box.

height: 204px;

Omdat de letters 'n vaste grootte hebben, kan ik precies kijken hoe hoog de div met de schaduw moet zijn. Die hoogte verandert niet, dus de schaduw wordt nu ook niet verhaspeld. Enige nadeel is dat ik bij elke box met 'n schaduw 'n eigen waarde moet invullen.

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 5 december 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 20 december 2009. Op deze browser test ik niet meer. Maar omdat de code nauwelijks 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.

20 december 2008:

Nieuw opgenomen.

10 april 2009:

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

20 december 2010:

color: black; toegevoegd aan css voor div#tekst vanwege toegankelijkheid.

Bekende problemen

Alle browsers

De div met de schaduw is met behulp van 'n relatieve positie 5 px naar boven en 5 px naar links verplaatst. Elementen die onder of rechts van de schaduw staan, kunnen hierdoor ietsje ónder de schaduw komen te staan en verdwijnen.

De oplossing is simpel: geef de elementen onder en rechts van de schaduw 'n kleine marge.

Internet Explorer 6

In Internet Explorer 6 werkt dit maar gedeeltelijk. De hoogte van de box moet met de hand worden opgegeven. Veranderen van lettergrootte is daardoor niet mogelijk in Internet Explorer 6, omdat dit leidt tot een acuut handgemeen tussen schaduw en tekst met voor beide vreselijke gevolgen: er vallen enorme gaten in de schaduw en/of de schaduw komt over de tekst te staan.

Door als eenheid voor de lettergrootte in deze browser px te gebruiken, kan de lettergrootte van de tekst in de box niet worden veranderd. En dus ook de grootte van de box niet, en dus ook de schaduw niet.

Waarschijnlijk zou je wel iets kunnen doen met 'n grote achtergrond-afbeelding in de kleur van de border, die je dan maar gedeeltelijk laat zien, of zoiets. 'n Kleine achtergrond-afbeelding, 'n span met 'n border, al dat soort dingen werkten in ieder geval niet.

Maar ik vond 't wel goed zo voor deze sterk verouderde en onveilige browser. Er is schaduw, alleen is de grootte niet te veranderen.