| Auteur | |
|---|---|
| Boudha | |
| 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é :
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 Louis. Modifié par Boudha (06 Feb 2012 - 11:26) |
| fvsch | |
| 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. |
| Boudha | |
| 18 Posts |
Merci pour ta réponse, mais malheureusement ça ne fonctionne pas (comme je le voudrais ). Je vais préciser un peu plus. Voici mon code HTML :
Et voila mon code CSS dans le cas où la hauteur de l'image est supérieure à sa largeur :
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 : Modifié par Boudha (06 Feb 2012 - 17:58) |
| fvsch | |
| 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. |