Style d'image

Bonjour !

Je souhaiterais rendre l'effet suivant via css :

Une image (taille variable) est sur fond blanc et a une bordure à 10px en haut, à droite et à gauche.
Sous l'image, à 10px, est situé un texte (légende) feré à droite.
10px plus bas, la bordure ferme le tout.

Donc en gros, pour simplifier, c'est une image légendée dans un cadre. j'espère que c'est compréhensible.

Mon problème : j'arrive à tout faire sauf adapter automatiquement la largeur du cadre à mon image. La largeur de celle ci variant, je ne peux pas utiliser de width. Et si je prends un div cela s'étale sur tout la largeur disponible... Y a-t-il une solution ?

Merci d'avance.
Modifié par jabric (19 Apr 2005 - 05:17)

Bonjour jabric !

jabric a écrit :

Y a-t-il une solution ?

hum...

À mon avis, non. (J'espère bien sûr que j'ai tort )

Faire un cadre étirable en largeur qui s'ajuste automatiquement peu importe la taille d'une image fait partie du peu de choses encore difficilement réalisables via CSS. Il faut au moins spécifier la largeur de l'image. Tu peux jeter un oeil dans mes sources : http://www2.csduroy.qc.ca/mdc/gallery.html tu y trouveras peut-être ton profit.

Le HTML :

<div class="diapo dimension400">
 <h5>Titre</h5>
 <img src="" width="400" height="300" alt="" />
 <p>Photo : jabric</p>
</div>

Le CSS, au cas où

div.diapo { 
   background-color: #fcfbf5; 
   text-align: center; 
   width: 100%; 
   padding: 9px 0 9px 0; 
   margin: 9px 0 9px 0; 
}

div.diapo h5 { 
   color: #999999; 
   font-size: 100%; 
   line-height: 1em; 
   padding: 0; 
   margin: 0 0 0.25em 0; 
}

div.diapo img { 
   background-color: #ffffff; 
   border: 1px solid #e1ceaa; 
   padding: 4px; 
   margin: 0 auto 0 auto; 
}

div.diapo p { 
   color: #999999; 
   font-size: 76%; 
   line-height: 1em; 
   text-align: right; 
   padding: 0; 
   margin: 0; 
}

div.dimension400 { 
   width: 410px; 
}

div.dimension300 { 
   width: 310px; 
}

Si tu trouves une meilleure solution, je suis preneur
Modifié par Stephan (19 Apr 2005 - 06:38)

Bonjour Stephan.

Je me doutais bien que cela ne devait pas être simple... Soit je peux utiliser les padding mais cela prend toute la largeur (div) soit cela s'adapte mais je ne peux pas mettre de padding (span).

Grrr.
J'aurais quand même bien voulu le faire tout automatique.

Bon, je vais voir comment je m'organise

Merci !