Légende sous une image

[Nullette]

Bonjour,

me revoici avec ne autre question pour le placement d'un texte sous une image.

Sous quelques images j'ai mis une légende. Je n'ai pas su mettre un code dans la feuille de style car les images avec légende n'ont pas la même dimension et sont parfois alignées à droite, parfois à gauche.

J'ai donc mis un style interne :

<p style="float: right; width: 260px; margin-left: 1em; margin-bottom: 1em;"><img src="maison.jpg" alt="une belle maison" width="250" height="221" /><br />
	  <span class="petit_gris">Voici la jolie maison dans la montagne.</span>

(La classe "petit_gris" est la taille et la couleur de la police du texte de la légende).

Je voudrais qu'il y est un espace entre le bas de l'image et le texte. Si j'agis sur le margin-top, l'ensemble se déplace, puisque tout est dans un paragraphe ...

Peut-être quelqu'un a une idée.

[steph13]

Et avec un padding ? Tu as essayé ?

Sinon, pour ma part, quand je dois faire une photo légendée :

Je crée un div gris foncé. Si la photo fais 100 px, je le fais de 102px (cela me donne un cadre de 1px autoure de la photo).

Dans ce div je place la photo, et en dessous, toujours dans le dic, je place la légende.

Voici les codes, à adapter selon tes besoins.

Le css :

.imgactu{
	float: left;
	margin: 5px 5px 5px 0;
	background: #333;
}
.txtphoto{
	margin:0 0 0 3px;
	padding:0;
	color:#ccc;
	font-size:10px;
	font-style:italic;
}

Et le code HTML

<div class="imgactu">
	 <img src="image.jpg'" alt="Mon image"/><span class="txtphoto">Crédit photo</span>
</div>

[Djolhan]

Tu pouvais aussi faire de la manière suivante :

.imgactu {
	float: left;
	margin: 5px 5px 5px 0;
	background: #333;
	width: 260px;
}
.imgactu p {
	font-size: 0.7em;
	color: #CCC;
	margin-top: 7px;
	margin-bottom: 7px;
}

<div class="imgactu">
	 <img src="image.jpg'" alt="Mon image" />
	 <p>Crédit photo</p>
</div>

En fait, il y a beaucoup de solutions différentes à ton problème, après, il reste a savoir avec laquelle tu es le plus à l'aise !

Petit rappel, en XHTML, les balises widht et height sont dépréciés . Tu n'en a pas besoin dans ton code img ni ailleurs d'ailleurs

[Nullette]

J'ai essayé en vitesse le code donné par steph13. J'ai quelquechose de faux, car le texte de la légende s'affiche à droite (je le voudrais au dessous).

En fin de journée j'essaierai le code de JokoZetla.

Je vous dirai et, attendant ... merci

[...]

Petit rappel, en XHTML, les balises widht et height sont dépréciés . Tu n'en a pas besoin dans ton code img ni ailleurs d'ailleurs

Ah bon ?

[Dadou]

Petit rappel, en XHTML, les balises widht et height sont dépréciés . Tu n'en a pas besoin dans ton code img ni ailleurs d'ailleurs

Faux, c'est valable pour nombre de balise (div, p, hx) mais certainement pas pour la balise img, et justement, les dimensions de l'image doivent être indiqué dans la balise.

La dtd le prouve

  <xs:element name="img">
	<xs:complexType>
	  <xs:attributeGroup ref="attrs"/>
	  <xs:attribute name="src" use="required" type="URI"/>
	  <xs:attribute name="alt" use="required" type="Text"/>
	  <xs:attribute name="longdesc" type="URI"/>
	  <xs:attribute name="height" type="Length"/>
	  <xs:attribute name="width" type="Length"/>
	  <xs:attribute name="usemap" type="URI">
  <xs:annotation>

[steph13]

J'ai essayé en vitesse le code donné par steph13. J'ai quelquechose de faux, car le texte de la légende s'affiche à droite (je le voudrais au dessous).

Sur mon div, j'ai mix 260px car c'est la taille des photos utilisées sur le site de mon client.

Fait les modifications (si tu ne les a pas déjà faites) en fonction de la taille de tes images.

En cas, postes ton code ici que l'on regarde cela.

Bon courage.

[Djolhan]

Apres, une petite recherche, je me suis effectivement trompé sur ces 2 attribus. Ils sont dépréciés mais pas pour la balise img

Parcontre, ils ne sont pas forcément obligatoire, après, c'est une question de choix. Si toutes tes images font la même dimensions, ca ne gênera pas ta mises en page. Pareil, si ta page est légère, on peut aussi partir du principe que ca se chargera suffisamment vite pour ne pas gêner la mise en page et par conséquent la lecture.

[captain_torche]

Dadou, la lecture de la DTD ne semble prouver que l'obligation de préciser les attributs "src" et "alt". Les autres, dont la hauteur et la largeur, sont facultatifs.

[Djolhan]

D'ailleurs, on peut retrouver une bonne discussion la dessus sur le hub:

http://www.webmaster-hub.com/index.php?showtopic=326

Au final, je retiens cette phrase:

Pour éviter toute ambiguïté : mon propos n'est pas de dire "il faut utiliser les attributs width et height", mais de dire : "quoi qu'on en dise, rien ne vous empêche de les utiliser, et ils ont leur utilité"

[Dadou]

Dadou, la lecture de la DTD ne semble prouver que l'obligation de préciser les attributs "src" et "alt". Les autres, dont la hauteur et la largeur, sont facultatifs.

Oui la DTD indique bien qu'ils sont facultatif (mais non déprécié), je n'aurais pas du écrire "doit" mais, il est recommandé de les utiliser ne serait ce pour que le navigateur prépare la place en attendant le chargement de cette dernière

[Nullette]

Je n'y arrive pas :-(

J'ai utilisé le code de steph13

.imgactu{
	float: left;
	margin: 5px 5px 5px 0;
	background: #333;
}
.txtphoto{
	margin:0 0 0 3px;
	padding:0;
	color:#ccc;
	font-size:10px;
	font-style:italic;
	}

Html

<div class="imgactu">
	 <img src="image.jpg'" alt="Mon image"/><span class="txtphoto">Crédit photo</span>
</div>

Je ne peux pas utiliser le code proposé par JokoZetla qui indique la largeur, car j'ai plusieurs images de dimensions différentes.

Ma div prend la largeur de la phrase qui sert de légende. Que je la mette dans un paragraphe ou dans <span>

J'ai essayé en html :

<div class="imgactu" width="202px">

Mais ça ne fonctionne pas (peut-être qu'il faut l'indiquer autrement ...?

Quelques minutes plus tard ...

J'ai mis en html

< div style="width:202px; height:268px" class="imgactu">

Je crois que je suis sur la bonne voie.

[Djolhan]

Enleve le width: 260px; dans ce cas, ce n'est pas obligatoire, j'ai cru que tes images avaient cette largeur

[Nullette]

Je ne sais plus où j'en suis avec les margin, padding, etc ...

Voici mon code :

.imgactu{
	float: left;
	background: #fff;
	border: 1px solid #999;
	padding:5px;
   margin-right: 1em; margin-bottom: 1em;}

	.petit_gris{
  font-size: 0.85em;
  line-height: 1.2em;
  color:#666666;
  }

(J'ai repris la classe petit_gris que j'avais déjà)

en html

<div style="width:200px;" class="imgactu"><img src="bellemaison.jpg" alt="Mon image" width="200" height="266" />
		<p class="petit_gris">
	  Les peintures murales sont magnifiques.</p>
	  </div

J'ai mis la div à la même dimension que l'image.

Je crois que cela fonctionne. J'ai testé Firefox et IE 6.

Maintenant je dois faire un autre code css pour les images à droite.

[broadcastor]

Tu pourrais trouver quelque chose sur Alsacréation qui vient de sortir un tuto précisement sur ce thème http://css.alsacreations.com/Faire-une-mis...legende-largeur

[Nullette]

Merci.

Je vais lire tranquillement.

Je viens de mettre mon site (refait) en ligne et je constate d'autres problèmes ...