Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Auteur
Boudha
#
Citer
18 Posts
Bonjour,

Je rencontre un problème avec l'utilisation des balises <figcaption> et <figure>.

Je souhaite que la largeur de <figcaption> soit ajustée à la largeur de l'image, et non pas à la largeur de <figure> comme elle l'est par défaut. Seule style appliqué :

figcaption { text-align: left; }

Lorsque l'image remplit la largeur de <figure> (occupant toute la largeur de son parent), pas de problème : la légende est bien alignée à gauche par rapport à <figure>, et donc bien alignée sous l'image.
Mais lorsque l'image n'occupe pas toute la largeur de <figure> (typiquement si la hauteur de l'image est supérieure à sa largeur), alors dans ce cas la légende est toujours alignée à gauche par rapport à <figure>, et donc n'est pas aligné sous l'image.

Pour bien faire, il faudrait que la largeur de <figure> s'adapte en fonction de la largeur de l'image. J'ai retourné le problème dans tous les sens mais rien ne semble fonctionner.

Merci par avance pour vos indications/solutions cligne

Louis.
Modifié par Boudha (06 Feb 2012 - 11:26)

^
fvsch
#
Citer
20100 Posts
Bonjour,

Il me semble que ce tutoriel répond très exactement à ta demande:
Adapter une légende à la largeur de l'image.

Il est un poil vieux mais:
- La technique à base de display:table reste correcte à ma connaissance.
- Le support d'IE6 c'est fini, et celui d'IE7 n'est pas critique, donc pas besoin d'utiliser un tableau de mise en page comme suggéré en solution de secours.
- Le tutoriel utilise des éléments DIV et P, mais ça s'adapte sans souci avec FIGURE et FIGCAPTION.

http://fvsch.com 
^
Boudha
#
Citer
18 Posts
Merci pour ta réponse, mais malheureusement ça ne fonctionne pas (comme je le voudrais murf ). Je vais préciser un peu plus.

Voici mon code HTML :

<div id="main">
<figure>
<img src="image.jpg" alt="Description image" >
<figcaption>Une image</figcaption>
</figure>
</div>

Et voila mon code CSS dans le cas où la hauteur de l'image est supérieure à sa largeur :

#main { width: 30%; }

figure {
	height: 50%; /* Je préfère fixer la hauteur de <figure> qui dépendra de la hauteur de la page */
	width: auto;
	display: table;
}

figure img {
	height: 100%; /* Pour que l'image remplisse, en hauteur, <figure> */
	max-width: 100%; /* Evite que l'image sorte de #main */
}

figcaption { text-align: left; }

Le seul problème est quand je rétrécie la hauteur (sans toucher à la largeur) de la fenêtre de mon navigateur. La largeur de <figure> ne s'ajuste pas, du coup <figcpation> n'est plus aligné avec l'image.

Petite image du résultat :
previews/2218-Screenshot2.png
Modifié par Boudha (06 Feb 2012 - 17:58)

^
fvsch
#
Citer
20100 Posts
Tu n'as pas appliqué la technique donnée dans l'article (qui nécessite de fixer une largeur faible pour l'élément FIGURE, par exemple à 200px, en partant du principe que l'image contenue élargira cet élément puisqu'il est en display:table). C'est normal?

À vrai dire je ne sais pas comment cette technique se comporte quand par ailleurs on a fixé la hauteur de FIGURE en fonction de la hauteur de son parent. Je dirai juste que les hauteurs fixes, en règle générale c'est un truc à éviter en webdesign, mais ça va dépendre de ton contenu et de ton design.

http://fvsch.com 
^