Page 1 sur 1
newsletter : premier essai
Publié : 13 août 2012, 14:50
par brolysan
Bonjour à tous.
Je me lance avec Komposer depuis quelques jours, et j'essaye de faire une newsletter assez simple. Tout se passe bien, mais dés qu'on la visualise à travers une boite mail sous n'importe quel navigateur, des bandes blanches apparaissent sous les images.
J'aimerais comprendre dans le code ci dessous où je pêche :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>test final</title></head><body style="border-style: none; padding: 0px; font-size: 0px; line-height: 0px; display: block; position: relative; top: 0px; right: 0px; bottom: 0px; left: 0px; list-style-type: none;">
<div style="text-align: center;">
<img style="width: 579px; height: 21px;" alt="" src="http://www.minimrisk.fr/newsletter/pour-etre-sur.jpg" align="middle"><a href="mailto:contact@minimrisk.fr"><img style="width: 103px; height: 21px;" alt="" src="http://www.minimrisk.fr/newsletter/contact.jpg" align="middle"></a><img style="width: 206px; height: 21px;" alt="" src="http://www.minimrisk.fr/newsletter/bord-haut-droit.jpg" align="middle"><br>
<img style="width: 888px; height: 11px;" alt="" src="http://www.minimrisk.fr/newsletter/a-votre-carnet-d-adresse.jpg" align="middle"><br>
<img style="width: 530px; height: 14px;" alt="" src="http://www.minimrisk.fr/newsletter/pour-visualiser.jpg" align="middle"><a href="http://www.minimrisk.fr/newsletter%2008-06-2012.htm"><img style="width: 68px; height: 14px;" alt="" src="http://www.minimrisk.fr/newsletter/suivez-ce-lien.jpg" align="middle"></a><img style="width: 290px; height: 14px;" alt="" src="http://www.minimrisk.fr/newsletter/bord-haut-bas.jpg" align="middle"><br>
<img style="width: 888px; height: 469px;" alt="" src="http://www.minimrisk.fr/newsletter/Newsletter-Formation.jpg" align="middle"><br>
<img style="width: 107px; height: 62px;" alt="" src="http://www.minimrisk.fr/newsletter/bord-gauche-milieu.jpg" align="middle"><a href="mailto:"><img style="width: 218px; height: 62px;" alt="" src="http://www.minimrisk.fr/newsletter/envoyer-a-un-ami.jpg" align="middle"></a><a href="http://www.minimrisk.fr/nos_formations.htm"><img style="width: 237px; height: 62px;" alt="" src="http://www.minimrisk.fr/newsletter/je-decouvre.jpg" align="middle"></a><a href="http://fr.viadeo.com/fr/profile/christine.mitolo"><img style="width: 103px; height: 62px;" alt="" src="http://www.minimrisk.fr/newsletter/viadeo.jpg" align="middle"></a><a href="http://fr.linkedin.com/pub/christine-mitolo/34/a14/b84"><img style="width: 91px; height: 62px;" alt="" src="http://www.minimrisk.fr/newsletter/linked.jpg" align="middle"></a><img style="width: 132px; height: 62px;" alt="" src="http://www.minimrisk.fr/newsletter/bord-droit-milieu.jpg" align="middle"><br>
<img style="width: 538px; height: 23px;" alt="" src="http://www.minimrisk.fr/newsletter/ne-plus-recevoir.jpg" align="middle"><a href="mailto:contact@minimrisk.fr?subject=d%C3%A9sinscription&body=Merci%20de%20me%20d%C3%A9sinscrire%20de%20la%20newsletter"><img style="width: 77px; height: 23px;" alt="" src="http://www.minimrisk.fr/newsletter/rendez-vous-ici.jpg" align="middle"></a></font><img style="width: 273px; height: 23px;" alt="" src="http://www.minimrisk.fr/newsletter/bord-droit-bas.jpg" align="middle"><br>
<br>
</div>
</body></html>
Et voila l'image qui apparaît sous Chrome/Firefox lors d'une consultation par une boite mail Gmail :
Mise à jour du 14.08.12 : problème résolu, la balise saut de ligne br etait en cause...
Re: newsletter : premier essai
Publié : 13 août 2012, 16:28
par Ymai
Bonjour
Avec le code donné, je ne reproduis pas le problème ni sous FF, ni sous Chromium.
Par contre, je l'observe bien dans KompoZer.
Si je devais désigner un coupable potentiel, j'irais le chercher du côté des balises <br> qui semblent bien inutiles dans le code.
Re: newsletter : premier essai
Publié : 13 août 2012, 16:40
par brolysan
Ymai a écrit :Bonjour
Avec le code donné, je ne reproduis pas le problème ni sous FF, ni sous Chromium.
Par contre, je l'observe bien dans KompoZer.
Si je devais désigner un coupable potentiel, j'irais le chercher du côté des balises <br> qui semblent bien inutiles dans le code.
On m'a dit ca aussi, mais dés que j'enlève une balise br, les images se déplacent n'importent ou....je nage
Re: newsletter : premier essai
Publié : 13 août 2012, 16:44
par Ymai
Sous-question: quel est le code HTML correspondant quand on l'observe dans le mail?
Re: newsletter : premier essai
Publié : 13 août 2012, 16:56
par brolysan
Ymai a écrit :Sous-question: quel est le code HTML correspondant quand on l'observe dans le mail?
bonne question...sous thunderbird, j'ai aucun décalage de cadre, mais uniquement lorsque je visualise le mail sur un webmail. Une idée pour trouver le "bon code html" pour vous montrer?
Re: newsletter : premier essai
Publié : 13 août 2012, 17:01
par brolysan
Ymai a écrit :Sous-question: quel est le code HTML correspondant quand on l'observe dans le mail?
Code : Tout sélectionner
<div bgcolor="#FFFFFF" text="#000000"><div class="adM">
</div><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.1&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:579px;font-style:normal;font-weight:normal;min-height:21px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><a href="mailto:contact@minimrisk.fr" target="_blank"><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.2&disp=emb&zw&atsh=1" style="border:0px solid;width:103px;min-height:21px" align="middle"></a><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.3&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:206px;font-style:normal;font-weight:normal;min-height:21px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><br>
<img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.4&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:888px;font-style:normal;font-weight:normal;min-height:11px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><br style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;font-style:normal;font-weight:normal;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px">
<img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.5&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:530px;font-style:normal;font-weight:normal;min-height:14px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><a href="http://www.minimrisk.fr/newsletter%2008-06-2012.htm" style="font-family:'Times New Roman';font-size:0px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:0px;text-align:center;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" target="_blank"><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.6&disp=emb&zw&atsh=1" style="border:0px solid;width:68px;min-height:14px" align="middle"></a><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.7&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:290px;font-style:normal;font-weight:normal;min-height:14px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><br style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;font-style:normal;font-weight:normal;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px">
<img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.8&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:888px;font-style:normal;font-weight:normal;min-height:469px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle" class=""><br style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;font-style:normal;font-weight:normal;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px">
<img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.9&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:107px;font-style:normal;font-weight:normal;min-height:62px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><a style="font-family:'Times New Roman';font-size:0px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:0px;text-align:center;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.10&disp=emb&zw&atsh=1" style="border:0px solid;width:218px;min-height:62px" align="middle"></a><a href="http://www.minimrisk.fr/nos_formations.htm" style="font-family:'Times New Roman';font-size:0px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:0px;text-align:center;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" target="_blank"><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.11&disp=emb&zw&atsh=1" style="border:0px solid;width:237px;min-height:62px" align="middle"></a><a href="http://fr.viadeo.com/fr/profile/christine.mitolo" style="font-family:'Times New Roman';font-size:0px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:0px;text-align:center;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" target="_blank"><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.12&disp=emb&zw&atsh=1" style="border:0px solid;width:103px;min-height:62px" align="middle"></a><a href="http://fr.linkedin.com/pub/christine-mitolo/34/a14/b84" style="font-family:'Times New Roman';font-size:0px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:0px;text-align:center;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" target="_blank"><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.13&disp=emb&zw&atsh=1" style="border:0px solid;width:91px;min-height:62px" align="middle"></a><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.14&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:132px;font-style:normal;font-weight:normal;min-height:62px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><br style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;font-style:normal;font-weight:normal;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px">
<img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.15&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:538px;font-style:normal;font-weight:normal;min-height:23px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><a href="mailto:contact@minimrisk.fr?subject=d%C3%A9sinscription&body=Merci%20de%20me%20d%C3%A9sinscrire%20de%20la%20newsletter" style="font-family:'Times New Roman';font-size:0px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:0px;text-align:center;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" target="_blank"><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.16&disp=emb&zw&atsh=1" style="border:0px solid;width:77px;min-height:23px" align="middle"></a><img alt="" src="?ui=2&ik=00db972be1&view=att&th=1392077d62e7b952&attid=0.1.17&disp=emb&zw&atsh=1" style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;width:273px;font-style:normal;font-weight:normal;min-height:23px;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px" align="middle"><div class="yj6qo"></div><div class="adL"><br style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;font-style:normal;font-weight:normal;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px">
</div></div>
Re: newsletter : premier essai
Publié : 13 août 2012, 17:04
par brolysan
Si je comprends bien, voila le code que rajoute le webmail :
<br style="text-indent:0px;letter-spacing:normal;font-variant:normal;text-align:center;font-style:normal;font-weight:normal;line-height:0px;text-transform:none;font-size:0px;white-space:normal;font-family:'Times New Roman';word-spacing:0px">
Reste donc à trouver comment l'enlever maintenant...
Re: newsletter : premier essai
Publié : 13 août 2012, 18:27
par brolysan
j'essaye depuis quelques heures, et j'y arrive pas une secondes. Si quelqu'un voyait une solution (quitte à refaire l'ensemble des images), je suis preneur.
Re: newsletter : premier essai
Publié : 14 août 2012, 12:34
par brolysan
voila la solution (si cela peut aider certains), le saut de ligne etait la cause (balise br); il me suffisait de la remplacer par :
Re: newsletter : premier essai
Publié : 14 août 2012, 17:55
par Ymai
Désolé, plus eu le temps d'approfondir depuis hier.
Merci d'avoir confirmé que les <br> étaient la source du problème.
J'étais parti sur une solution dans laquelle le corps de texte est limité à 888px (ce qui est la largeur totale des images à placer sur la même ligne) dans la feuille de styles. Mais c'est encore à clarifier pour certains détails.
Je ne suis pas franchement fanatique de la mise en page avec des "espaces". Mais si ça convient...
Re: newsletter : premier essai
Publié : 21 nov. 2012, 15:01
par brolysan
moi non plus pas très fan....j'attaque une nouvelle newsletter, j'ai essayé de me documenter pour la faire en css, et je nage complet...retour à cette méthode qui pour l'instant malgré ce code me génère de nouveaux décalages du fait d'une newsletter beaucoup plus compliqué en terme d'images à insérer.
Si quelqu'un a d'autres solutions pour créer une newsletter, preneur
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11