Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Laurent Carcone

Feuilles de style pour le Web Trucs & astuces CSS

Voir également l'index de tous les trucs et astuces

Dans cette page:

Ajouter des légendes

Eiffel tower

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:

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

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;
}

St. Tropez

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>

Ainsi que la feuille de style:

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

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

Cap Ferrat

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:

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

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:

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Figures et légendes en HTML4

Eiffel tower

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:

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

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;
}

St. Tropez

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>

la feuille de style associée:

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

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

Cap Ferrat

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:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}
Bert Bos, coordinateur de l'activité style
Copyright © 1994–2017 W3C®

Created 17 January 2001;
Last updated jeu. 09 nov. 2017 04:40:59 UTC

Langues

À propos des traductions