Positionnement légendes sous des images [resolu]

Bonjour à tous,
Je galère depuis longtemps pour trouver la solution d'un pb. certainement très simple.
Sur ma page je souhaiterais obtenir ça :
http://img176.imageshack.us/img176/8127/dispolgenderd1.jpg
Pas de pb. pour le positionnement des photos mais pour le texte je ne sais pas comment faire.
J'ai parcouru les forums ici et là et je n'ai rien trouvé qui corresponde à mon attente.
Si quelqu'un pouvait m'aider ou me dire ou aller chercher des infos.
Merci d'avance.
Modifié par Sesame (02 Mar 2007 - 12:14)

Je ne suis pas un pro en css, mais j'ai aussi rencontré ce "problème".
Je l'ai réglé en mettant image et texte dans un div global.

Personnellement mes images n'étaient pas toutes de même taille, aussi pour donner un minimum d'effet centré, j'ai mis l'image dans un div de taille fixe.

Pour le div contenant image et texte, tu le mets en float:left;

J'espère que cela t'aidera...

Bonjour,

On a causé du même sujet hier ici : http://forum.alsacreations.com/topic-4-23113-1-Mise-en-forme-image.html

Tu y trouveras peut-être qulques éléments de réponse.
Modifié par Lanza (27 Feb 2007 - 09:35)

Bonjour,
Comment sont positionnées tes images ? Tableaux, containers ?
Pourquoi pas une imbrication de DIV ?

<div class="conteneur">
<div class="img">ton image</div>
<div class="légende">ta légende</div>
</div>

C'est ce que j'essaierais de faire avec les bonnes coordonées pour chaque div
Modifié par gaelgerard (27 Feb 2007 - 10:08)

gaelgerard a écrit :
Bonjour,
Comment sont positionnées tes images ? Tableaux, containers ?
Pourquoi pas une imbrication de DIV ?

<div class="conteneur">
<div class="img">ton image</div>
[b]<div class="légende">ta légende</div>[/b]
</div>

C'est ce que j'essaierais de faire avec les bonnes coordonées pour chaque div

Quel est l'intérêt de mettre un div pour le texte ?

Salut,

Moi j'ai réalisé ce genre de travail avec des listes de définitions:

<dl>
<dt>Image</dt>
<dd>Texte<dd>
</dl>

Bonjour à tous et merci à vous quatre pour vos suggestions.
En tatônnant pas mal j'ai réussi à aligner 4 photos avec légende sur les six prévus, mais quelle galère !
Voici ce que j'ai fait :

	
<div class="placo1"> <img src="images/placo1.jpg"alt=""/><br />texte1</div>   
<div class="placo2"> <img src="images/placo2.jpg"alt=""/><br />texte2</div> 
<div class="lambris"> <img src="images/lambris.jpg"alt=""/><br />texte3</div> 
<div class="fen_chantier"> <img src="images/fen_chantier.jpg"alt=""/><br />texte4</div>  

et

.placo1  {
	float: left;
	margin-left: 20px;
	text-align: center;
	
	}
.placo2 {
	margin-left: 40px;
	text-align: center;
	}
.lambris {
	float: right;
	margin-top: 25px;
	margin-right: 45px;
	text-align: center;
	
	}
.fen_chantier {
	margin-right: 310px;
	margin-top: 25px;
	text-align: center;

Bon ça s'affiche correctement sur firefox mais sur ie6 les 2 photos du bas sont décalés sur la gauche.
Donc je cherche toujours la bonne méthode.
Oryo peux tu détailler un peu ta méthode pour que je comprenne et notamment comment fais tu pour centrer le texte sous les images

Bon j'essaie de répondre à la va-vite:

HTML

<div class="test">
<dl>
<dt>Image(150px))</dt>
<dd>Texte<dd>
</dl>
</div>

CSS

.test{
width:450px;
float:left;
}

dl{
float:left;
width:150px;
margin:0;
padding:0;
}

dt{
margin:0;
padding:0;
}

dd{
margin:0;
padding:0;
text-align:center;
}

J'ai fait le code à la va vite , normalement ca doit marcher.

++

a écrit :
J'ai fait le code à la va vite , normalement ca doit marcher.

Bonjour Oryo
J'ai testé, ça marche bien y compris sur ie
Un grand merci à toi et à tous les participants