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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu]Création d'une page html pour email, léger soucis avec outlook

toum_toum

Vivons masqués

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 :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mon courrier</title>
<style type="text/css">
<!--
body {
font-family: Trebuchet MS, Verdana;
font-size: 10pt;
color: #666;
margin-top: 0px;
margin-left: 50px; <- margin-left pour décaler automatiquement le texte à taper dans outlook
background-image: url(mon_background.gif);
background-repeat: repeat-y;
}
img {
margin-top: 0px;
margin-left: -50px; <- margin-left négatif pour replacer l'image normalement ("contrer" le margin-left du body)
}
-->
</style>
</head>
<body>
<img src="mon_entete.gif" width="461" height="58" />
</body>
</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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

Publicité

rufo

Pas me confondre avec Lycos!

tu devrais mettre comme règle css :

Code :

html {
margin: 0;
padding: 0;
}

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

toum_toum

Vivons masqués

rufo a écrit :

tu devrais mettre comme règle css :

Code :

html {
margin: 0;
padding: 0;
}

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...).

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

toum_toum

Vivons masqués

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

rufo

Pas me confondre avec Lycos!

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

toum_toum

Vivons masqués

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> </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...

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

rufo

Pas me confondre avec Lycos!

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

Message cité 1 fois

toum_toum

Vivons masqués

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 :

html {
margin-top: 0px;
padding-top: 0px;
}
body {
font-family: Trebuchet MS, Verdana;
font-size: 10pt;
color: #666;
padding-top: 0px;
margin-top: 0px;
margin-left: 50px;
background-image: url(mon_background.gif);
background-repeat: repeat-y;
}

(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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

toum_toum

Vivons masqués

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

Merci pour le coup de main :jap:

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Création de liste article pour site web	[résolu] C#/ process cmd.exe et sequence ALT + <020>ou CTRL+T
[Résolu] Erreur avec ereg_replace	gif pendant chargement de page
executer un script shell dans une page web	[RESOLU] [JS] Echanger deux images
Colorbox - plusieurs thèmes en une page	Free - mail et contenu html
[résolu] Parcourir un objet?	Aide config email templat
Plus de sujets relatifs à : [Résolu]Création d'une page html pour email, léger soucis avec outlook

Page générée en 0.056 secondes