Image et texte

Bonjour à tous

dans mon site, j'ai des images différentes à chaque fois (des smiley pour c'est bien, c'est nul, attention… de largeur différente) qui flottent à gauche devant un texte à hauteur fluide. Pour l'instant, l'image était dans un <p> et je m'arrangeais avec les <br> pour mettre le texte à peu près au milieu.
Après avoir lu vos tutoriels, j'ai décidé de faire un display table pour que le texte soit bien aligné verticalement et le code donne ceci:

<div id="ga"> 
     <div class="gaimg"><img src="/act_page/images/gen/bien.gif" alt="" width="60" height="47"/> </div>
   <div class="gatext"><strong>L'alignement est bon ! </strong></div>
   </div>

avec le css suivant :

#ga { 
	display : table;
}
.gaimg {
	display: table-cell;
	vertical-align: middle;
	width: 60px;
	text-align: right;
}
.gatext { 
	display: table-cell;
	vertical-align: middle;
	width: 680px;
	text-align: left;
	padding: 0px 0px 0 14px;
}

Qu'en pensez-vous (a priori, cela marche) ? Y a-t'il une manière plus simple de procéder car je dois transformer un millier de pages

Merci d'avance

Bonjour,
pas besoin d'un comportement de type table-cell (qui ne fonctionne pas sur IE7-) pour ça.

Code HTML à simplifier :

 <img class="gaimg" src="/act_page/images/gen/bien.gif" alt="" width="60" height="47" /> 
   <p class="gatext"><strong>L'alignement est bon ! </strong></p>

CSS

.gaimg, .gatext {vertical-align: middle;}
.gatext { 
	display: inline-block;
	width: 680px;
	padding-left: 14px;
}

Attention la propriété vertical-align ne s'applique qu'aux élément de display table-cell ou inline/inline-block.

Et pour IE7- (qui ne comprends pas la valeur inline-block : .gatext {display:inline; zoom:1}
Modifié par Hermann (21 Jul 2012 - 15:59)

Merci pour ta réponse qui marche bien quand le texte occupe la ligne.
Par contre j'ai un problème quand j'ai une photo qui flotte à droite.

L'autre manière de faire permet de fonctionner quelque soit l'environnement (photo ou pas). Et faire tout bêtement un tableau ?

Je n'arrive pas à envoyer la bonne image : il m'a pris une ancienne image déjà envoyée

Après des essais avec plusieurs images, même mon display-table ne marche pas quand il y a des images qui flottent à droite ou à gauche

L'image est passée !
De plus, mon image devrait être entourée par le texte si le texte est long !

bonjour,

basiquement, le flottement (qui extrait en parti du flux l'element) , l'emporte sur la régle display et dans tout les cas rend impossible le centrage vertical (vertical-align) avec un autre element.

Par contre , si ton image flottante est dans un élément en display:table/inline-block (ou inline; + zoom:1; pour ie7 ; ) le conteneur va englober ton image et pourra se centrer sur un frere (inline-block ou table-cell; ou versus IE7-).

en regardant ton image, j'imagine ton code comme ceci:

<conteneur>
<block><smiley-icone/></block>
<block>
  <img-qui-flotte-droite>
  <texte>
  <liste>
</block>
</conteneur>

avec
conteneur en display:[i]table;[/b] (ou pas)
block en display:[i]table-cell[/b] ou [i]inline-block;[/b]

tu peut simplement mettre une marge a droite de la largeur de l'image pour <texte> et <liste> (margin-right:xx;)
- ou mettre l'image dans un troisième et dernier block , tu n'auras, alors, aucun besoin de la faire flotter.

cordialement,
GC