Html ne s'affiche pas correctement dans l'email
Html:
<div id="container">
<div id="social-links">
<img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_03.jpg" alt="">
www.twitter.com/roadsprep
<br />
<img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_09.jpg" alt="">
www.facebook.com/roadsprep
</div>
<div id="website-link">www.roadsprep.com</div>
<div id="now-at-gurgaon">
NOW AT
<BR />
GURGAON
</div>
<div id="gray-box">
We specialize in
<br />
SAT, GRE, GMAT, ACT
<br />
IELTS and TOEFL coaching!
</div>
<div id="pointers">
<ul>
<li>Over 6 years of Test Prep Experience!</li>
<li>Over 300 students with 2100 + scores</li>
<li>On average, an improvement of 400 point improvement in scores</li>
</ul>
</div>
<div id="contact-info">
<strong>Roads Academy Private Limited</strong>
<br />
Office No. 4001, Basement, DLF Phase IV, Near, Galleria Market, Gurgaon - 122 009, Haryana
<br />
<strong>Phone:</strong>
+91 85100 66662
<strong>Email:</strong>
[email protected]
</div>
</div>
CSS:
* {
font-family: 'Open Sans Condensed', sans-serif;
}
#container {
background-image: url(http://www.collegify.com/emailer/roads/delhi/images/Promotional-Flyer-for-Delhi-Front-1.jpg);
background-repeat: no-repeat;
width: 600px;
height: 910px;
margin: 0 auto;
padding-top: 31px;
}
#social-links {
margin: 0 0 0 32px;
float: left;
width: 200px;
height: 57px;
font-size: 13px;
font-weight: bold;
}
#website-link {
margin: 0 21px 0 0;
float: right;
width: 200px;
text-align: right;
font-size: 22px;
font-weight: bold;
}
#now-at-gurgaon {
margin: 230px 0 0 128px;
color: #454b4f;
font-size: 25px;
font-weight: bold;
text-align: center;
width: 181px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
}
#gray-box {
background-color: #454a4e;
width: 280px;
height: 80px;
border-top: solid 1px #1b1d21;
margin-top: 315px;
padding-left: 40px;
font-size: 22px;
font-weight: bold;
line-height: 25px;
color: #fbc911;
}
#pointers {
width: 280px;
padding: 0 0 0 20px;
font-size: 16px;
font-weight: bold;
line-height: 20px;
color: #454a4e;
}
#contact-info {
border-top: solid 1px #2f3337;
width: 537px;
margin: 10px auto 0 auto;
text-align: center;
padding-top: 10px;
line-height: 20px;
font-size: 17px;
}
Code dans la tête pour les polices web:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
Cette affiche parfaitement dans le navigateur, mais sa ne fonctionne pas dans l'email. Je sais que je ne peux pas il suffit de coller le code dans l'email, et que j'ai besoin d'en avoir un aperçu dans le navigateur, copier directement à partir de là, et de le coller dans le corps du message, mais sa ne s'affiche pas correctement. J'utilise Gmail.
- Ce serverside langue utilisez-vous?
- Pour un e-mail HTML, votre meilleur pari est d'utiliser
tables
, (pensez à 90 web) Et dans la ligne de style. Le support de CSS dans le HTML des emails est encore ce qui manque, par exemple, les images d'arrière-plan ne fonctionnera pas dans un grand nombre de clients de messagerie.
Vous devez vous connecter pour publier un commentaire.
E-mails ont tendance à la bande d'en-tête de contenu, de sorte que vous êtes susceptibles d'être en mesure d'ajouter le lien externe pour la nouvelle police.
En règle générale, gardez le html dans les mails aussi simple que possible, tout comme leur capacité à rendre le code html est limité (surtout Outlook). N'oubliez pas que vous (probablement) être de l'envoyer à une variété de clients de messagerie - ils tous légèrement différents.
Cela devrait vous aider : https://www.campaignmonitor.com/css/
E-mails analyse/rend très différentes que les navigateurs ne.
Outlook utilise le moteur de rendu à partir de WORD! regarder ici
Vous devez ajouter votre css inline, devraient utiliser des tables au lieu de div ...
Ses beaucoup de choses différentes pour construire des sites web! Gmail rend différents, comme Outlook ou Lotus fera.
Je me rappelle, j'ai ajouté style="display:block" pour toutes mes images à supprimer une marge de gmail. regarder ici
D'essais, de tests, d'essais 🙂
Quelque chose comme webfonts je voudrais supprimer complètement!
Il y a beaucoup de modèles vous pouvez utiliser.
Également certains outils, qui mettra tous vos css inline.
CSS, les Balises ne sont pas admis
et les Balises Comme
DIV
ne sera pas en mesure de créer de la conception, à la place dediv
utilisationTable
de la structure de base dans le Contenu du CourrielVoir ce lien pour obtenir de l'aide Guid À la CSS de mise en Œuvre dans le contenu de l'Email
La plupart des Fournisseurs de Services de Messagerie tels que Yahoo et Google ne laissez pas votre code CSS à coup de pied dans. si vous souhaitez utiliser les CSS dans l'Email pages, vous devriez les changer en des styles en ligne , qui ferait l'affaire, par exemple :