28172 sujets

CSS et mise en forme, CSS3

Légende d'une image

Bonjour,

Je suis en train de mettre en page mon site web dont l'adresse est : http://unlimited-studio.com/befoot/article.html
Toutefois, je bute sur un élément.
J'aimerai mettre en forme mon image de sorte qu'il y ait une légende en bas de cette dernière et que l'ensemble photo + légende ne forme qu'un seul bloc.
Je vous ai fais un schéma histoire de mieux comprendre :
http://s2.noelshack.com/uploads/images/15750380724408_schma.png

J'ai essayé de suivre plusieurs tutos (notamment http://www.alsacreations.com/tuto/lire/625-Adapter-legende-largeur.html), sans succès. Soit l'image se positionne très mal, soit elle est déformée. Smiley decu

Si vous avez des idées, je suis preneur !
Merci d'avance.
Sh0ggy.
Bonjour et bienvenu sur le forum, Smiley smile

Je conseille d'englober le tout dans un div. Si tes images sont de taille fixe, tu peux affecter cette largeur à ce dernier.
Si tel n'est pas le cas, un petit display: block affecté à l'image résoudra le problème et enverra automatiquement la légende à la ligne. Smiley cligne
Merci pour vos réponses. Smiley smile

@mamax :
Voici mon code : (pour le moment j'utilise un tableau pour aligner la légende en dessous de mon image) 
<div id="legende">
<table style="width:200px;">
	<tr>
		<td><a href="http://www.footmercato.net/images/a/berbatov-se-la-joue-garcia_47645.jpg"><img class="annonce" src="http://www.footmercato.net/images/a/berbatov-se-la-joue-garcia_47645.jpg" alt="Dimitar Berbatov" title="Dimitar Berbatov"></a></td>
	</tr>
	<tr>
		<td>Légende</td>
	</tr>
</table>
</div>

Avec son CSS : 
.annonce { position:relative; width:30%; height:30%; background-color:red; border:5px solid #f2f2f2;}
.annonce:hover { border:5px solid #a3ca4a; }
#legende { float:right; }

Et voilà ce que ça me donne :
upload/28642-legende.png

@Corinne S.
Mes images ne sont pas toutes de la même taille, malheureusement. Smiley decu
Comme mon image est un float à droite, la légende vient se placer en haut de la page à gauche de l'image peu importe si on y met un display:block. Smiley decu

Merci encore.
Administrateur
Bonjour,

avec .annonce { width: X%; height: X%; } tu redimensionnes ton image ... mauvaise idée ! Smiley cligne

Le display: block; dont parle Corinne c'est bien sur l'image (ou son parent immédiat), pas sur #legende : c'est la valeur par défaut d'un div de toute façon.
Merci pour ta réponse Felipe.
Tu me conseillerais plutôt de faire un script PHP utilisant GD qui redimensionne toutes les images à hauteur de 30% de leurs tailles respectives, à la place ?
Par ailleurs, quand je passe l'image en display:block; grâce à <img src="" style="display:block;"> (donc en l'appliquant directement sur l'image), cela ne change rien Smiley decu

Ca ne serait pas plus simple d'utiliser un tableau dans ce genre de cas ? Histoire de pouvoir aligner facilement la légende sous l'image.
Bonjour,
Un bloc de liste flottant (à gauche où à droite) ne comprenant que deux éléments : image et description (légende) suffirait.
<dl>
   <dt class="image"><img src="image.jpg" alt="" /></dt>
   <dt class="légende">Commentaires pour cette image</dt>
</dl>
Ce code HTML est présentable à souhait avec CSS
Modifié par Aureance (06 Apr 2010 - 20:08)
Sujet clos
Aller à