Jump to content
Sign in to follow this  
Nullette

Légende sous une image

Rate this topic

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

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 :P

Ah bon ?

Share this post


Link to post
Share on other sites
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 :P

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>

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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é"

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Merci.

Je vais lire tranquillement.

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...