Modèle réduit de la Tour Eiffel au Parc France
Miniature
HTML5 a introduit un nouvel élément <figure> pour insérer
une figure avec une légende. (nous verrons plus loin une façon de faire en HTML4.)
<figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Eiffel tower">
<figcaption>Modèle réduit de
la Tour Eiffel au Parc
France Miniature</figcaption></figure>
Pour positionner une figure à droite par exemple, dans un espace
égal à 30% de la largeur des paragraphes englobants, nous pouvons
appliquer les règles suivantes:
Seules les deux premières déclarations ('float' et 'width') sont
nécessaires, les autres servent uniquement à décorer la figure.
Redimensionner une image
Il y a un problème dans notre exemple précédent car dans
certains cas la largeur de l'image peut être supérieure à celle de
la figure. Dans notre exemple, l'image fait toujours 136px de large
et la figure à une largeur égale à 30% du texte englobant. Si vous
réduisez la fenêtre, il se peut que l'image déborde de la figure
(essayez !).
Si vous connaissez la taille de toutes les images du document,
vous pouvez ajouter une largeur minimum à la figure, comme ceci:
figure {
min-width: 150px;
}
Saint Tropez et son fort au soleil couchant
Un autre façon de résoudre ce problème est de redimensionner
l'image elle-même. C'est ce que nous faisons sur l'exemple de
droite. Si vous appliquez un grand agrandissement à la fenêtre, les
images au format JPEG ne se redimensionnent pas très bien. Par
contre, si l'image est un diagramme ou un graphique au format SVG, le redimensionnement fonctionne
très bien. Voici les balises que nous avons utilisées:
<figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<figcaption>Saint Tropez et son fort
au soleil couchant</figcaption>
</figure>
Le seule modification par rapport à l'exemple précedent réside
dans la dernière règle, grace à elle, l'image est aussi large que
l'intérieur de la figure (la zone à l'intérieur de la bordure et de
la marge interne).
Positionner le titre en haut de la figure
La mer Méditerranée - Cap Ferrat
HTML autorise l'élément <figcaption> à être soit le
premier, soit le dernier élément à l'inérieur de la figure et, en
l'absence de règle CSS modifiant ce comportement, la légende sera
placée respectivement au dessus ou en dessous de la figure.
Indépendamment des éléments, vous pouvez également spécifier en
CSS si la légende doit apparaître au dessus ou en dessous de
l'image. Pour cela, il faut indiquer au navigateur que la figure
doit être formattée comme une table, avec l'image comme unique
cellule et la légende comme légende de la table. Vous pouvez
ajouter ces règles CSS aux exemples précédents:
Le style que nous utilisons dans cette page définit une bordure
grise autour de la figure. Lorsque nous utilisons un formattage de
table pour positionner la légende en haut ou en bas, nous devons
spécifier la bordure de façon différente parce que la légende est
placée à l'extérieur de la bordure de table. On règle ce problème
en definissant une bordure sur la légende elle-même:
Modèle réduit de la Tour Eiffel au Parc France Miniature
HTML4, contrairement à HTML5, ne définit pas d'élément qui
insère une figure avec une légende. Cela avait été proposé en HTML3
(cf HTML3), mais
n'avait pas été introduit en HTML4. Voici une façon de simuler cet
élément:
<div class=figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Eiffel tower">
<p>Modèle réduit de
la Tour Eiffel au Parc
France Miniature
</div>
Dans la feuille de style, vous pouvez utiliser la classe
"figure" pour formatter la figure de la façon que vous voulez. Par
exemple, les règles suivantes vous permettent de positionner la
figure sur la droite, dans une zone égale à 30% de la largeur des
paragraphes englobants:
Comme précédemment, seules les deux premières déclarations sont
nécessaires (float et width), le reste est pour faire joli !
Redimensionner les images en HTML4
Pour éviter que les images débordent de la figure et si vous
connaissez la largeur de toutes les images du document, vous pouvez
ajouter une largeur minimum à l'élémént DIV englobant, comme ceci:
div.figure {
min-width: 150px;
}
Saint Tropez et son fort au soleil couchant
Pour redimensionner une image à la largeur de la figure
elle-même, comme sur l'example de droite, vous pouvez ajouter un
attribut 'class' et une règle CSS de manière similaire à ce que
nous avons fait pour l'exemple en HTML5 précédent:
<div class=figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<p>Saint Tropez et son fort
au soleil couchant
</div>
Nous avons uniquement ajouté la dernière règle; elle rend
l'image aussi large que l'intérieur de l'élément DIV englobant (la
surface à l'intérieur de la bordure et de la marge interne).
Positionner la légende au dessus en HTML4
La mer Méditerranée - Cap Ferrat
Pour positionner la légende au dessus de l'image en HTML4,
ajoutez les règles CSS suivantes aux exemples précédents:
div.figure {
display: table;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}
Le signe '+' indique que la règle s'applique pour un élément P
qui suit un autre élément P. Ce qui signifie dans ce cas qu'elle
s'applique au second élément P de la figure, celui qui contient la
légende.
(Cette technique n'est pas supportée par tous les anciens
navigateurs d'avant 2003, surtout lorsqu'elle est combinée avec le
redimensionnement de l'image, comme dans l'exemple).
Avec cette technique, la bordure grise que nous avons définie
autour des figures sera ajoutée seulement autour de l'image elle
même. Pour l'ajouter autour de l'image et de la légende,
ajoutez les règles suivantes:
