Titre sur image

Bonjour,
c'est tout bête, je n'arrive pas.
J'ai une image en float, de façon à ce que le texte tourne autour. Jusque-là, ça fonctionne. Je veux mettre un titre sur l'image avec :

<p><img src="Images/Italie-c.png" width="381" height="254" alt="Beau pays" loading="lazy" class="align-left-1"></p>
<figcaption>
 <p>Italie</p>
 </figcaption>

et le css pour float :

img.align-left-1 {
	float:left;
	margin-right:3em;
	margin-top:2em;
	margin-bottom:2em;}

i
Rien à faire, le titre de figcaption ne veut pas se mettre au-dessus de l'image, il reste à droite, au-dessus du texte qui entoure l'image.
Comment se fait-il ?

Raphael a écrit :

- Je ne crois pas que `p` soit autorisé dans un figure.

Bonjour, si cela est autorisé, pour autant que la règle du figcaption soit respectée à savoir que celui-ci doit être le premier ou dernier élément enfant.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/figure#po%C3%A8me

>> Je veux mettre un titre sur l'image
Un titre c'est avec les balises de titre soit <h1> à <h6>. Pour la balise <figcaption> c'est une légende à l'image.
PS : Tu peux placer un titre dans un <figcaption>
Modifié par casper2 (06 Apr 2025 - 17:16)

D'accord sur titre, mauvais mot de ma part, c'est bien d'une légende qu'il s'agit.
@Raphael
Oui, figure entoure bien l'ensemble. J'ai tant essayé de versions que j'avais oublié de le remettre au moment de poster.
<figure> présent et fermé par </figure> ne règle pourtant pas le problème.

Rien ne t'oblige à appliquer ton position absolute en mobile, tu peux le déclencher via une media query.

Regarde comment s'affiche le figcaption sur cette page : https://www.alsacreations.fr/prestations/webdesign (l'image de réunion vers le milieu de page)

Raphael a écrit :
Rien ne t'oblige à appliquer ton position absolute en mobile, tu peux le déclencher via une media query.

Regarde comment s'affiche le figcaption sur cette page : https://www.alsacreations.fr/prestations/webdesign (l'image de réunion vers le milieu de page)

En effet, j'ai supprimé le css de figure en mode mobile. Le titre se retrouve maintenant en-dessous de l'image, mais au moins, il suit parfaitement le dimensionnement de l'écran.
Il me reste à le refaire passer au-dessus de l'image, en mobile.

casper2 a écrit :
Bonsoir, si tu utilises le positionnement absolute un parent ou ancêtre doit être en position relative.
Pour positionner un élément qui utilise la propriété position utilise les propriétés top, bottom, left, right.
Un exemple http://www.frogweb.fr/demos/figure-hover.html

Vu, mais je ne veux pas qu'il apparaisse au hover.
Merci pour les top bottom, j'avais oublié.

>> Vu, mais je ne veux pas qu'il apparaisse au hover.
Dans ce cas tu n'utilises pas le hover. Je t'ai donné un exemple qui se trouve sur le web, tu l'adapte selon tes besoins.

(Je ne veux pas avoir l'air d'insister, mais le lien que j'ai donné en exemple semble faire exactement ce que tu souhaites, non ?)

Oui oui, mais c'est dimanche soir