28220 sujets

CSS et mise en forme, CSS3

Modèle pour outlook

Bonjour à tous,

Je dois réaliser pour l'entreprise pour laquelle je travaille, un modèle de papier à lettres pour Outlook.

Très soucieux de produire du code propre (XHTML 1.0 strict / CSS level 2), je me suis donc lancé dans la création d'une page XHTML avec une feuille de styles qui fonctionne parfaitement sous Firefox et qui est validée XHTML 1.0 strict et CSS...

Ensuite, si je teste sour IE, j'ai forcément des erreurs d'affichage, que je saurais résoudre en tant normal, mais j'ai quelques contraintes liées au développement spécifique pour Outlook:
- Pas d'images !
- Le texte du message doit commencer directement après la balise <body>, donc pas de div #conteneur possible (apparement contrainte outlook)

Si en plus je teste sous Outlook, autant dire que ça devient la croix et la bannière, pour une page tout à fait basique 3x rien dessus:

Voici le code de ma page:

<!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">
<head>
<title>Le nom de mon entreprise I /  Le nom de mon entreprise II </title>
<style type="text/css">
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #241F67;
	margin: 70px 0 0 40px;
	padding:0;
}
a {
	font-size: 12px;
	color: #241F67;
	text-decoration: underline;
	}
a:active, a:focus, a:hover {
	font-size: 12px;
	text-decoration: underline;
	color: #FF3300;
}
hr {
	color: #241F67;
	background-color: #241F67;
	height: 1px;
	border: 0;

}
#header {
	background-color:#241F67;
	font-size:12px;
	margin:0;
	padding: 0;
	color: #FFFFFF;
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width: 100%;
}
#headerContent {
	padding: 5px 0 5px 40px;
	margin:0;
	width:370px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<p>Salutations </p>
<p>Message </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<hr />
<div id="header"><div id="headerContent">Le nom de mon entreprise I<br />
Le nom de mon entreprise II </div></div>
</body>
</html>


Tous les conseils sont les bienvenus, parce que là, je n'apperçois même pas l'ombre d'une solution avec ce logiciel (Outlook) qui m'est imposé...

Merci pour votre aide
Oublier le développement XHTML CSS standard et faire ce qui est demandé: un modèle de papier à lettres pour Outlook, optimisé pour celui-ci Smiley cligne

<edit>Plus sérieusement: l'intégration standard n'a aucun intérêt dans ce cas.</>
Modifié par Laurent Denis (30 Jan 2007 - 15:22)
Merci du conseil,

Il va donc falloir que je bricole et que je procède par tatonnements !??? Smiley langue

Pas facile à comprendre l'Outlook Smiley bawling . C'est pourtant du HTML, mais ça ne repose sur rien.... Smiley biggol
Sujet clos
Aller à