Layers upon layers

Waarschuwing: HTML for dummies ahead.

In lang vervlogen tijden deed ik dit om een beeld rechts op een pagina te zetten:

<img src="beeld.jpg" align="right">

En als er dan een caption onder moest komen, werd het dit:

<table align="right"><tr><td>
    <img src="beeld.jpg" align="right"><br>
    Dit is een beeld
</td></tr></table>

Later, met css en dingen, werd een beeld rechts iets als

<style>
.imgright { float: right; }
</style>
<img src="beeld.jpg" class="imgright">

En dan wou ik ook nog een randje rond het beeld zetten en werd mijn style iets als

<style>
.imgright { 
   float: right;
   padding: 5px;
   background-color: #fff;
   border: 1px solid #ccc;
}
</style>

Als een beeld links moest komen, werd float: right vervangen door float: left. En als een beeld gecentreerd moest worden, werd het iets in de zin van

<style>
.center border { 
   display: block;
   margin: 0 auto;
   padding: 5px;
   background-color: #fff;
   border: 1px solid #ccc;
}
</style>

Maar goed, soms moest een beeld (een screen shot bijvoorbeeld) geen randje krijgen, dus werd dat allemaal ontdubbeld naar

<style>
.center bordernoborder { 
   display: block;
   margin: 0 auto;
}
</style>

…waardoor ik uiteindelijk soms monstrositeiten als een dergelijke lijst met styles kreeg:

.imgleft
.imgleftnoborder
.imgright
.imgrightnoborder
.center border
.center bordernoborder

…en dan nog eens daarbij allerlei mogelijke variaties met captions links aligned onder het beeld, of boven het beeld, en rechts of gecentreerd, enfin, waanzin.

Uiteraard weet ik nu wel beter, maar je ziet dergelijke nonsens toch wel her en der nog staan.

Omdat een mens nooit te oud is om te leren: zo doe ik het voor het moment. Ik heb de volgende stijlen:

div.img {
   text-align: center;
   font-size: .8em;
   padding: 0;
   margin: 0;
   color: #999;
}

Dit is de algemene stijl voor images. Ik steek ze voor het moment altijd in een <div>; als ik wat moeite zou doen, zou ik de <div> er DOM-gewijs via javascript kunnen laten rondbouwen, en dan de caption uit één of ander attribuut van het <img> kunnen halen, maar da’s voor het moment (nog) niet aan de orde.

Ik kies ervoor de captions altijd te centreren, iets kleiner en lichter te zetten dan de tekst van de pagina.

div.img img {
   display: block;
   padding: 3px;
   background-color: #fff;
   border: 1px solid #ccc;
}

Ik zet er een drie pixel breed wit kadertje rond de beelden in de <div>, met een lichtgrijs lijntje daarrond. De beelden worden als paragrafen getoond (display: block)—dat spaart me een <br /> of iets dergelijks uit vóór een eventuele caption. Wellicht kan dit beter voor blinden en slechtzienden, maar ik ga er even van uit dat het voor het moemnt voldoende is dat ik een alt-attribuut voorzie voor elk beeld.

Voor de plaatsing van het beeld heb ik drie verschillende regeltjes, die op de omvattende <div> toegepast worden:

div.right { float: right; }
div.left { float: left; }
div.center { display: block; margin 0 auto; }

En tenslotten één bijkomend regeltje voor het <img> zelf als ik geen border wil tonen:

div.noborder img { border: 0; }

In het gebruik wordt dat dan iets als

<div class="img right noborder">
   <img src="beeld.jpg" />
   Dit is een beeld dat rechts staat zonder
   rand errond
</div>

of

<div class="img center">
   <img src="beeld.jpg" />
   Dit is een beeld dat gecentreerd staat
   met een randje errond
</div>

Kan het beter? Wellicht. Maar zoals de man zei: Works for me.