Problème d'alignement d'une image et d'un texte

Bonjour

J'ai une dizaine d'images dans une page, et je voudrais mettre en face de chacune d'elles un petit texte descriptif
Donc je voudrais que le texte soit aligné au milieu de l'image
J'aimerais aussi que les images soit alternées, une fois à gauche, une fois à droite

Comme ceci:

http://i37.tinypic.com/1tn3pv.jpg

J'ai donc fait ça:

[#violet]
style type="text/css">

.bloc {
	height: 500px;
	display: block;
	border: 1px dotted #000000;
}

.bloc p {
	position: relative;
	left: 10px;
	width: 100%;
	top: 40%;
}

.bloc2 {
	height: 500px;
	display: block;
	border: 1px dotted #000000;
}

.bloc2 p {
	position: relative;
	left: 10px;
	width: 100%;
	top: 40%;
}

.ga {
	float: left;
}

.dr {
	float: right;
}

.separateur{clear:both;}

</style>
[/#]

<div class="bloc"> 
   <img src="image1.jpg" class="ga" alt=""> 
  <p>Texte 1</p>
 
</div>

<div class="separateur"></div>

<div class="bloc2">
<img src="image2.jpg" class="dr" alt=""> 
  <p>Texte 2</p>
</div>

<div class="separateur"></div>

<div class="bloc2">
<img src="image3.jpg" class="ga" alt=""> 
  <p>Texte 3</p>
</div>

Ca marche super bien sur Firefox, mais sur IE 7, le texte N°1 se retrouve en face l'image N°2, le texte N°2 en face l'image N°3, etc, etc....Et en face l'image N°1, il n'y a pas mon texte N°1, évidemment, puisqu'il se trouve en face l'image N°2


Ca fait plusieurs heures que je suis dessus et rien n'y fait!


Pouvez-vous m'aider? Je vous remercie par avance beaucoup
Modifié par patrick_frandi (11 Nov 2008 - 20:44)

Hello patrick_frandi et bienvenue ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Salut patrick_frandi et bienvenue sur le forum,

En ce qui concerne ton petit soucis, je t'ai fait quelque chose de rapide qui te mène vers une meilleur piste à suivre :

html :

<div class="bloc">
  <p class="ga"><img src="image1.jpg" width="200" height="500"  alt=""></p>
  <p class="txt">Texte 1</p>
</div>
<div class="bloc">
  <p class="dr"><img src="image2.jpg" width="200" height="500"  alt=""></p>
  <p class="txt">Texte 2</p>
</div>
<div class="bloc">
  <p class="ga"><img src="image3.jpg" width="200" height="500"  alt=""></p>
  <p class="txt">Texte 3</p>
</div>

css :

.bloc {
  height: 500px;
  border: 1px dotted #000000;
  clear:both;
}
.ga {
  float: left;
}

.dr {
  float: right;
}
.txt{
  margin-left:20px;
  margin-top:250px;
  margin-right:20px;
}

++
Modifié par Nolem (11 Nov 2008 - 19:43)

Nolem a écrit :
Salut patrick_frandi et bienvenue sur le forum,

En ce qui concerne ton petit soucis, je t'ai fait quelque chose de rapide qui te mène vers une meilleur piste à suivre :


++

Ca marche super
MERCI BEAUCOUP Nolem


PS: désolé pour la mise en page Heyoan

patrick_frandi a écrit :

PS: désolé pour la mise en page Heyoan

Pas de problème.

Tu aurais également pu faire comme cela (ce qui n'oblige pas à connaître à l'avance la taille des images) :

html

<p><img src="monimage.jpg" alt="">Texte</p>

css

img {
	vertical-align: middle;
}

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.

Heyoan a écrit :


Tu aurais également pu faire comme cela (ce qui n'oblige pas à connaître à l'avance la taille des images) :

html

<p><img src="monimage.jpg" alt="">Texte</p>

css

img {
	vertical-align: middle;
}

...

Salut Heyoan ,

J'ai hésité à utiliser vertical-align. Je ne savais pas que dans ce cas de figure cela fonctionne.

Pour la balise img, n'est il pas préférable de mettre les attributs width et height ? D'ailleurs, je ne sais plus pour quelle raison.

patrick_frandi : De rien, ce fut un plaisir

++
Modifié par Nolem (11 Nov 2008 - 22:16)

'lut Nolem,

Nolem a écrit :


J'ai hésité à utiliser vertical-align. Je ne savais pas que dans ce cas de figure cela fonctionne.

Le mieux est de lire la doc.

Nolem a écrit :

Pour la balise img, n'est il pas préférable de mettre les attributs width et height ? D'ailleurs, je ne sais plus pour quelle raison.

Oui, je ne les ai pas mis pour montrer que vertical-align se débrouillait sans dimensions mais cela est préconisé pour accélérer le chargement des images (lire à ce sujet Taille des images et séparation excessive du contenu et de la présentation).