Problème d'alignement du texte à une image [RESOLU]

Bonjours la communauté,

Je dois créer une signature pour mon entreprise avec un logo à gauche et les informations à droite. Le logo (qui est carré) doit être aligné avec le texte à droite (le haut du texte à la même hauteur que le haut de l'image et idem en bas).

J'ai réussi.. ou presque, parce que sur thunderbird pour mac, le texte est plus grand. Du coup le texte dépasse l'image en bas..

J'ai tenté de mettre un div container tout autour du texte et du logo et ensuite faire un repeat-y avec cette image: http://www.prenom-nom.ch/more/repeat_mail.jpg (couleur du fond du logo et blanc à droite) en l'alignant en left. Mais aucun repeat.. même pas l'image ne s'affiche..

Voilà le bout de code:

  <div style="background:url(http://www.prenom-nom.ch/more/repeat_mail.jpg) repeat-y;">
<div style="float:left;">
 <img src="http://www.toto.ch/multimedia/images/img_structures/logo_agence_internet.gif" height="90px" width="95px" style="margin-bottom:0px;" />
</div>
<div style="float:left; margin-left:12px; margin-top:0px;">

<h1 style="margin:0px; padding:0 0 5px 0; font-family:Verdana,Geneva,sans-serif; font-size:14px; color:#132b43; border-bottom:#CCCCCC 1px solid;">prenom nom</h1>

<p style="margin:0px; padding:5px 0 0 0; font-family:Verdana,Geneva,sans-serif; font-size:10px; color:#2c4967; ">

<b style="color:#132b43;">toto communication sa</b><br />  

Av. de Villamont 17   <br />
1005 Lausanne - Switzerland - <a href="http://maps.google.ch/maps?f=q&source=s_q&hl=fr&geocode=&q=toto&sll=46.362093,9.036255&sspn=5.656135,9.382324&ie=UTF8&hq=toto&hnear=&ll=46.518359,6.638746&spn=0.02203,0.03665&z=15&iwloc=B" target="_blank">Plan</a> <br />
Site: <a href="http://www.toto.ch/ target="_blank">www.toto.ch</a>    <br />
Tél: ++41 21 329.15.50 - Fax: ++41 21 510.29.90
  
  </p>
  </div>  
  </div>         

J'ai aussi essayé de mettre un margin-bottom:0px sur le logo pour qu'il soit collé en bas histoire de rendre visible l'image repeat sur le haut pour ajouter la couleur en haut et pas en bas (vu la conception du logo ça serait plus mieux..)..

Merci pour votre aide, bonne journée.
Modifié par flow041 (26 Mar 2013 - 19:39)

Salut,

flow041 a écrit :
...parce que sur thunderbird pour mac

Il s'agit donc d'une newsletter ?

Ma réponse sera la suivante : faire une image pour logo + texte.

flow041 a écrit :
J'ai réussi.. ou presque

Quels clients mails / webmails as-tu testé ?

Salut,

Non c'est pour une signature en html à mettre à la fin de nos messages mail. Mettre le texte dans une image j'y est déjà pensé.. le seul problème c'est que il y a des liens dedans (vers notre site et un plan sur google maps).. donc le mettre dans une image ça ira pas (encore si il y avait qu'un lien sa aurait peu le faire..)

J'ai testé sur thunderbird pour windows, ça marche, je l'est testé sur outlook pour win.. ça marche.. sur "mail" dans mac ça marche aussi. Mais thunderbird pour mac, le texte est plus grand, donc du coup, dépasse du bas de l'image.

Ben écoute je vais le faire en tableau comme ça no prise de tête .. j'te tient au courant

flow041 a écrit :
J'ai testé sur thunderbird pour windows, ça marche, je l'est testé sur outlook pour win.. ça marche.. sur "mail" dans mac ça marche aussi. Mais thunderbird pour mac, le texte est plus grand, donc du coup, dépasse du bas de l'image.

C'est un début.

Yep.. lol il y a même pas thunderbird pour win sur le graphique.. il est si peut utilisé que ça ? perso je vient de quitté outlook pour passé à thunder car il est léger et rapide.

Bref, j'ai fait un tableau, ça marche, sa rajoute bien de la couleur, mais mon patron veux que le logo reste carré.. donc j'en revient à ma question initial.. comment aligné le texte à droite pour le centrer verticalement..

Voilà 2 printscreen qui parle plus qu'un long discours ->

Résultat souhaité (et résultat sur thunderbird) -> ICI
Résultat sur thunderbird pour mac -> ICI

Merci pour ton aide

Je peux voir le code de ton tableau ?

Si tu lui fixes la même hauteur que celle de l'image, en virant toutes les marges etc. ça devrait le faire je pense...

EDIT : Et y a des stats détaillées si tu scroll un peu la page que je t'ai envoyé. Thunderbird : 1.10%.
Modifié par BeliG (21 Apr 2010 - 15:03)

Yep.. okay j'irais jeté un oeil c'est intéressant ces stats .. Enfaite c'est bon j'ai utilisé l'attribut valign: center sur ma cellule et mon texte c'est centré entre le haut et le bas ! Vive les tableaux je dit ! (ou pas)

En tout cas merci pour ton aide !! Pour ceux que ça intéresse:

<style type="text/css">
 
#contact h1 {
	margin:0px; 
	padding:0 0 5px 0; 
	font-family:Verdana,Geneva,sans-serif; 
	font-size:13px; 
	color:#132b43; 
	border-bottom:#CCCCCC 1px solid;
}

#contact p {
	margin:0px; 
	padding:5px 0 0 0; 
	font-family:Verdana,Geneva,sans-serif; 
	font-size:10px; 
	color:#2c4967; 
}

</style>
<table cellpadding="0" cellspacing="8">
	<tr>
		<td>
			<img src="http://www.toto.ch/multimedia/images/img_structures/toto_sign_mail.jpg" height="95px" width="100px" style="margin-bottom:0px;" />
		</td>
		<td valign="center">
			<div id="contact">
				<h1>prenom nom</h1>
				<p>
					<b style="color:#132b43;">toto communication sa</b><br />
					Av. de Villamont 17<br />
					1005 Lausanne - Switzerland - <a href="http://maps.google.ch/maps?f=q&source=s_q&hl=fr&geocode=&q=toto&sll=46.362093,9.036255&sspn=5.656135,9.382324&ie=UTF8&hq=toto&hnear=&ll=46.518359,6.638746&spn=0.02203,0.03665&z=15&iwloc=B" target="_blank">Plan d'accès</a> <br />
					Site: <a href="http://www.toto.ch/" target="_blank">www.toto.ch</a><br />
					Tél: +41 21 329 15 50 - Fax: +41 21 510 29 90
				</p>
			</div>
		</td>
	</tr>
</table>

Modifié par flow041 (26 Mar 2013 - 19:39)