Skip links en inhoudsopgave

Laatst aangepast: .

Dubbel kader met ronde hoeken. Hoogte groeit mee met inhoud

Korte omschrijving

Dubbel kader met ronde hoeken dat rondom tekst enz. kan worden neergezet. Het kader groeit in de hoogte mee met de inhoud. Er wordt één plaatje gebruikt.

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

Zonder css, zoals veel spraakbrowsers en dergelijke het weergeven, krijg je gewoon de tekst te zien. Omdat het kader volledig met css wordt gemaakt, geeft het geen problemen wat betreft toegankelijkheid.

Zonder afbeeldingen maar met css worden de ronde hoeken gewoon recht en heb je dus 'n rechthoekig dubbel kader.

(Opmerking 6 februari 2012: inmiddels kun je beter met de css3-eigenschap border-radius ronde hoeken maken. Dit werkt in Firefox, Google Chrome, Opera, Safari en Internet Explorer 9. Voor oudere versies van Internet Explorer kan een filter worden gebruikt. Zie voor voorbeelden Kaders. JavaScript voor oudere versies van Internet Explorer kun je vinden op de pagina met links onder CSS → Bugs en hacks.)

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

Ik wil een dubbel kader maken, dus een kader dat uit twee lijnen met 'n verschillende kleur bestaat. Bovendien wil ik ronde hoeken hebben en moet het kader in de hoogte meegroeien als er meer inhoud binnen het kader staat.

In het voorbeeld heeft het binnenste kader dezelfde kleur als de pagina, en het buitenste kader heeft dezelfde kleur als de achtergrond van de tekst. Dat hoeft niet, het kunnen ook totaal andere kleuren zijn.

Het maken van zo'n kader is makkelijker gezegd dan gedaan. Het meest voor de hand ligt om overal afbeeldingen te gebruiken. Voor de hoeken moet dat hoe dan ook, want met css kun je (nog) geen tweekleurige ronde hoek maken.

Voor de horizontale en verticale rechte lijnen blijken plaatjes echter niet te werken. Zodra ik ga zoomen, verschuiven deze namelijk ten opzichte van de plaatjes met de ronde hoeken. Hierdoor sluiten de rechte en horizontale lijnen niet meer aan op de hoeken, wat er natuurlijk niet erg netjes uitziet.

Daarom moet ik de horizontale en verticale lijnen op een andere manier tevoorschijn toveren.

Aan de buitenkant komt een div#wrapper. Deze geef ik een lichtgroene achtergrond, dezelfde kleur als ik op het plaatje met de hoeken gebruik. Deze div geef ik een padding van 4 px, waardoor van de lichtgroene achtergrond dus altijd 4 px zichtbaar blijft: de buitenste verticale en horizontale lijnen van het kader.

Binnen deze div#wrapper zet ik een div#content. Deze geef ik een gele border van 4 px en een lichtgroene achtergrond. Nu heb ik dus van buiten naar binnen 4 px lichtgroen (de achtergrond van div#wrapper), 4 px lichtgeel (de border van div#content) en de rest lichtgroen (de achtergrond van div#content):

Verticale en horizontale lijnen van het kader
De verticale en horizontale delen van het kader

Hiermee zijn de horizontale en verticale delen van het kader klaar.

De buitenste div#wrapper geef ik een breedte. Dat is niet echt nodig, maar hierdoor kan ik 't geheel centreren. Omdat de binnenste div#content een blok-element is, zal deze automatisch dezelfde breedte krijgen als zijn ouder, div#wrapper. Minus de padding van 4 px. Dus de verticale groene lijnen van het kader zullen altijd zichtbaar zijn.

Ik geef geen hoogte aan div#wrapper of div#content. Daardoor zal div#content automatisch de hoogte krijgen die nodig is om de inhoud ervan weer te kunnen geven. En daardoor zal div#wrapper in de hoogte ook automatisch mee veranderen met div#content. Maar altijd 4 px groter blijven dan div#content vanwege de padding. Dus ook de horizontale groene lijnen (in werkelijkheid is dat de achtergrond van div#wrapper) zullen altijd zichtbaar blijven.

En omdat ik nu geen gebruik heb gemaakt van plaatjes voor de horizontale en verticale delen van het kader, blijkt zoomen op deze manier wel te lukken zonder dat er afwijkingen tussen de rechte delen en de hoeken ontstaan.

Ik hoef nu alleen nog maar binnen div#wrapper vier hoeken op de juiste plaats neer te zetten, en de hele handel is af. Ik doe dat echter niet: ik zet de vier hoeken binnen div#content. Als ik ze binnen div#wrapper zet, blijkt dat afwijkingen ten opzichte van de hoeken op te leveren bij zoomen. Als ik ze binnen div#content zet, gebeurt dat niet. Ik moet dan alleen de positie van de hoeken iets corrigeren om ze op precies de juiste plaats te krijgen.

Voor de hoeken gebruik ik het volgende plaatje:

Afbeelding met de vier hoeken
De vier hoeken (vergroot weergegeven)

Ik gebruik maar één afbeelding voor alle vier de hoeken. Dat zijn drie aanroepen naar de server minder dan wanneer ik vier aparte afbeeldingen gebruik. Via positioneren geef ik het alleen het deel van de afbeelding weer dat nodig is.

Aan de vier buitenkanten zit 3 px meer dan nodig zou zijn. Dat is omdat sommige browsers anders kieren geven bij zoomen. Om dezelfde reden zit er in het midden 6 px extra tussen de hoeken. Hoewel de hoeken dus maar 50 px hoog en breed zijn, is deze afbeelding 3 + 50 + 6 + 50 + 3 = 112 px hoog en breed. De gele en groene banden zijn 4 px breed, even breed als de padding en de border bij div#wrapper en div#content.

De tekst staat binnen een div#content. Binnen deze zelfde div staan vier spans, die als blok-element worden weergegeven. Deze spans worden elk in een hoek van de div#content gepositioneerd. Als achtergrond-afbeelding hebben ze dat deel van de afbeelding, waarin de juiste hoek staat. Door een achtergrond-afbeelding te gebruiken en geen gewone afbeelding, zadel je mensen zonder css, zoals gebruikers van een spraakbrowser, niet op met vier overbodige afbeeldingen.

Dan zijn er nog wat kleine aanpassingen nodig met z-index en zo. Die staan in de code. En vanzelfsprekend zijn er wat aparte aanpassingen nodig voor de schandvlek van Microsoft: Internet Explorer 6.

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.

background: #ff9;

Gele achtergrondkleur.

div#wrapper

De div met id="wrapper". De div waarbinnen alles staat.

width: 330px;

Breedte. Als ik 'n blok-element 'n breedte geef, kan ik het centreren op de manier zoals ik gelijk hieronder doe.

margin: 30px auto 0;

Omdat voor links geen waarde is ingevuld, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 30px auto 0 auto in de volgorde boven - rechts - onder - links. Boven 30 px, onder 0. Links en rechts auto oftewel: evenveel. De div staat nu dus horizontaal gecentreerd. Deze manier van horizontaal centreren van een blok-element werkt alleen maar als het blok-element een breedte heeft.

padding: 4px;

Door een padding van 4 px te geven, komt de inhoud van deze div 4 px vanaf de buitenkant te staan. Hierdoor wordt aan de buitenkant over een strook van 4 px breed de achtergrondkleur zichtbaar: de staande en liggende lichtgroene lijnen van het kader. Omdat de buitenste ronde hoek aansluit op deze padding, is hiermee het buitenste lichtgroene kader compleet.

background: #e4f3ec;

Achtergrondkleur lichtgroen.

div#content

De div met id="content". Dit is de div waarbinnen de tekst en de spans met de ronde hoeken staan.

position: relative;

Om kinderen van deze div te kunnen positioneren ten opzichte van deze div, moet hij zelf een positie hebben. Dat ik daar verder niets bij invul, maakt niet uit.

min-height: 100px;

De hoeken zijn 50 px hoog. Bij erg weinig tekst, of als de letters heel erg verkleind worden, zouden de hoeken over elkaar kunnen komen te staan. Een minimum-hoogte voorkomt dat. Dit werkt niet in Internet Explorer 6, maar het is niet het einde van de wereld als de hoeken daarin over elkaar komen te staan. Was het dat maar wel, dan zouden mensen tenminste die nepbrowser dumpen...

border: #ff9 solid 4px;

Een gele rand van 4 px breed. Dit levert de verticale en horizontale delen van het gele kader op. En omdat div#wrapper 4 px groter is aan alle kanten en een groene achtergrond heeft, zijn de horizontale en verticale delen van de beide kaders nu af.

padding: 0 20px;

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

Boven en onder geen padding. Omdat alle tekst in een <p> staat, geeft de marge van die <p>'s aan boven- en onderkant al voldoende afstand tussen border en tekst.

Links en rechts 20 px padding. Dat is vrij veel. Maar door deze padding wat ruim te nemen, komt de tekst netjes in de ronding van de hoeken te staan en niet te dicht ertegenaan.

background: #e4f3ec;

Achtergrond lichtgroen. Dit is dezelfde kleur als die van de plaatjes aan de binnenkant van de ronde hoeken.

#lb

Het element met id="lb". Dit is de span waarin de ronde hoek linksboven staat.

position: absolute;

Om de span op de juiste plaats neer te kunnen zetten.

Een span is van zichzelf een inline-element. Door haar absoluut te positioneren, verandert ze in een blok-element en kan ik eigenschappen als breedte en hoogte gebruiken.

top: -8px;

Als ik niets opgeef hier, komt de span gewoon op de normale plaats te staan: gelijk onder de gele border van div#content. Die border is 4 px hoog. Daarboven zit nog een padding van div#wrapper van 4 px breed, waardoor de groene achtergrond van div#wrapper is te zien. Als ik de span (en dus ook de daarin zittende achtergrond-afbeelding met de ronde hoeken) 8 px omhoog zet, komt de achtergrond-afbeelding precies naast de groene en gele lijnen te staan. Waardoor de ronde hoek van de achtergrond-afbeelding precies aansluit op de horizontale groene en gele lijn.

left: -8px;

Zelfde verhaal als hierboven staat, maar nu voor de linkerkant.

width: 50px;

Een blok-element krijgt automatisch dezelfde breedte als z'n ouder, maar niet als het absoluut is gepositioneerd, zoals hier het geval is. Dus is er helemaal geen breedte. En omdat een achtergrond-afbeelding van zichzelf ook geen grootte heeft, maar alleen de achtergrond van het element waar hij in staat vult, moet ik zelf een breedte geven die even groot is als de hoek. Anders zou je gewoon helemaal geen hoek zien.

height: 50px;

Een blok-element krijgt automatisch de hoogte die nodig is voor de inhoud. Maar er is hier geen inhoud, dus ook geen hoogte. De achtergrond-afbeelding heeft van zichzelf geen grootte, maar vult alleen het element waar hij in staat. Dus moet ik zelf 'n hoogte opgeven, anders zie je gewoon helemaal geen hoek. 50 px is de hoogte van de hoek.

background: url(069-pics/hoek.jpg) -3px -3px;

Het plaatje met de hoeken. Omdat het hier om de linkerbovenhoek gaat, kan het gewoon op de normale plaats worden neergezet. Met alleen twee kleine correcties.

Links en boven de hoek zit 3 px geel extra, omdat anders bij sommige browsers bij zoomen kieren ontstaan. Daarom moet ik de achtergrond-afbeelding pas op 3 px van boven en 3 px van links zichtbaar maken. Nu sluit de linkerbovenhoek naadloos aan op de liggende en staande gele en groene lijnen.

#rb

Het element met id="rb". Dit is de span waarin de ronde hoek rechtsboven staat.

position: absolute;

Om de span op de juiste plaats neer te kunnen zetten.

Een span is van zichzelf een inline-element. Door haar absoluut te positioneren, verandert ze in een blok-element en kan ik eigenschappen als breedte en hoogte gebruiken.

top: -8px;

Als ik niets opgeef hier, komt de span gewoon op de normale plaats te staan: gelijk onder de gele border van div#content. Die border is 4 px hoog. Daarboven zit nog een padding van div#wrapper van 4 px breed, waardoor de groene achtergrond van div#wrapper is te zien. Als ik de span (en dus ook de daarin zittende achtergrond-afbeelding met de ronde hoeken) 8 px omhoog zet, komt de achtergrond-afbeelding precies naast de groene en gele lijnen te staan. Waardoor de ronde hoek van de achtergrond-afbeelding precies aansluit op de horizontale groene en gele lijn.

right: -8px;

Omdat het om de rechterbovenhoek van de achtergrond-afbeelding gaat, moet ik deze span vanaf rechts neerzetten. Dus right: 0;. Maar om dezelfde reden als gelijk hierboven staat voor de bovenkant, moet ik 'n correctie aan de rechterkant toepassen.

width: 50px;

Een blok-element krijgt automatisch dezelfde breedte als z'n ouder, maar niet als het absoluut is gepositioneerd, zoals hier het geval is. Dus is er helemaal geen breedte. En omdat een achtergrond-afbeelding van zichzelf ook geen grootte heeft, maar alleen de achtergrond van het element waar hij in staat vult, moet ik zelf een breedte geven die even groot is als de hoek. Anders zou je gewoon helemaal geen hoek zien.

height: 50px;

Een blok-element krijgt automatisch de hoogte die nodig is voor de inhoud. Maar er is hier geen inhoud, dus ook geen hoogte. De achtergrond-afbeelding heeft van zichzelf geen grootte, maar vult alleen het element waar hij in staat. Dus moet ik zelf 'n hoogte opgeven, anders zie je gewoon helemaal geen hoek. 50 px is de hoogte van de hoek.

background: url(069-pics/hoek.jpg) -59px -3px;

Het plaatje met de hoeken.

Ik heb de span waar deze achtergrond-afbeelding in moet komen al rechtsboven op de goede plaats gezet. Maar binnen die span wordt de achtergrond-afbeelding op de normale manier neergezet: gewoon linksboven. Dus zou ik de linkerbovenhoek zien. Daarom zet ik de achtergrond-afbeelding 50 px naar links, zodat ik de linkerbovenhoek zie.

50 px? Is die man dronken? Daar staat toch zeker 59 px? Wacht even, haal even diep adem, dan leg ik 't uit.

Aan de linkerkant van de afbeelding zit 3 px extra geel. Tussen de linker- en de rechterbovenhoek op de afbeelding zit 6 px extra. Dat is omdat er anders bij sommige browsers kieren ontstaan bij zoomen. Ik moet dus 9 px extra naar links verplaatsen. En 50 + 9 is bij 59.

Aan de bovenkant zit ook 3 px extra geel, dus moet ik ook 3 px omhoog verplaatsen.

div#content p

Alle paragrafen binnen de div met id="content". Dat zijn de <p>'s waar de tekst in staat.

position: relative;

Ik moet 'n z-index gebruiken, maar die werkt alleen maar als het element 'n positie heeft. Dat ik daar verder niets bij invul maakt niet uit.

z-index: 5;

De spans met de achtergrondafbeelding zijn 50 x 50 px. Het zijn vierkanten, waarvan het deel binnen de ronde hoeken groen is. Omdat de spans absoluut gepositioneerd zijn, kunnen ze over de tekst komen te staan.

Om dat te voorkomen geef ik de <p>'s 'n hogere z-index, zodat de <p>'s, en dus de daarin staande tekst, boven de spans komt te staan. Omdat div#content een padding heeft, komen de <p>'s toch nog op enige afstand van de rand te staan, zodat de tekst precies in de ronde hoeken komt te staan.

#lo {position: absolute; bottom: -8px; left: -8px; width: 50px; height: 50px; background: url(069-pics/hoek.jpg) -3px -59px;}
#ro {position: absolute; right: -8px; bottom: -8px; width: 50px; height: 50px; background: url(069-pics/hoek.jpg) -59px -59px;}

De elementen met id="lo" en id="ro". Dit zijn de spans voor de hoeken linksonder en rechtsonder. Dit werkt precies hetzelfde als de span voor linksboven #lb en rechtsboven #rb. Alleen wordt nu gepositioneerd vanaf de onderkant en is de plaats van de achtergrond-afbeelding anders, omdat 'n andere hoek moet worden geplaatst.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#content {width: 282px; padding: 10px 20px 1px;} </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#content

De div met id="content". Dit is de div waarbinnen de tekst en de spans met de ronde hoeken staan.

width: 282px;

Ik vraag me niet eens meer af hoe dit nou weer komt, maar div#content komt een eind links van div#wrapper te staan. Dat hoort niet te kunnen, complimenten aan Microsoft voor alle Wonderen van de Wilde Natuur die ze in dit kreng hebben weten in te bakken.

Goed, als ik de breedte 40 px smaller maak staat hij op wonderbaarlijke wijze op de goede plaats en ben ik weer rustig. Met enig zoeken is hier ongetwijfeld ergens op internet 'n verklaring voor te vinden in de vorm van 'n bekende bug of 'n vorm van normvervaging van Microsoft, maar dit werkt, dus...

padding: 15px 20px 1px;

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

Links en rechts een padding van 20 px, dat is het zelfde als in de algemene css. Anders komt de tekst te dicht op het kader te staan.

Bovenaan 10 px padding, omdat Internet Explorer 6 zoals vaker bij de bovenste <p> de marge aan de bovenkant weghaalt, zodat de tekst te hoog zou komen te staan.

De 1 px padding aan de onderkant is omdat er anders 'n kiertje van 1 px verschijnt.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> span#rb + p {margin-top: 15px;} </style> <![endif]-->

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

span#rb + p

De eerste <p> na de span met id="rb". De + in de selector beperkt deze selector tot alleen de <p> die direct na de span#rb komt.

margin-top: 15px;

Internet Explorer 7 verwijdert, zoals vaker, de marge aan de bovenkant van de bovenste <p>, waardoor de tekst te hoog zou komen te staan.

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 6 februari 2012.

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

Er is getest met behulp van muis en toetsenbord.

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.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld mobiele systemen als iOS of Android, en ook niet op apparaten als smartphones, iPad, enz. De kans is heel erg groot dat dit voorbeeld niet (volledig) werkt op dat soort systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen.

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.

3 september 2009:

Nieuw opgenomen.

6 februari 2012:

Tekst aangepast aan de inmiddels verschenen Internet Explorer 9. De code is niet veranderd.

Bekende problemen

Internet Explorer 6

Bij vergroten of verkleinen van de lettergrootte worden er hier en daar aan de buitenkant kleine groene streepjes zichtbaar. Bij de standaard-lettergrootte zijn die er niet.

Mogelijk is dit op te lossen, maar ik vind het goed genoeg voor dit onding.

Internet Explorer 7

Bij zoomen sluit de onderkant van het kader totaal niet meer aan op de rest. Als je alleen de lettergrootte verandert, gaat het wel goed. Dit heeft te maken met de belabberde zoomfunctie van Internet Explorer 7 zodra je position: absolute; gebruikt. In Internet Explorer 8 werkt het wel goed.