Votre question

E Mail HTML + CSS prob.

Tags :
  • Html
  • newsletter
  • Email
  • CSS
  • Programmation
Dernière réponse : dans Programmation
20 Mai 2007 00:18:02

Bonjour à tous,
J'ai une question,
J'essaye depuis plusieur temps d'envoyer un mail HTML à une liste de contats. J'utilise MaxBulk et j'en suis assez content. J'arrive à envoyer tout mais je dois dire que l'effet voulu n'est pas du tou bien recu. Pourtant l'aprecu avant l'envoi est parfait mais quand on le recoit (avec Hotmail, Skynet.be et Outlook en tout cas) le fond du mail est désespérément... Blanc on dirait un mail des plus normal.
Voici quelques infos:
les code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5.  
  6. <title>Mail | Boulledogue Corp.</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8. <title>Boulledogue Corp.</title>
  9. <META NAME="description" CONTENT="Site de télécharements, et de publicité de blogs, skyblogs, o site internet. Muni d\'un forum avec plein de lien de tééchargements.">
  10. <META NAME="keywords" CONTENT="Guillaume, Normand, guillaume, normand, boulledogue, Boulledogue, site, téléchargements, warez, Warez, forum, corp., corp, logiciels, musiques, musique, logiciel, jeux, jeu, film, films, forum, blabla, skyblog, blog, site internet, publicité,">
  11. <META NAME="subject" CONTENT="Informatique, général">
  12. <LINK REL="Generateur-meta" href="http://www.cclleemm.com/" />
  13. <META NAME="author" CONTENT="Guillaume Normand">
  14. <META NAME="copyright" CONTENT="©">
  15. <META NAME="revisit-after" CONTENT="1">
  16. <META NAME="identifier-url" CONTENT="http://www.guillaumenormand.fr.tc">
  17. <META NAME="reply-to" CONTENT="guillaume.normand@hotmail.com">
  18. <META NAME="date-creation-ddmmyyyy" CONTENT="20022007">
  19. <META NAME="Robots" CONTENT="all">
  20. <META NAME="Rating" CONTENT="general">
  21. <META NAME="organization" CONTENT="Boulledogue Corp.">
  22. <META http-equiv="Content-Language" CONTENT="Be">
  23. <META NAME="expires" CONTENT="never">
  24. <META NAME="Distribution" CONTENT="Global">
  25. <META NAME="Audience" CONTENT="general">
  26. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  27. <meta http-equiv="Content-Language" content="fr" />
  28. <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  29. <meta http-equiv="Content-Style-Type" content="text/css"/>
  30. <meta name="DC.Language" scheme="RFC3066" content="fr"/>
  31.  
  32. <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Normal" />
  33.  
  34. <style type="text/css">
  35. html { height:100%; }
  36.  
  37. body {
  38. margin:0;padding:0;
  39. background-color:#4B738D;
  40. font-family:"Trebuchet MS", Verdana, Sans-Serif;
  41. font-size:0.7em;
  42. color:#454545;
  43. height:100%;
  44. }
  45.  
  46. a { color:#3A586C;text-decoration:underline; }
  47.  
  48. a:hover { color:#7BB5DB;text-decoration:none; }
  49.  
  50. #splash {
  51. position:absolute;
  52. left: 50%;
  53. top: 50%;
  54. width: 531px;
  55. height: 234px;
  56. margin-top: -117px;
  57. margin-left: -265px;
  58. border: 1px solid #000;
  59. border:none;
  60. }
  61.  
  62. #page {
  63. margin:0 auto 0 auto;
  64. background:url('images/interface/fond.png') repeat-y;
  65. width:768px;
  66. position: relative;
  67. min-height: 100%
  68. }
  69.  
  70. h1#logo {
  71. text-indent:-9000px;
  72. background:url('images/interface/logo.png') no-repeat;
  73. width:239px;
  74. height:79px;
  75. margin:auto;
  76. position:relative;
  77. top:20px;
  78. background-image: url(images/interface/logo.png);
  79. }
  80.  
  81. #contenu {
  82. background-color:#303030;
  83. width:669px;
  84. }
  85.  
  86. .bloc {
  87. background:url('images/interface/haut_bloc.png') top no-repeat #FFF;
  88. width:669px;
  89. text-align:justify;
  90. margin:40px 47px;
  91. padding-top:10px;
  92. }
  93.  
  94. #menu {
  95.  
  96. width:100%;
  97. }
  98.  
  99. #menu ul {
  100. padding:0;margin-left:4px;padding-bottom:15px;
  101. list-style-type:none;
  102. clear:both;
  103. }
  104.  
  105. #menu li {
  106. /* width:220px; */
  107. height:24px;
  108. display:inline;
  109. text-align:center;
  110. }
  111.  
  112. #menu a {
  113. display:block;
  114.  
  115. float:left;
  116. width:146px;
  117. margin-right:1px;
  118. height:24px;
  119. background-color:#E8E8E8;
  120. padding-top:6px;
  121. color:#303030;
  122. text-decoration:none;
  123. font-size:110%;
  124. text-align:center;
  125. }
  126.  
  127. #menu a:hover {
  128. display:block;
  129. width:220px;
  130. height:24px;
  131. background-color:#4B738D;
  132. color:#FFF;
  133. text-decoration:underline;
  134. }
  135.  
  136. .bloc p{
  137. padding:0 5px 0 5px;
  138. }
  139.  
  140. .bloc p:first-letter {
  141. padding-left:15px;
  142. font-weight:bold;
  143. font-size:130%;
  144. }
  145.  
  146. .bloc h2 {
  147. background:url('images/interface/fond_titre.png') no-repeat;
  148. width:153px;
  149. height:36px;
  150. font-size:110%;
  151. color:#FFF;
  152. text-align:center;
  153. margin-left:10px;
  154. font-weight:normal;
  155. padding-top:10px;
  156. clear:both;
  157. }
  158.  
  159. .bas_bloc {
  160. width:669px;
  161. height:5px;
  162. background:url('images/interface/bas_bloc.png') bottom no-repeat;
  163. }
  164.  
  165. #copyright {
  166. font-size:90%;
  167. color:#FFF;
  168. text-align:center;
  169. width:100%;
  170. position:absolute;
  171. bottom:0;
  172. }
  173. </style>
  174. </head>
  175.  
  176. <body>
  177. <div id="page">
  178.  
  179. <h1 id="logo"></h1>
  180.  
  181. <div class="bloc">
  182.  
  183. <div id="menu"></div>
  184.  
  185. <center>
  186. <h2>Mail</h2>
  187. </center>
  188. <div dir="ltr">
  189. <p>Bonjour à toi,</p>
  190. <p>JE vous envoie ce mail (jespere que vous l'avez recu correctement) pour vous présenter le design de mon site web.</p>
  191. <p>Mon site offre toujours des téléchargements de films (Spiderman 3, Le Transporteur 2, Taxi 4, ...) des jeux (GTA: S.A.) et de la musique et le tout GRATUITEMENT!</p>
  192. <p>Voici le lien:</p>
  193. <p><a href="http://www.guillaumenormand.fr.tc">http://www.guillaumenormand.fr.tc</a> </p>
  194. <p>et le forum (sur lequel se trouvent la plupart des téléchargements:</p>
  195. <p><a href="http://www.guillaumenormand.keuf.net">http://www.guillaumenormand.keuf.net</a> </p>
  196. <p>Un grand merci à toi d'avoir prêté toute ton attention à mon message et je te souhaite une bonne visite de mon site internet.</p>
  197. <p>Boulledogue (Webmaster, Admin, ExPeRt wArEz, ...) <br />
  198. </p>
  199. </div>
  200. <div class="bas_bloc"></div>
  201. </div>
  202.  
  203. <!--
  204. <div class="bloc"> <div class="bas_bloc"></div></div>
  205. !-->
  206. <div><p> </p></div>
  207. <div id="copyright">
  208. <p><a href="http://cclleemm.com/rss_manager/rss.php?xml=guillaumenormand.fr.tc-1"><img src="http://www.cclleemm.com/rss_manager/boutons/rss_logo%201.png" border="0" /></a> Design Web construit par <a href="mailto:contact@richie3366.com">Richie3366</a> merci à lui pour son aide précieuse <script type="text/javascript" src="http://raussin.clement.free.fr/stats/php-stats.js.php?pseudo=ptitguilou"></script>
  209. <noscript><img src="http://raussin.clement.free.fr/stats/php-stats.php?pseudo=ptitguilou" border="0" alt=""></noscript></p>
  210. </div>
  211. </div>
  212. </body>
  213. </html>


Effet voulu: http://www.guillaumenormand.fr.tc/mail.html ...
Si quelqu'un pouvait m'aider ca serait super sympa.
Merci!
@+
Boulledogue

Autres pages sur : mail html css prob

20 Mai 2007 17:16:35

je me suis trompé de rubrique?
aidez moi je vous en prie
@+
Boulledogue
20 Mai 2007 20:14:52

Essaye de linker ton style sur une feuille CSS externe située sur ton serveur...
Contenus similaires
26 Mai 2007 09:14:17

ca na ps réussi snif mais merci quand même d'avoir répondu!
a+
Boulledogue
26 Mars 2012 10:43:56

Je re-up le sujet pour ceux qui tomberaient dessus.

Pour un mail en html/css, il faut savoir que les styles CSS sont capricieux selon les webmail. Ce n'est pas parce que l'aperçu (même dans un navigateur) est bien que le webmail va l'afficher correctement. La base est de faire un mail compatible avec Outlook, or Outlook supporte mal les CSS.

Quelques astuces :

- Oubliez vos <div> pour la mise en page : Faites votre squelette avec des tableaux ! (ne me regardez pas comme ça, c'est obligatoire)
- Ne mettez pas de balise <style> dans le head car plusieurs webmail ne les prendront pas en compte : Insérez vos styles directement dans vos balises !
- N'utilisez que très peu les propriétés "float" et "clear", en tout cas testez-les : préférez les text-align ou les valign pour les cellules de tableaux.
- Outlook ne prend pas en charge les padding et les margin ! si vous voulez des marges entre vos images et votre texte, il va falloir le prévoir dans vos images !

En espérant avoir pu en éclairer certain !
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS