Web Style Sheets
CSS TIPS & TRUCS

AFBEELDINGEN EN ONDERSCHRIFTEN

HTML bezit geen bestanddeel om een afbeelding in te voegen met een onderschrift. Het is eens voorgesteld (zie HTML3), maar het is nooit gemaakt in HTML4. Hier volgt één manier om zo’n afbeelding bestanddeel te simuleren:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffeltoren">
  <p>Schaal model van de Eiffeltoren in Parc Mini-France
</div>

Vervolgens gebruikt u de classificatie "figure" in het stijlblad om de afbeelding naar uw wens te formatteren. Bijvoorbeeld, om de afbeelding naar rechts te laten drijven over een afstand gelijk aan 25% van de breedte van de omringende paragrafen, zullen de volgende regels het trucje doen:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

In feite zijn alleen de eerste twee verklaringen (float en width) essentieel, de rest is alleen voor decoratie.

OP SCHAAL BRENGEN VAN DE AFBEELDING

Er is hier een probleem en dat is dat de afbeelding misschien te breed zal zijn. In dit geval is de afbeelding altijd 136 px breed en de DIV is 25% van de omringende tekst. Dus indien u het raam smaller maakt, kan het misschien zijn dat de afbeelding de DIV overstroomt (probeer het!).

Als u de breedte van alle afbeeldingen in het document kent, kunt u een minimum breedte aan de DIV toevoegen, zoals onderstaand:

DIV.figure {
  min-width: 150px;
}

Een andere manier is het op schaal brengen van de afbeelding zelf. Dat is wat wij met de afbeelding rechts hebben gedaan. Zoals u misschien kunt zien zodra u het raam heel breed maakt, laten JPEG afbeeldingen zich niet goed op schaal brengen. Maar indien de afbeelding een diagram is of een grafiek in SVG formaat, werkt het op schaal brengen erg mooi. Hier is de opmaak die wij gebruikt hebben:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="Saint Tropez">
  <p>Saint Tropez en zijn fort in de avond zon
</div>

En dit is het stijlblad:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

De enige toevoeging is de laatste regel: het maakt het beeld zo breed als de binnenkant van de DIV (het gebied binnen de grens en de opvulling).

HET ONDERSCHRIFT BOVENOP PLAATSEN

U kunt zelfs het onderschrift bovenop zetten, door de browser te vertellen dat de afbeelding zou moeten worden geformatteerd naar een tabel. Voeg deze regels gewoon toe aan de style sheet van de vorige secties:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

Het '+' teken bewerkstelligt de regel een P te laten matchen die een andere P. volgt. Wat in dit geval betekent dat het overeenstemt met de tweede P van de afbeelding, degene die het onderschrift bevat.

(Deze techniek zal sommige bugs in oudere browsers aan het licht brengen, voornamelijk, zoals wat ik hier heb gedaan, in combinatie met het op schaal brengen van de afbeelding.)

FIGUREN IN XHTML

Het huidige (januari 2003) voorstel voor XHTML2 heeft een CAPTION bestanddeel, hetgeen gebruikt mag worden samen met OBJECT. Indien het voorstel geaccepteerd wordt, zal het niet langer nodig zijn om DIV en CLASS te gebruiken, maar kunt u schrijven, tenminste in XHMLT2:

<object data="eiffel.jpg">
  <caption>Schaal model van de Eiffeltoren in Parc Mini-France</caption>
</object>