[Résolu] Gestion des styles dans une Newsletter en HTML

[EmmaZL]

Bonjour,

J'essaie de faire une Newsletter en html pour les visiteurs de mon site. J'ai donc fait 3 essais : un envoi vers TB, un vers Gmail et un vers Hotmail.
La newsletter est envoyé avec un script PHP.

Dans TB, pas de problème.

Dans Gmail et Hotmail, les styles attribués à mes paragraphes ne sont pas pris en compte.

Voilà le code de base de ma Newsletter (ne faites pas attention au texte, j'ai mis n'importe quoi pour les essais) :

Code : Tout sélectionner

</head>

<style type="text/css">
<!--
BODY {
	margin: 0px;
	padding: 0px;
}
.texte {
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}
.titre {
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #767154;
}
.grostitre {
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #87BA0A;
	text-align: center;
}
.accroche {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
}
.menu a:link {
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
	text-transform: none;
	color: #767154;
}
.menu a:visited {
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
	text-decoration: none;
	color: #767154;
}
.menu a:hover {
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: #c5c2b1;
}
.tdmodif {
padding: 15px;
}
.liste {
list-style-image: url(images/bullet.gif);
}
-->
</style>
</head>

     <p align="left"><span class="titre"><img src="images/boutonmenu.jpg" width="17" height="18" align="top" alt=""> Les photos des ingrédients</span></p>
     <p class="texte" align="left">La race connue sous le nom American Pit Bull Terrier a été créée spécifiquement dans le but de devenir le chien de combat ultime. Mais la race s'est révélée être également très douée pour d'autres tâches.  </span></p>
     <p class="texte" align="left">&nbsp;</p>
     <p class="texte" align="left"><img src="images/preview.jpg" width="100" height="100"></p>
     <p class="texte"> </p>

Si on prend ce bout de code :

<p align="left"><span class="titre"><img src="images/boutonmenu.jpg" width="17" height="18" align="top" alt=""> Les photos des ingrédients</span></p>

Il devient comme ceci sur Hotmail :

<p align="left"><span><img src="http://by22fd.bay22.hotmail.msn.com/cgi-bin/..." alt="" align="top" height="18" width="17"> Les photos des ingrédients</span></p>

et comme ceci sur Gmail :

<p align="left"><span><img src="/mail/?view=att&disp=attd&attid=0.2&th=1056434fa50f9165" alt="" align="top" height="18" width="17"> Les photos des ingrédients</span></p>

Le style "titre" attribué à ma balise <span> n'apparaît plus.

Y a-t-il un moyen de faire quelque chose ??

Merci d'avance pour vos conseils.

Amicalement,
Emma.

[calimo]

http://pompage.net/pompe/cssemail/

Autrement dit : oublie
Fait du texte seul, c'est beaucoup plus lisible

[Invité]

http://pompage.net/pompe/cssemail/

Autrement dit : oublie
Fait du texte seul, c'est beaucoup plus lisible

Bonjour Calimo et merci pour ta réponse...

Bon, déjà que je ne maîtrise pas très bien les styles CSS, si en plus je dois faire des spécialités, je crains le pire...

Vais voir si je peux m'en sortir avec des <font>

A bientôt.

Emma.

[EmmaZL]

euh... c'était moi l'invitée...

[calimo]

Alors n'oublie pas d'envoyer aussi une version texte brut, parce que ça risque de devenir vraiment illisible

[EmmaZL]

Alors n'oublie pas d'envoyer aussi une version texte brut, parce que ça risque de devenir vraiment illisible

Tu crois que c'est pire en utilisant la balise <font> ??

J'ai pas encore fait mes essais. Quoi qu'il en soit, j'ai prévu d'envoyer à chaque fois une version texte et une version html...

[calimo]

Il faut toujours fournir une version texte brut, de nombreux courielleurs ne supportant pas le html

[EmmaZL]

Oui, c'est ce que j'ai fait. Il y a toujours les deux versions.

J'ai fait mes essais en utilisant la balise font, ça fonctionne nickel !
Je préfère les styles, mais bon...

Encore merci Calimo !