Skip links en inhoudsopgave

Laatst aangepast: 25 oktober 2011

Doorzichtig kader met ronde hoeken. Hoogte groeit mee met inhoud

Korte omschrijving

Zwart kader met ronde hoeken dat om tekst enz. kan worden neergezet. Het kader groeit in de hoogte mee met de inhoud. Er worden twee doorzichtige plaatjes gebruikt.

Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook. Een link naar https://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd.

Opmerkingen

Omdat de kadertjes op 'n doorzichtige achtergrond staan, kun je zien wat daarachter zit. Met 'n klein beetje moeite kun je zelfs daarachter zittende afbeeldingen zichtbaar maken.

Je kunt natuurlijk ook 'n gekleurde achtergrond gebruiken voor de kadertjes als dat beter uitkomt.

Omdat de ronde hoeken achtergrond-afbeeldingen zijn, worden ze zonder css gewoon weggelaten. In principe hebben deze hoeken dus geen invloed op hoe spraakbrowsers en dergelijke de pagina weergeven.

Zonder afbeeldingen vallen de hoeken en de lijnen aan boven- en onderkant weg, maar de tekst blijft gewoon normaal zichtbaar.

Internet Explorer 6 ondersteunt geen doorzichtige png. Zie Bekende problemen.

(Opmerking 25 oktober 2011: inmiddels kun je ook met de css3-eigenschap border-radius ronde hoeken maken 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.)

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

Je zou denken dat het redelijk simpel is om 'n kadertje met ronde hoeken om 'n blok tekst of zo te zetten, maar dat is niet zo. Rechte lijnen is geen probleem, dat kan gewoon met 'n border.

In css 3 kun je ronde hoeken maken, maar dat wordt nog nauwelijks ondersteund. 'n Andere mogelijkheid zou SVG zijn, 'n soort standaard-tekentaal, maar tot nu toe weigert Microsoft helaas dat te ondersteunen, waardoor het dus ook niet bruikbaar is op internet (buiten internet wordt het veel gebruikt). De enige mogelijkheid op dit moment is het gebruik van plaatjes. (Er zijn nog wel wat trucs, maar die sla ik nu maar even over, want die zijn veel ingewikkelder.)

Het probleem zit 'm erin dat je niet weet hoe groot de inhoud precies is. Letters kunnen vergroot en verkleind worden. Schermen zijn groter of kleiner, dus het blok met tekst of andere inhoud kan breder of smaller zijn. Dan zijn er nog toolbars, de geschiedenis kan open staan, noem maar op. Kortom: het is onmogelijk om 'n kader te maken dat altijd past, tenzij dat kader mee kan krimpen en groeien met de inhoud.

Het hier gemaakte kadertje levert 'n simpel lijntje op met ronde hoeken, dat meegroeit en -krimpt met de inhoud.

De verticale lijnen zijn doodsimpel: dat zijn gewone borders. Dat is ook het deel dat meegroeit: bij meer inhoud wordt het kader hoger. De breedte blijft hetzelfde. Dat is ook handiger, want dan krijg je niet zo snel 'n horizontale scrollbalk. En de andere delen van de pagina blijven beter op hun plaats.

De twee hoeken aan de bovenkant zitten aan elkaar vast, met een lange lijn ertussen. Het geheel is 1500 px breed, dus daar kun je aardig wat in kwijt. Vooral omdat er twee naast elkaar worden gezet, dus dat is haast 3000 px.

De eerste lijn met de twee hoeken wordt gewoon bovenaan neergezet, in een aparte span. De tweede wordt daar gelijk ondergezet, ook in 'n eigen span. Dit is twee keer precies hetzelfde plaatje. Van het eerste plaatje wordt de linkerhoek gebruikt, van het tweede de rechterhoek.

Omdat de spans in blok-elementen zijn veranderd, worden ze onder elkaar gezet, op 'n nieuwe regel. De plaatjes met het kader worden als achtergrond-afbeelding in de span neergezet. Een achtergrond-afbeelding heeft zelf geen afmeting, maar neemt de maat van het element waar ze in staat aan. Hier is dat de span. Als ik dus die spans de juiste maat geef, hebben de kadertjes automatisch ook de juiste maat. En als ik de spans op de juiste plaats neerzet, staan de afbeeldingen automatisch ook goed.

De juiste breedte krijgen de spans omdat het blok-elementen zijn. Een blok-element wordt normaal genomen automatisch even breed als het ouder-element: div#wrapper. En laat dat nou net ook het element zijn waar de inhoud in staat. De span wordt dus even breed als het element waar de inhoud in staat.

De hoogte geef ik apart op, die is even hoog als het plaatje met het kader.

Er staan bovenaan twee plaatjes onder elkaar, omdat 'n blok-element op 'n nieuwe regel wordt gezet. Het tweede plaatje moet 10 px omhoog, de hoogte van het plaatje. Nu staan ze beide op dezelfde hoogte. Dan moet er alleen nog 'n beetje naar links en naar rechts worden geschoven, en de lijntjes op de plaatjes sluiten netjes aan op de staande border.

Als je niet begrijpt wat er gebeurt, speel dan wat met de diverse marges. Verander er steeds eentje, geef 'n element 'n achtergrondkleurtje, dat soort dingen. Als je 't ziet veranderen, is 't makkelijker te begrijpen dan via lezen.

Aan de onderkant werkt het precies hetzelfde, maar dan met 'n plaatje (of feitelijk twee keer hetzelfde plaatje dus) met hoekjes naar boven toe gericht.

Omdat het alleen maar om 'n simpel lijntje gaat en omdat de achtergrond doorzichtig is, zijn het hele kleine plaatjes: nog geen 300 byte, dus ze worden snel gedownload.

Zonder css zie je niets van de plaatjes, omdat het achtergrondplaatjes zijn: je ziet gewoon de tekst zonder kader. Dus spraakbrowsers en dergelijke hebben er geen last van.

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

Achtergrond 'n kleurtje geven.

div#wrapper

De div met id="wrapper". De div waar alles in staat. Wordt hier alleen gebruikt om de hele handel op 'n simpele manier op de goede plaats neer te kunnen zetten.

width: 80%;

Breedte 80 % van het venster van de browser, ongeacht de grootte daarvan.

margin: 0 auto;

Er zijn maar twee maten ingevuld: voor boven en voor rechts. Dan worden voor onder en links automatisch dezelfde maten genomen, dus dit wordt gelezen als 0 auto 0 auto, in de volgorde boven - rechts - onder - links. Boven en rechts geen marge, links en rechts auto oftewel evenveel. Dus staat alles horizontaal gecentreerd.

Deze manier van centreren werkt alleen als het element 'n breedte heeft, zoals hier 80 %.

padding-top: 40px;

Kleine afstand tussen bovenkant van venster van de browser en tekst.

#lb, #rb

De elementen met id="lb" en met id="rb". Dit zijn de spans waarbinnen de plaatjes staan die aan de bovenkant worden gebruikt: lb staat voor linksboven, rb voor rechtsboven.

display: block;

Een span is van zichzelf 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als hoogte en background-image gebruiken.

background: url(040-pics/boven.png);

Dit is het plaatje met de twee bovenste hoeken en de daartussen liggende lijn. Hoewel deze afbeelding 1500 px breed is, heeft hij geen afmeting omdat het een background-image is. Een background-image neemt de afmeting aan van het element waarin hij staat. En omdat de spans zijn veranderd in blok-elementen, nemen die automatisch de breedte aan van het element waar ze in staan. En omdat in dat element ook de tekst staat, wordt de span dus (ongeveer) even breed als de tekst.

Er worden twee plaatjes gebruikt. Van de ene wordt de linkerhoek gebruikt, van de ander de rechter. Door ze gedeeltelijk over elkaar heen te zetten is van elk plaatje maar één hoek zichtbaar. En aangezien de tussen de hoeken liggende lijnen op dezelfde hoogte worden gezet, krijg je dan: linkerhoek - horizontale lijn - rechterhoek. Met ongeveer de juiste breedte.

Dit is ongeveer te vergelijken met twee vellen papier waar je een rechthoek opzet. Door die vellen op elkaar te leggen en te schuiven, kun je de rechthoek groter en kleiner maken. Hier wordt door de breedte van het ouder-element (waar de tekst in staat) bepaald hoeveel er 'geschoven' wordt.

height: 10px;

Een blok-element heeft van zichzelf geen hoogte. Even hoog maken als de background-image die erin wordt gezet.

#lo, #ro

De elementen met id="lo" en met id="ro". Dit zijn de spans waarbinnen de plaatjes staan die aan de onderkant worden gebruikt: lo staat voor linksonder, ro voor rechtsonder.

display: block;

Een span is van zichzelf 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als hoogte en background-image gebruiken.

background: url(040-pics/onder.png);

Uitleg zie bij background: url(040-pics/boven.png), maar dan voor de onderste twee plaatjes.

height: 10px;

Een blok-element heeft van zichzelf geen hoogte. Even hoog maken als de background-image die erin wordt gezet.

#lb, #lo

De elementen met id="lb" en met id="lo": de spans waar de achtergrondafbeeldingen in staan waarvan de linkerhoek wordt gebruikt (linksboven en linksonder).

margin-right: 10px;

Omdat deze spans zijn veranderd in blok-elementen, nemen ze de breedte aan van hun ouder-element. Dat is maar goed ook, want het achtergrondplaatje wat er in staat is maar liefst 1500 px breed, en voor je 't weet steek je je buurman 'n oog uit met zo'n lange lijn.

Deze twee spans worden, net als alle blok-elementen, links op 'n nieuwe regel gezet. Het achtergrondplaatje kan er dan ook gewoon in gezet worden: de linkerhoek staat keurig links. Precies zoals de bedoeling is.

Naast die linkerhoek staat de horizontale lijn op de achtergrondafbeelding, dus die staat ook keurig op de goede plaats. En die lijn wordt niet breder dan div#wrapper, het ouder-element waar ook de tekst in staat. Aan het eind van het ouder-element wordt hij dus afgekapt.

Dat is heel mooi, want rechts moet 'n hoek komen te staan, en geen doodlopende lijn.

Die rechterhoek gebruik ik van het plaatje wat in span #rb staat. Dus dan heb ik keurig linkerhoek - horizontale lijn - rechterhoek.

Met één probleem: de achtergrond van de plaatjes is doorzichtig. Dus door de rechterhoek heen zie ik het einde van de horizontale lijn van #lb, want die loopt door tot het einde van div#wrapper.

Als ik nu rechts 'n marge van 10 px neerzet, kort ik als het ware de horizontale lijn met 10 px in, want 'n achtergrondafbeelding loopt niet door in 'n marge. Daardoor zie je nu onder de rechterhoek geen horizontale lijn meer.

(Een marge wordt weliswaar bij de breedte van de span opgeteld, maar marge en span samen moeten toch binnen div#wrapper blijven. Dus in dit geval is het effect dat die marge de span (en dus de background-image) 10 px naar links drukt.)

Aan de onderkant gaat het precies hetzelfde, met alleen andere id's en zo.

Als dit niet duidelijk is, speel dan wat met de marges en zo, en geef achtergrondkleurtjes of borders, dan zie je wat er gebeurt. Dat is veel makkelijker dan lezen.

#rb, #ro

De elementen met id="rb" en met id="ro". De spans met daarin de plaatjes waarvan de rechterhoek wordt gebruikt: rechtsboven en rechtsonder.

margin-left: 10px;

Ik zet iets verderop de background-images van deze spans aan de rechterkant neer, dus de rechterkant (met de afbeelding van de rechterhoek) van het plaatje tegen de rechterkant van de span. Dan staat de rechterhoek gelijk goed.

De aan de rechterhoek vast zittende horizontale lijn loopt dus van rechts naar links. Deze lijn is bijna 1500 px lang (de hoeken gaan eraf). En omdat de span waar hij in staat even breed is als div#wrapper, is deze lijn ook even breed. En loopt dus tot aan de linkerkant van div#wrapper.

Aan de linkerkant wordt, vanuit 'n andere span, de linkerhoek neergezet. En omdat deze doorzichtig is zie je de horizontale lijn daardoorheen. Daarom druk ik met 'n marge de span (en dus de background-image) 10 px naar rechts.

'n Iets uitgebreidere uitleg voor de linkerhoek staat bij "#lb, #lo. Die werkt hetzelfde, alleen in omgekeerde richting.

margin-top: -10px;

De spans zijn veranderd in blok-elementen en komen dus op 'n nieuwe regel te staan. Deze twee spans komen als tweede in de html: rb na lb, en ro na rb. De spans zijn 10 px hoog, om ze dus op dezelfde hoogte te krijgen moet ik ze 10 px omhoog zetten. Nu staan de horizontale kaderlijnen van de eerste en van de tweede span op dezelfde hoogte.

background-position: right;

Van deze twee spans wil ik de rechterhoek gebruiken, dus ik moet de background-images vanaf rechts neerzetten: de rechterkant tegen de rechterkant van de span.

#content

Het element met id="content". De div waar de tekst in staat.

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

Rand eromheen zetten die even breed is als de rand op de plaatjes. De verticale randen sluiten naadloos aan op de plaatjes.

De horizontale randen moet ik verwijderen, want die komen veel te laag/hoog te staan. Leg ik verder niet uit, als je ze even zichtbaar maakt zie je gelijk wat ik bedoel.

padding: 0 10px;

Omdat hier alleen waarden zijn ingevuld voor boven en rechts, wordt voor onder en links automatisch dezelfde maat genomen als voor boven en rechts en wordt dit dus gelezen als 0 10px 0 10px in de volgorde boven - rechts - onder - links. Links en rechts 'n kleine afstand tussen inhoud (tekst) en kadertje.

Boven en onder is dat niet nodig. De spans aan boven- en onderkant zijn 10 px hoog. Dat zie je niet omdat de achtergrond doorzichtig is. Voor het oog is er dus al voldoende lege ruimte aan boven- en onderkant tussen tekst en kader.

p#bovenste

De paragraaf met id="bovenste". De bovenste paragraaf.

Dit is alleen maar nodig bij 'n blok-element dat van zichzelf 'n marge aan de bovenkant heeft, zoals 'n <p> of 'n <h...>. Bij inline-elementen is het niet nodig, die hebben van zichzelf geen marge aan de bovenkant. Het is ook alleen maar nodig bij het bovenste blok-element, bij volgende niet.

Als er maar één blok-element is, bijvoorbeeld maar één paragraaf met tekst, moet je deze selector combineren met die van p#onderste.

margin-top: 0;

Dit is het bovenste element binnen div#content. Een paragraaf heeft van zichzelf een marge aan boven- en onderkant. Die marge steekt boven de paragraaf uit, en ook boven div#content. En div#content had een verticale border als onderdeel van het kader. Met zo'n marge komt er een gat in het kader, dus geen marge aan de bovenkant.

Er staat wel 'n volledige verticale border als ik div#content 'n complete border geef, aan alle kanten, maar die border aan boven- en onderkant kan ik niet gebruiken, dus dat werkt niet.

Vreemd? Ja, vind ik ook. Bij die marges links en rechts van de spans met de plaatjes wordt de marge bínnen div#content gezet. Maar 'n verticale marge wordt anders behandeld dan 'n horizontale: bij twee verticale marges 'wint' de grootste en verdwijnt de kleinste. En de grootste is hier de marge die bij deze <p> hoort.

Maar evengoed vind ik het vreemd dat de verticale border van div#content dan niet tot bovenaan doorloopt, terwijl deze <p> de div wel naar boven toe oprekt. Maar goed, dit werkt ook prima, dus opgelost.

p#onderste

De paragraaf met id="onderste". De onderste paragraaf.

margin-bottom: 0;

Zelfde verhaal als bij p#bovenste, maar je moet 'onder' lezen waar 'boven' staat.

Als er maar één blok-element is, bijvoorbeeld maar één paragraaf met tekst, moet je deze selector combineren met die van p#bovenste.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> #lb, #rb, #lo, #ro {font-size: 36%;} </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.

#lb, #rb, #lo, #ro

De elementen met id="lb", "rb", "lo" of "ro": de spans waar de background-images in staan.

font-size: 36%;

Lettergrootte terugbrengen tot 36 %.

Dit is er weer zo eentje waar de verklaring waarschijnlijk ongeveer is dat de foezel niet in de gluup paste toen ze Internet Explorer 6 wroggelden, met als gevolg dat de hassemeflas het nu niet goed verfloust. Kortom: weer 'n bug of 'n afwijking van de standaard.

Zonder deze opdracht zet Internet Explorer 6 alle plaatjes twee keer neer, boven elkaar. Als ik no-repeat toevoeg zet 't kreng helemaal niks neer, geen een. Statistisch gezien is 't precies goed: 't gemiddelde van 0 plaatjes en twee plaatjes is exact 1 plaatje. Helaas heeft 't menselijk oog weinig op met statistiek en zie je er dus 2 of 0.

Deze idiote opdracht blijkt 't op te lossen.

36 % is de hoogste waarde waarbij 't goed gaat. Met bijvoorbeeld 1% werkt 't ook, maar dat kunnen zoekmachines zien als 'n stiekeme manier om hoger in de resultaten terecht te komen. 'n Spider van 'n zoekmachine leest gewoon de html, ziet de tekst, en bepaalt mede op grond daarvan je plaats in de volgorde van de zoekresultaten. Door de lettergrootte belachelijk klein te maken kun je die tekst verstoppen voor mensen. De zoekmachine ziet dus iets anders dan 'n bezoeker, en dat kan leiden tot verwijdering uit de zoekresultaten.

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 25 oktober 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 28 november 2009. Op deze browser test ik niet meer. Maar omdat de code niet is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in Internet Explorer 6.)

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 6, 7, 8 en 9 in de resoluties 800x600, 1024x768, 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.

16 september 2008:

Nieuw opgenomen.

28 maart 2009:

Tekst aangepast aan de nieuw verschenen Internet Explorer 8. De code is hetzelfde gebleven.

1 oktober 2009:

Aantal keren in de uitleg div#content genoemd waar div#wrapper had moeten staan. Gecorrigeerd.

17 november 2010:

25 oktober 2011:

Bekende problemen

Alle browsers behalve Internet Explorer 6

Bij sterk in- en uitzoomen kunnen er (delen van) lijntjes en hoeken verdwijnen, of juist iets dikker worden. Heel ernstig is dit niet en er is niets aan te doen. Op een of andere manier moet de browser berekenen hoe het er uit moet gaan zien, en daarbij zijn afrondingsverschillen en dergelijke kennelijk niet te vermijden.

Het wachten is op ondersteuning van SVG en/of css 3 in alle browsers. Dus het wachten is op Microsoft, zoals gebruikelijk, want alle andere grote browsers hebben dit al of hebben 't binnenkort.

Voor Internet Explorer 6 speelt dit niet, want die kan niet zoomen.

Internet Explorer 6

Voor de ronde hoeken zijn doorzichtige png's gebruikt. Internet Explorer 6 kan die niet weergeven. Als je het belangrijk vindt dit verouderde onding nog te ondersteunen, moet je geen png's, maar doorzichtige gifs gebruiken.

Internet Explorer 9

Bij uitzoomen (vergroten) ontstaat een heel dun schaduwlijntje gelijk boven en onder de lijn aan de boven- en aan de onderkant. Ik ga dat niet corrigeren, want Internet Explorer 9 herkent border-radius, waarmee de techniek om met behulp van afbeeldingen ronde hoeken te maken voor deze browser is verouderd (net als voor alle andere nieuwere browsers).