Web Style Sheets CSS tips & trucs
Zie ook de index van alle tips.
Op deze pagina:
Afbeeldingen & 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>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>
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
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–2021 W3C® Privacy
Geschreven 17 januari 2001;
laatste update wo 06 jan 2021 05:40:49 UTC
