Skip links en inhoudsopgave

Laatst aangepast: 22 november juni 2011

Pagina met afbeelding, beschrijving en prijs van gereedschappen

Korte omschrijving

Lijst met gereedschappen. Van elk gereedschap zijn een afbeelding, omschrijving, prijs en soms nog 'n toevoeging aanwezig.

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

De afbeeldingen zijn afkomstig van wpclipart.com.

Zonder css, zoals veel spraakbrowsers en dergelijke de pagina zien, wordt gewoon de tekst weergegeven. Hierbij staat de naam van het artikel vooraan, gevolgd door de rest van de tekst met als laatste de prijs. Als afbeeldingen ook uit staan, wordt nog steeds de tekst op deze manier weergegeven. Bij deze lay-out ontstaan dus geen extra problemen met betrekking tot toegankelijkheid.

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

Deze pagina is in feite één grote verzameling definitielijsten (<dl>). Elk stuk gereedschap heeft een eigen lijst. De 'data term' (<dt>) is de naam van het gereedschap. Bij elke <dt> horen meerdere <dd>'s (dd = data definition): een afbeelding, een beschrijving en de prijs. Samen vormen die een beschrijving van het betreffende stuk gereedschap.

Het lijkt op het eerste oog misschien vreemd om een <dl> te gebruiken, maar in de specificatie van html 4.01 wordt als voorbeeld van het gebruik van een <dl> een dialoog tussen twee mensen gegeven. Volgens w3c is er dus kennelijk geen enkel bezwaar tegen een ruimer gebruik van de <dl> dan alleen voor 'n soort woordenboek.

En in feite gaat het hier ook om definities: het gereedschap wordt gedefinieerd met behulp van 'n aantal <dd>'s, waaronder 'n <dd> die alleen maar 'n afbeelding bevat. 'n Afbeelding die hier wordt gebruikt om, samen met de tekst, het stuk gereedschap te definiëren.

Een definitielijst is feitelijk heel handig hiervoor, omdat je meerdere <dd>'s mag gebruiken bij dezelfde <dt>. Daardoor krijg je ook zonder css 'n redelijk samenhangende lay-out.

Met behulp van css worden de verschillende onderdelen op de juiste plaats gezet, wordt de juiste lettergrootte ingesteld, enz. Allemaal niet zo heel bijzonder. Het belangrijkste is dat het ook zonder css goed toegankelijk is.

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

Donkergrijs als kleur voor de tekst en dergelijke.

background: #fefffc url(047-pics/bg.jpg) repeat-x;

De achtergrondafbeelding is 'n plaatje van 1 px breed en 1000 px hoog. In de hoogte zal het dus vrijwel elk browservenster volledig bestrijken. De kleur van het plaatje verloopt van donkerder grijs naar lichtgrijs.

Voor het geval het plaatje toch niet de volle hoogte van het venster bestrijkt, geef ik 'n achtergrondkleur die hetzelfde is als de onderkant van de achtergrondafbeelding. De onderkant van de afbeelding gaat dan naadloos over in de achtergrondkleur.

Door een plaatje van maar 1 px breed te nemen, kan het heel klein zijn en dus snel worden geladen. Door het te herhalen wordt toch het hele browservenster gevuld. Het moet alleen in horizontale richting worden herhaald.

div#content

De div met id="content". De div waar alles in staat.

width: 770px;

Deze breedte past ook nog zonder scrollen op 'n scherm van 800 x 600. Ik neem de breedte iets minder dan 800 px, zodat er ook nog ruimte is voor scrollbar en dergelijke.

margin: 20px auto;

Omdat alleen de marge aan boven- en rechterkant is opgegeven, krijgen onder- en linkermarge dezelfde maat. Hier staat dus eigenlijk 20px auto 20px auto in de volgorde boven - rechts - onder - links. Boven en onder 20 px marge, links en rechts auto oftewel evenveel, dus deze div (en dus de hele pagina) staat horizontaal gecentreerd. Dit werkt alleen maar als het te centreren element 'n breedte heeft.

h1 border: solid #616161 1px; border-bottom: 0;

Grijze rand rondom de titel. Onderaan niet, want de >dl>'s hebben 'n border aan de bovenkant. De border van de bovenste <dl> zou tegen de onderkant van de border van de kopregel aankomen, waardoor die aan de onderkant te dik zou worden.

margin: 0;

Van zichzelf heeft 'n <h1> 'n marge aan boven- en onderkant. Dat komt me hier niet goed uit.

padding: 5px;

Maar ik wil wel 'n kleine afstand tussen tekst van en rand om de kopregel. Ik kan geen margin gebruiken, omdat de border niet doorloopt rondom 'n marge en er dan dus gaten in de border zouden vallen. Om de padding loopt hij wel gewoon door.

text-align: center;

Tekst van de kopregel horizontaal centreren.

Een kopregel neemt automatisch de breedte van het ouder-element aan (hier div#content). Vandaar dat de border even breed is als de pagina. Met text-align worden alleen de inline-elementen binnen de <h1> gecentreerd. Dat is hier alleen de tekst.

div#content dl

Alle definitielijsten binnen de div met id="content". Elk stuk gereedschap heeft 'n eigen definitielijst.

position: relative;

Om te kunnen positioneren ten opzichte van de <dl>, moet ik deze 'n positie geven, zelfs als ik daar verder niets bij invul. Nu kan ik kinderen van de <dl> positioneren ten opzichte van de <dl>.

float: left;

Een <dl> is een blok-element. Een blok-element wordt even hoog als de inhoud. Maar niet altijd. Dit geldt namelijk niet als de inhoud van het blok-element wordt gefloat, zoals hier het geval is. In zo'n situatie wordt het blok-element alleen even hoog als de inhoud als het zelf ook wordt gefloat.

Vertaald naar deze situatie:

De <dl> is het blok-element. Het grootste deel van de inhoud daarvan wordt gefloat en heeft dus geen invloed op de hoogte van de <dl>. De prijs heeft een absolute positie en heeft dus ook geen invloed. Kortom: er staat niets in de <dl> wat invloed heeft op de hoogte. Oftewel: de <dl> krijgt gewoon helemaal geen hoogte. Noppes, niets.

De enige 'hoogte' die de <dl> krijgt, bestaat uit de border van 3 px aan de bovenkant van de <dl> en de 10 px marge aan de onderkant (beide worden hieronder opgegeven). Samen 13 px.

De bovenste <dl> wordt dus niet 'hoger' dan 13 px. De tweede <dl> komt hier gewoon tegenaan te staan, ook weer 13 px hoog, enz. Oftewel: alle dikke grijze borders van de <dl>'s komen op 'n kluitje te staan.

Om te zorgen dat de <dl>'s even hoog worden als de inhoud, zodat ze niet op 'n kluitje komen te staan, moet ik ze zelf ook floaten.

Als ik de <dl>'s naar links float, worden ze eerst zo hoog mogelijk gezet en dan naar links. En omdat er geen twee <dl>'s naast elkaar passen, komen ze dus keurig onder elkaar te staan. Precies de bedoeling.

Als dit stuk tekst onduidelijk is, haal dan even de float: left; bij de <dl> weg en je ziet gelijk wat ik bedoel.

width: 770px;

Zonder deze breedte geeft Opera elke <dl> 'n andere, ogenschijnlijk willekeurige, breedte. En 't stoort de andere browsers niet, dus...

(Opmerking 13 december 2010: inmiddels is dit niet meer nodig voor Opera. Maar het kan geen kwaad, en mogelijk levert het weghalen hiervan problemen op in Internet Explorer 6, waar ik niet meer op test. Dus laat ik het gewoon staan.)

margin: 0 0 10px;

Hoe een definitielijst precies wordt weergegeven, wordt niet precies omschreven in de specificatie. Om te zorgen dat het in alle browsers hetzelfde is, moet je dus zelf marges en dergelijke instellen.

Omdat er geen marge voor links is opgegeven, krijgt die automatisch dezelfde marge als rechts. Hier staat dus eigenlijk 0 0 10px 0 in de volgorde boven - rechts - onder - links. Kleine afstand tussen elke <dl>.

border-top: #616161 solid 3px;

Aan de bovenkant van elke <dl> 'n dikke grijze streep.

div#content dt

Elke definition term (het te omschrijven begrip) binnen de div met id="content". Binnen deze <dt> staat de naam van het betreffende stuk gereedschap.

float: right;

Zo hoog mogelijk zetten en dan zover mogelijk naar rechts.

width: 30%;

Vrijwel alles binnen de <dl> wordt gefloat. Floats moeten naast elkaar passen, anders komen ze onder elkaar te staan. Als ik voor de breedte iets als em gebruik, wordt het al snel te breed als ik de lettergrootte verander. Waardoor de floats niet meer naast elkaar passen en de hele lay-out naar de filistijnen gaat.

De 30 % breedte geldt ten opzichte van het ouder-element, hier de <dl>. Ook bij een andere lettergrootte blijft de verhouding gewoon hetzelfde, en zullen de floats dus naast elkaar blijven staan.

Om het juiste percentage te bepalen heb ik urenlang zeer ingewikkelde hogere wiskunde moeten toepassen. Zo hoog dat ik ervan ging vliegen. Je kunt 't ook bepalen door 't gewoon uit te proberen. Dat duurt ongeveer vijftig seconden en je houdt je voeten op de grond.

font-size: 1.5em;

Grote letter voor de naam. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

letter-spacing: 1px;

Letters iets verder uit elkaar dan standaard, dat geeft als het ware wat meer ruimte aan de naam.

text-align: right;

Zoals altijd wordt de tekst gewoon links neergezet. Maar in dit geval wil ik de rechterkant van de tekst uitlijnen met de rechterkant van de <dl>.

De tekst is in dit geval de naam van het gereedschap. En omdat de <dt> waar die naam in staat 30% breed is, is er nog ruimte over aan de linkerkant van de tekst. Bij het vergroten van de lettergrootte wordt die eerst gevuld. Als de tekst daar niet meer in past, komt hij rechts van de <dl> te staan. Maar dat gebeurt pas bij 'n heel forse vergroting van de lettergrootte.

div#content span.ondertitel

De spans met class="ondertitel" binnen de div met id="content". Onder sommige namen staat een kleine toevoeging. Die staat in deze spans.

float: right;

Zo hoog mogelijk neerzetten en dan zover mogelijk naar rechts.

font-size: 0.5em;

Kleine letter. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

letter-spacing: 0;

Hierboven heb ik de letter-spacing van de <dt> vergroot. Dat geldt dus ook voor deze span, want die staat binnen die <dt>. Hier zet ik voor de toevoegingen de letter-spacing weer terug naar de standaardwaarde.

div#content dd.pic

De <dd>'s met class="pic" binnen de div met id="content". <dd> staat voor definition description: de omschrijving die hoort bij de <dt>. Binnen de <dd>'s met class="pic" staan de afbeeldingen.

float: left;

Zo hoog mogelijk neerzetten en dan zover mogelijk naar links.

width: 13%;

Vrijwel alles binnen de <dl> wordt gefloat. Floats moeten naast elkaar passen, anders komen ze onder elkaar te staan. Als ik voor de breedte iets als em gebruik, wordt het al snel te breed als ik de lettergrootte verander. Waardoor de floats niet meer naast elkaar passen en de hele lay-out naar de filistijnen gaat.

De 13 % breedte geldt ten opzichte van het ouder-element, hier de <dl>. Ook bij een andere lettergrootte blijft de verhouding gewoon hetzelfde, en zullen de floats dus naast elkaar blijven staan.

Aan het percentage ben ik gekomen door het gewoon uit te proberen.

margin: 0;

Een <dd> springt in ten opzichte van de <dt>. Hoewel de specificatie van html 4.01 hier vaag over is, schijnen alle browsers dit te doen. Hier kan ik dat inspringen niet gebruiken, dus ik haal de marge weg.

div#content dd.pic img

De afbeeldingen binnen een <dd> met class="pic" die weer binnen de div met id="content" staat. Dit zijn de afbeeldingen van de gereedschappen.

border: white solid 3px;

Brede witte rand. De achtergrond van alle gereedschappen is al wit, maar ze hebben niet allemaal 'n witte rand rondom. Nu wel.

div#content dd.tekst

De <dd>'s met class="tekst" binnen de div met id="content". <dd> staat voor definition description: de omschrijving die hoort bij de <dt>. Binnen de <dd>'s met class="tekst" staat de omschrijving van het gereedschap, de tekst.

float: left;

Zo hoog mogelijk neerzetten en dan zover mogelijk naar links. Hierdoor komen ze gelijk tegen de <dd>'s met class="pic", de <dd>'s met de afbeeldingen van de gereedschappen, aan te staan. En omdat die allemaal 'n breedte van 13% hebben, staan de teksten dus netjes uitgelijnd onder elkaar.

width: 51%;

Vrijwel alles binnen de <dl> wordt gefloat. Floats moeten naast elkaar passen, anders komen ze onder elkaar te staan. Als ik voor de breedte iets als em gebruik, wordt het al snel te breed als ik de lettergrootte verander. Waardoor de floats niet meer naast elkaar passen en de hele lay-out naar de filistijnen gaat.

De 51 % breedte geldt ten opzichte van het ouder-element, hier de <dl>. Ook bij een andere lettergrootte blijft de verhouding gewoon hetzelfde, en zullen de floats dus naast elkaar blijven staan.

Aan het percentage ben ik gekomen door het gewoon uit te proberen.

padding: 2px 0 0;

Omdat links niets is ingevuld, krijgt dit automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 2px 0 0 0 in de volgorde boven - rechts - onder - links. 'n Kleine afstand tussen de tekst en de bovenkant van dd.tekst, anders zou de tekst tegen de dikke grijze rand aan de bovenkant van de definitielijsten komen te staan.

div#content p.extra

De paragrafen met class="extra" binnen de div met id="content". Onder sommige tekst staat in kleine letters nog 'n toevoeging, Die staat in deze paragraaf.

margin: 3px 0 0;

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

Van zichzelf heeft 'n paragraaf aan boven- en onderkant 'n marge. De marge aan de onderkant wil ik helemaal niet, en de marge aan de bovenkant maak ik kleiner dan de standaardmarge.

font-size: 0.7em;

Kleinere letter. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

p.extra strong

De tags <strong> binnen de paragrafen met class="extra". Feitelijk de inhoud van die tags.

<strong> wordt gebruikt om iets te benadrukken.

In de specificatie is niet strikt omschreven hoe dit moet worden weergegeven. De meeste browsers (allemaal?) geven het als vet weer. Maar er is niets op tegen om dit zelf te veranderen. In dit geval vind ik vet niet mooi.

color: #960;

Bij <body> heb ik de letterkleur veranderd in grijs. Hier geef ik hem 'n afwijkende kleur, zodat hij beter opvalt.

font-weight: normal;

Geen vet, gewoon 'n normale letter.

letter-spacing: 2px;

Letters verder uit elkaar, zodat het woord beter opvalt.

div#content dd.prijs

De <dd>'s met class="prijs" binnen de div met id="content". <dd> staat voor definition description: de omschrijving die hoort bij de <dt>. Binnen de <dd>'s met class="prijs" staat de prijs.

position: absolute;

Om de prijs op 'n bepaalde plaats neer te kunnen zetten.

bottom: 0; right: 0;

Het eerste ouder-element met een positie is de <dl>. Er wordt dus gepositioneerd ten opzichte van de <dl>. Helemaal rechts onderaan neerzetten.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#content dd.pic {width: 17%;} div#content dd.tekst {width: 50%; margin-left: 8px;} </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 dd.pic

De <dd>'s met class="pic" binnen de div met id="content". <dd> staat voor definition description: de omschrijving die hoort bij de <dt>. Binnen de <dd>'s met class="pic" staan de afbeeldingen.

width: 17%;

Bij alle andere browsers moet de breedte 13% zijn, maar bij Internet Explorer 6 lijkt de plaatsing van de teksten dan heel sterk op het parkeerterrein van de plaatselijke alcoholistenvereniging: alles schots en scheef. Hiermee staat alles goed.

Waarom dit gebeurt, weet ik niet, en dat vraag ik me meestal ook maar niet meer af bij dit wanproduct. Er is 'n bekende bug waarin Internet Explorer 6 de marge verdubbelt als je naar links float binnen 'n naar links gefloate ouder. Maar hier is geen marge, dus die kan 't niet zijn.

div#content dd.tekst

De <dd>'s met class="tekst" binnen de div met id="content".

width: 50%; margin-left: 8px;

Omdat de breedte van dd.pic 3 % meer is, zou je denken dat de breedte van deze <dd> dus 3 % minder moet zijn. Niet dus. 1% minder. Bovendien is er ook nog 'n marge nodig om de hele handel netjes onder elkaar te krijgen. De totale breedte bij Internet Explorer 6 is dus veel meer dan bij alle andere browsers, maar het ziet er hetzelfde uit. Tja, geld kan verdampen, dus waarom ruimte niet?

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

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

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 6, 7, 8 en 9 in de resoluties 800x600, 1024x768, 1280x1024 en 1440x900. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768, 1280x1024 en 1440x900 is ook in- en uitzoomen en een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Eventuele problemen met betrekking tot zoomen en lettergrootte staan bij Bekende problemen.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, Jaws en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. Jaws is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan bij Opmerkingen.

Dit voorbeeld is niet getest op geschiktheid voor mobiele apparaten (hier worden geen laptop/notebook/netbook en dergelijke mee bedoeld, want die gedragen zich als een gewone desktopcomputer). Er wordt in veel voorbeelden css en/of html gebruikt, waar niet elk mobiel apparaat mee uit de voeten zal kunnen. En lang niet alles is geschikt voor schermen met een breedte van minder dan 800 px.

Dingen die problemen zouden kunnen opleveren, zijn onder andere een te grote breedte, het gebruik van (te veel) afbeeldingen en/of css en html die niet (volledig) wordt ondersteund, zoals :hover, float en position.

Onder Opmerkingen staat mogelijk nog wat meer over de geschiktheid van dit voorbeeld voor mobiele apparaten.

(Terzijde: de site zelf is zeker niet geschikt voor kleine mobieltjes. Dat gaat ook niet veranderen. Ik kan me namelijk niet voorstellen dat iemand zo masochistisch is 'n uitleg van tientallen schermen op 'n klein mobieltje te gaan lezen. Voor de site zelf is een minimale breedte van 800 px vereist.)

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

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

4 november 2008:

Nieuw opgenomen.

10 april 2009:

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

Bekende problemen

Geen.