[Résolu] Largeur <div> fixé sur taille image, non sur le texte c

Bonsoir !

Dans un flux de texte, je voudrais ajouter des images accompagnées de leur légende.
J'ai pensé faire comme ceci :

<div class="photo">
        <img src="img1.png" alt="image" /><br />
        Légende de l'image
</div>

la classe 'photo' aurait une propriétée float, bordure etc.. pour s'intégrer au mieux dans le texte.
Dans l'idée ça devrait donner ça.

Ce qui me dérange c'est quand la légende devient plus grande : voir.
L'objectif est que le <div> ne soit pas plus large que la photo, la légende devra s'adapter à cette largeur ( si besoin, s'étaler sur plusieurs lignes ).
Ce qui devrait donner ça.

Problème : A part en rajoutant manuellement des retours à la ligne dans la légende (comme dans le lien précédent), ou en spécifiant en dur la largeur du bloc avec width de telle sorte qu'elle soit à peu près celle de l'image, je ne vois pas du tout comment réaliser ça.

j'ai codé une solution en DHTML qui consiste à récupérer la taille de l'image au chargement de celle-ci, et de l'attribuer à la propriétée width du bloc.
Mais je trouve ça lourd lourd comme méthode, Et si je peux me passer du javascript...

Est-il de réaliser ça uniquement à l'aide de propriétées CSS ?
La solution DHTML est-elle la seule ?

Toute piste est la bienvenue

Merçi de votre attention.
Modifié par freecircus (29 Aug 2007 - 10:20)

Salut freecircus ,

En attendant une réponse plus satisfaisante, le code suivant devrait fonctionner :

[b]css[/b]
.photo {
	border:1px black solid;
	width:1px;
	float:left
}

[b]html[/b]
<table class="photo">
  <tr>
    <td><img src="img1.png" alt="image" /></td>
  </tr>
  <tr>
    <td>Légende de l'image </td>
  </tr>
</table>

Oui... je sais : c'est un vilain tableau de mise en page !

A+
Modifié par Heyoan (29 Aug 2007 - 02:43)

La solution m'est très satisfaisante
Est-ce si grave d'utiliser des tableaux dans ce cas là ?

merçi Heyoan, je prend !
je ne met pas tout de sutie le sujet en résolu au cas ou il y est effectivement d'autre(s) méthode(s) plus sympatique(s).
Modifié par freecircus (29 Aug 2007 - 09:30)

Bonjour,

A part donner un width égal à la largeur de l'image à ton bloc photo (je suppose que cette largeur n'est pas fixe donc de le récupérer par php) et placer ton image en display: block pour éviter le <br /> pour le passage à la ligne, je ne vois pas...
Un tableau c'est surement plus simple

a écrit :
donc de le récupérer par php

Je n'y avais pas pensé.
Dans mon cas ce n'est pas spécialement plus compliqué puisque tout est déja géré par php.
Mais d'un autre coté, l'usage de tableaux m'enlève une différence de rendu entre IE7 et les autres.. donc finalement, ça m'convient pas mal et je vais rester sur ce choix.

Merçi de votre aide