Talen

Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik

Web Style Sheets CSS tips & trucs

Zie ook de index van alle tips.

Op deze pagina:

Afbeeldingen & onderschriften

Eiffeltoren

Schaalmodel van de Eiffeltoren in Parc Mini-France

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>Schaalmodel 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: 30%;
  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 30% 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 avondzon
</div>

Saint-Tropez

Saint Tropez en zijn fort in de avondzon

En dit is het stijlblad:

div.figure {
  float: right;
  width: 30%;
  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

Kaap Ferrat

De Middellandse Zee nabij Kaap Ferrat

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

<object data="eiffel.jpg">
  <caption>Schaalmodel van de
    Eiffeltoren in Parc
    Mini-France</caption>
</object>
Bert Bos, leider stijl-activiteiten
Copyright © 1994–2013 W3C®

Geschreven 17 januari 2001;
laatste update do 12 dec 2013 06:20:47 CET

Talen

Over de vertalingen