newsletter : premier essai

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

Répondre
brolysan
Arias
Messages : 8
Inscription : 13 août 2012, 14:38

newsletter : premier essai

Message 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 :

Image


Mise à jour du 14.08.12 : problème résolu, la balise saut de ligne br etait en cause...
Dernière modification par brolysan le 14 août 2012, 12:49, modifié 1 fois.
Haut
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: newsletter : premier essai

Message 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.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Haut
brolysan
Arias
Messages : 8
Inscription : 13 août 2012, 14:38

Re: newsletter : premier essai

Message 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
Haut
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: newsletter : premier essai

Message par Ymai »

Sous-question: quel est le code HTML correspondant quand on l'observe dans le mail?
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Haut
brolysan
Arias
Messages : 8
Inscription : 13 août 2012, 14:38

Re: newsletter : premier essai

Message 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?
Haut
brolysan
Arias
Messages : 8
Inscription : 13 août 2012, 14:38

Re: newsletter : premier essai

Message 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>
Haut
brolysan
Arias
Messages : 8
Inscription : 13 août 2012, 14:38

Re: newsletter : premier essai

Message 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...
Haut
brolysan
Arias
Messages : 8
Inscription : 13 août 2012, 14:38

Re: newsletter : premier essai

Message 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.
Haut
brolysan
Arias
Messages : 8
Inscription : 13 août 2012, 14:38

Re: newsletter : premier essai

Message 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 : &nbsp;&nbsp;&nbsp;
Haut
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: newsletter : premier essai

Message 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...
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Haut
brolysan
Arias
Messages : 8
Inscription : 13 août 2012, 14:38

Re: newsletter : premier essai

Message 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
Haut
Répondre

Revenir à « Kompozer et Nvu »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité