[Résolu]Création d'une page html pour email, léger soucis avec outlook

Création d'une page html pour email, léger soucis avec outlook [Résolu] - HTML/CSS - Programmation

Marsh Posté le 18-03-2010 à 17:29:55    

Salut. :hello:  
 
 
J'ai créé une petite page html pour pouvoir l'intégrer dans les papiers à lettres des
logiciels de messagerie. J'en suis au premier, à savoir outlook express.
 
 
J'ai créé des règles css pour le "body" (pour le texte ainsi qu'un background), ainsi
qu'une règle css sur "img", car j'intègre une petite image comme en-tête  
(Donc 3 éléments : le texte du courrier -> "body", le background du courrier -> "body"  
et un entête du courrier -> "img" )
 
 
En prévisualisant ma page sur IE ou Firefox, c'est ok.
En sélectionnant la page avec outlook, en mode aperçu, c'est ok.
 
Mais ce qui se passe de curieux avec outlook par la suite c'est que si je fais "créer un message"  
à partir du papier à lettre sélectionné, systématiquement mon image d'entête est décalée  
par rapport au haut, d'environ 20 à 30 pixels (comme s'il y avait un paragraphe (<p></p> )  
qui s'était fiché au dessus...)
 
Avec la souris je peux manuellement remettre l'entete à sa place... Mais bon, c'est  
saoulant à force (et pas "clean" )
 
 
 
Voici le code :
 

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Mon courrier</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9. font-family: Trebuchet MS, Verdana;
  10. font-size: 10pt;
  11. color: #666;
  12. margin-top: 0px;
  13. margin-left: 50px;           <- margin-left pour décaler automatiquement le texte à taper dans outlook
  14. background-image: url(mon_background.gif);
  15. background-repeat: repeat-y;
  16. }
  18. img {
  19. margin-top: 0px;
  20. margin-left: -50px;         <- margin-left négatif pour replacer l'image normalement ("contrer" le margin-left du body)
  21. }
  22. -->
  23. </style>
  24. </head>
  26. <body>
  27. <img src="mon_entete.gif" width="461" height="58" />
  28. </body>
  30. </html>


 
On voit bien que j'ai bien spécifié un margin-top: 0px - 2 fois même...
Il y a autre chose, comme un "paragraphe parasite" qui vient s'intercaler, mais pourquoi et comment faire ?...


Message édité par toum_toum le 18-03-2010 à 18:52:40

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 18-03-2010 à 17:29:55   

Reply

Marsh Posté le 18-03-2010 à 17:32:54    

tu devrais mettre comme règle css :

Code :
  1. html {
  2.   margin: 0;
  3.   padding: 0;
  4. }


 
y'a peut-être des marges/paddings par défaut qui apparaissent en mode création d'un message.

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 18-03-2010 à 17:36:11    

rufo a écrit :

tu devrais mettre comme règle css :

Code :
  1. html {
  2.   margin: 0;
  3.   padding: 0;
  4. }


 
y'a peut-être des marges/paddings par défaut qui apparaissent en mode création d'un message.


 
Oui c'est sûrement ça. Un truc fait pour pouvoir écrire de manière un peu  
décalée vers le bas (mieux esthétiquement c vrai...).


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 18-03-2010 à 17:45:55    

Bon j'ai trouvé un début de parade :
 
img {
 margin-top: -17px;     <---  pour compenser ces 17 pixels de décalage
 margin-left: -40px;
}
 
 
 
Par contre me reste un nouveau probleme : ma souris ne vient plus se ficher sous l'entete
comme auparavant, mais à côté... Du coup il faut créer 2 paragraphe artificiels avant de pouvoir
taper du texte...
 
 
 
 
PS : le :

Citation :

html {
  margin: 0;
  padding: 0;
}


... ne m'a pas donné de résultat en fait... Est-ce que dans l'idée ça aurait prévalu sur les règles  
propres à outlook par exemple ?


Message édité par toum_toum le 18-03-2010 à 17:47:27

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 18-03-2010 à 17:50:00    

Pour un site web afiché dans un navigateur, ça met à 0 toutes les marges/paddings. Comme ça, plus de pb de valeurs par défaut.
 
Edit : Et en essayant de faire la même manip, non pas sur html mais sur body?

Message cité 1 fois
Message édité par rufo le 18-03-2010 à 17:50:50

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 18-03-2010 à 17:53:32    

A rufo : oui mais ça n'est pas un site web affiché dans un navigateur, mais dans outlook
(qui doit avoir ses propres règles définies qq part ?..)
 
 
Bon sinon j'ai créé dans le body, après mon image, un :
<p>&nbsp;</p>
Et ça résoud le soucis du texte. Finalement j'en ai créé, un paragraphe ;)
 
C'est pas très beau :(  tout ça mais bon...


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 18-03-2010 à 17:56:21    

Plus qu'à tester avec les autres logiciels si ça le fait :/

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 18-03-2010 à 17:58:44    

rufo a écrit :


Edit : Et en essayant de faire la même manip, non pas sur html mais sur body?


 
 
Je viens de créer :  
 

Code :
  1. html {
  2.   margin-top: 0px;
  3.   padding-top: 0px;
  4. }
  6. body {
  7. font-family: Trebuchet MS, Verdana;
  8. font-size: 10pt;
  9. color: #666;
  10. padding-top: 0px;
  11. margin-top: 0px;
  12. margin-left: 50px;
  13. background-image: url(mon_background.gif);
  14. background-repeat: repeat-y;
  15. }


 
(Donc j'ai bien insisté avec un padding et margin top sur le html et le body, mais sans succès hélas...)


Message édité par toum_toum le 18-03-2010 à 17:59:04

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 18-03-2010 à 18:03:18    

C'est curieux en fait je suis quasi sûr que c'est un "paragraphe auto" que crée outlook,
car avec la souris je peux déplacer comme je veux mon image-entete en ajoutant - supprimant  
des paragraphes (ou avec la souris, etc...)
Les paddings/margins n'ont aucune influence du coup...  
 

rufo a écrit :

Plus qu'à tester avec les autres logiciels si ça le fait :/


 
En effet :D  
 
 
Merci pour le coup de main :jap:  


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed