CSS dans newsletter

[BaStaub]

Bonjour,

J'ai créé une newsletter simple en HTML/CSS.
Le CSS est incorporé (dans une balise <style>) dans le fichier HTML.
J'ai créé une entete et un pied de page qui ont une image en arriere plan. Le chemin de ces image est dans le code CSS.

Le fichier et les images sont hébergés sur mon ftp perso (free).

Quand je visualise la page dans IE7, tout s'affiche correctement.

Pour envoyer cette page en newsletter, je fait, dans IE, Fichier->Envoyer->Page par courrier electronique. Mais aucunes des images ne s'affiche ! Ors, quand je met une image dans le html (balise img), l'image s'affiche dans le mail !

J'ai essayé tout les types de chemin pour les images et ça ne vien visiblement pas de là !

Pourquoi les images ne s'affichent pas en CSS ? Doi-je obligatoirement tout mettre dans le code HTML ?

Merci de votre aide

PS : messagerie : Outlook 2010
outils de dev : Notepad++

[franculo_caoulene]

Salut,

Les clients mail sont de loin les mauvais élèves de la classes concernant la mise en page via CSS, background-image y est mal implémenté. C'est pour ça que tu peux constater cette différence entre navigateur et client mail. Je sais qu'on utilise encore beaucoup la mise en page par tableau pour les emails.

Par contre, c'est tout ce que je sais sur le sujet. Je te conseille donc de faire des recherches concernant la mise en page propres aux emails : "html email", css email", etc.

[BaStaub]

Merci de ta reponse.

Je suis finalement parti sur une mise en page tableau. Les image ne sont plus appelées dans le css mais directement dans le html...

En revanche, j'avais des images qui entourais mes paragraphes. Ces images étaient dans le css !!! Je vai donc rechercher "css mail" comme tu me le conseil.

La suite au prochain épisode

[e-fitz]

Bonjour, voici le genre de template que j'utilise pour les mails (dans mes derniers tests il passe presque partout)

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div style="position: relative; text-align: center; background-color: #4b4b4a; width: 100%; color: white;">
<table style="width: 640px;" border="0" cellspacing="0">
<tbody>
<tr height="249">
<td><img src="http://www.monsite.com/images/header_mail.jpg" border="0" /></td>
</tr>
<tr>
<td style="BACKGROUND-COLOR: #4b4b4b" background="http://www.monsite.com/images/fond_mail.jpg">
<div style="position: relative; width: 600px; left: 20px;">
<p><span style="FONT-FAMILY: Times, Verdana, Sans-serif; COLOR: #6aae19; FONT-SIZE: large; FONT-WEIGHT: bold">New website online ! </span><br /><br /></p>
<p><span style="COLOR: white">Some text</span></p>
<p><span style="COLOR: white"> </span></p>
</div>
</td>
</tr>
<tr height="57">
<td><a href="http://www.monsite.com/images/footer.jpg"><img src="http://www.monsite.com/images/uneimage.jpg" border="0" /></a></td>
</tr>
</tbody>
</table>
</div>

Donc un div pour le fond, et une table pour le contenu, pour les images de fond j'utilise la notation tableau (eviter le css), pour toutes les images j'ai choisis de les mettres sur le site mais elles peuvent être incluse dans le mail (attention a bien les envoyer en contenu).

Ensuite si le mail est envoyé par php voici ce que je fais pour eviter qu'il passe trop souvent en indésirable/spam une entête minimal (je ne sais pas si elle est toujours suffisante car je n'ai pas testé depuis quelques temps) :

Code :

1
2
3
4
X-Sender: <site.com>
X-auth-smtp-user: mail@site.com
MIME-Version:1.0
Content-Type: text/html; charset=iso-8859-1

Si ce n'est pas suffisant ajouter un SPF ou TXT au DNS de cette forme :
site.com. IN TXT "v=spf1 a mx ptr ~all"

Il est aussi possible (pour hotmail) de s'inscrire ici :
https://support.msn.com/eform.aspx?p...rpp&ct=eformts


Je previens ces deux dernieres etapes ne m'ont jamais utilie mais je les gardes dans un coin sur un txt.

Je crois que je ne peux pas plus aider, mais à l'occasion je regarderais si j'ai rien d'autre dans mes notes sur les mails.