Bonjour tout le monde, je ne suis pas un expert mais je voulais savoir
si il était possible de créer un message en html avec une mise en forme css pour faire "un papier peint" avec outlook. J'ai déja codé un peu et j'arrive à un résultat dans les différents navigateurs, mais outlook me fait des trucs bizarre. (il n'affiche pas la hauteur à 100% par ex... ou encore quand la personne édite le texte le texte ne respecte plus les margin que j'ai défini)
Il est fort possible que mon code ne soit pas très propre mais bon je fait ca en dépannage plus qu'autre chose. je vous met des images de suite pour vous aider à comprendre.
Voici déjà le code:
Voici l'apercu dans explorer
si il était possible de créer un message en html avec une mise en forme css pour faire "un papier peint" avec outlook. J'ai déja codé un peu et j'arrive à un résultat dans les différents navigateurs, mais outlook me fait des trucs bizarre. (il n'affiche pas la hauteur à 100% par ex... ou encore quand la personne édite le texte le texte ne respecte plus les margin que j'ai défini)
Il est fort possible que mon code ne soit pas très propre mais bon je fait ca en dépannage plus qu'autre chose. je vous met des images de suite pour vous aider à comprendre.
Voici déjà le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>FGTB Communiqué de presse</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 0.8em;
}
p {
margin: 0 130px 0 130px;
}
h1 {
text-align: center;
font-family: Helvetica, Myriad, sans-serif;
font-size: 2.5em;
color: #555555;
margin-left: 125px;
margin-right: 125px;
}
h2 {
font: 1.4em Arial, Helvetica, sans-serif;
font-weight : bold;
color: #000000;
display:list-item;
list-style-image:url("carre.gif");
list-style-position:outside;
}
.style1 {
font-family: Helvetica, Arial, sans-serif;
font-size: 0,8em;
color: #777777;
}
.style2 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 0,8em;
color: #777777;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #D81B31;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #0070BC;
}
a:hover, a:active {
text-decoration: underline;
color: #999999;
}
#header {
height: 50px;
background: url('header.jpg') left no-repeat;
margin-top:5px;
margin-left: 20px;
margin-right: 20px;
}
#haut {
height: 50px;
text-align: left;
background : transparent;
margin-left: 75%;
margin-right: 3%;
}
#conteneur {
position: absolute;
width: 700px;
height: 100%;
left: 50%;
margin-left: -350px;
background: url('background.jpg') repeat-y ;
}
#centre {
background: url('fond.jpg') repeat-y ;
}
#pied {
height: 80px;
background : transparent;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<div id="conteneur">
<div id="header">
</div>
<div id="haut">
<h2>
Communiqué de presse
</h2>
<span class="style1">
Bruxelles date
<br>
yyyy
</span>
</div>
<div id="centre">
<h1>
Essai avec un titre assez long et des chiffres 2000
</h1>
<p>
Cip eros nos adionullan ulputpat. Duisit lor ad mod dipiscing er sequam, ver sit at ut ea facilis alisis nonsequip endigna augait alit utate tie dolorpe rcipsum il iure dolum alit in etuercin vulla corem augue magna faccum alit atie commodiamet dolore molorperos adip ex ero od do ea am volendipisl utetum qui erit utat.
Odoloreet utatue doloreetum niam, sit, sismodiat lum niam ipsum nullum il er suscinis nis nit, sit utat am, vero odiat aliquat. Xer autpat. Ud tie ming erosto consectet, venismo dolumsandrem quat.
Amet lortie diam, conse dignisit, conullam, quamconsed duis dunt vel et in venit in vulput et iustrud te tatum alisit prat prat amcommy nit vullute feugue dolestisi elesto cor sum ad mod magna conullu tpatie facil ullum vent ipisl erci er sed magnim ipsuscin henis delesent augiam eliquat.
Agna feuis alis alit ip erat ad eugiating elisi ex erosto consequi tat. Exercidunt accum zzriliqui tincip er aliscil laoreetue te molum velit prat. Ugiam accum doloboreet wis nonum dolobore conulputpat. Wis eugait utpat, cortin ut loborem vulputatem euis dolorem in ut illamet, quat aliquat adio consequip exero erosto dolessi.
</p>
</div>
<div id="pied">
<span class="style1">
<br>
Si vous souhaitez nous communiquer un changement d'adresse email,
<br>
merci de nous le transmettre à l'adresse : <br>
Tous nos communiqués et dossiers de presse sont également disponibles sur notre site à l'adresse :
<br>
</span>
<span class="style2">
texte
</span>
</div>
</div>
</body>
</html>
Voici l'apercu dans explorer
