CSS et Newsletter

Version imprimable

CSS et Newsletter

Bonjour
Je cherche à créer un design propre pour une Newsletter.
Le script fonctionne parfaitement sur le web, mais des que je l'insert pour un envoie sur boite mail, la mis en page n'existe plus.
Si vous avez une idée de quel point modifier.
Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
 
<html>
 
<head>
<title>Newsletter</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
 
</head>
<body>
<style type="text/css"> 
 
div.conteneur {
margin: 10px;
width: 700px;
}                     
div.header1 {
background-color:#001FEA;
background-image:url(<a href="http://maillon.fr/images-navig/navigation_r2_c2.jpg);" target="_blank">http://maillon.fr/images-navig/navigation_r2_c2.jpg);</a>
background-repeat:no-repeat;
background-position:10px 10px;
font: normal 24px Arial, Helvetica, sans-serif;
padding:23px 10px 23px 180px;
color: #fff;
}
div.header2 {
background-color:#0099CC;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
padding:5px;
color:#fff;
text-align:right;
}
div.contenu {
font: normal 11px Arial, Helvetica, sans-serif;
color:#f60;
margin: 15px 0 0 0;
line-height:15px;
width: 530px;
float:left;
}
p.edito {
background-image:url(<a href="http://www.android-software.fr/wp-content/gallery/android/papier_froisse.jpg);" target="_blank">http://www.android-software.fr/wp-co..._froisse.jpg);</a>
border: 2px solid #0099CC;
padding:15px;
line-height:18px;
}
h1.article1 {
background-image:url(<a href="http://www.android-software.fr/wp-content/gallery/android/papier_froisse.jpg);" target="_blank">http://www.android-software.fr/wp-co..._froisse.jpg);</a>
font: bold 13px Georgia, "Times New Roman", Times, serif;
color:#f60
border-bottom: 1px solid #f60;
margin-top:20px;
}
p.article2 {
color:#555;
} 
div.breves {
float: right;
width: 150px;
margin: 15px 0 0 10px;
background-color:#001FEA;
padding: 5px;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
h2.breves1 {
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color:#f60;
}
div.pied {
clear:both;
border-top: 1px dotted #ccc;
font: normal 11px Arial, Helvetica, sans-serif;
color:#999;
text-align:center;
margin-top: 20px;
padding: 5px;
} 
 
 
</style>
 
<div class="conteneur">
<div class="header1">
NEWSLETTER MAILLON
</div>
<div class="header2">
N°1 - JANVIER 2012
</div>
 
<div class="contenu">
  <p class="edito">Ici texte 
  <br /><br />
  Ici texte
  <br />
  <br /><br />
  <strong>Romain Boulet</strong><br />
  <em>Newsletter Maillon</em></p>
<h1 class="article1">Titre du premier article  </h1>
<p class="article2"> Ici texte
<br /><br />
<strong>Pour en savoir plus :</strong> <a href="#">Maillon.fr</a></p>
<h1 class="article1">Titre du 2e article de la newsletter </h1>
<p class="article2"> Ici texte
<br /><br />
<strong>Pour en savoir plus :</strong> <a href="#">Maillon.fr</a></p>
</div>
 
<div class="breves">
<h2 class="breves1">ICI TITRE DE CETTE COLONNE  </h2>
<p class="breves2"> <A HREF="http://www.bbbparts.com/"><IMG SRC=http://www.maillon.fr/images-index/newsBBB.jpg></A></p>
<h2 class="breves1">Ici titre 1  </h2>
<p class="breves2"> Ici texte <br />
    <strong><a href="#">Lire la suite</a></strong></p>
<h2 class="breves1">Ici titre 2  </h2>
<p class="breves2">Ici texte</p>
<h2 class="breves1">Ici titre 3 </h2>
<p class="breves2">Ici texte</p>
</div>
 
<div class="pied"> Disclaimer de la newsletter de MAILLON.FR
<br />
<a href="#">Se désabonner de cette newsletter</a></div>
</div>
 
 
 
</body>
</html>

07/01/2012, 21h40
Macmillenium

Alors pour intégrer efficacement une newsletter, il faut commencer par oublier les bonnes pratiques.
Je t'invite à consulter ce guideline http://www.campaignmonitor.com/css

Visiblement les boite mail gère difficilement les style type CSS et encore moins les div.

J'ai pu à peut près réorganiser la mis en page en insèrent quelques "table",
ligne 82,90 et 108, par contre je bloque sur la colonne comportent les brèves que je n'arrive pas à aligner sur la droite.
Pour les background je verrais plus tard, c'est moins grave, mais si vous aviez une solution pour aligner correctement le cadre comportant les brèves, je doit pouvoir envoyer mon 1er mailing demain.

Merci d'avance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
 
<html>
 
<head>
<title>Newsletter</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
 
</head>
<body>
<style type="text/css"> 
 
div.conteneur {
margin: 10px;
width: 700px;
}                     
div.header1 {
background-color:#001FEA;
background-image:url(<a href="http://maillon.fr/images-navig/navigation_r2_c2.jpg);" target="_blank">http://maillon.fr/images-navig/navigation_r2_c2.jpg);</a>
background-repeat:no-repeat;
background-position:10px 10px;
font: normal 24px Arial, Helvetica, sans-serif;
padding:23px 10px 23px 180px;
color: #fff;
}
div.header2 {
background-color:#0099CC;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
padding:5px;
color:#fff;
text-align:right;
}
div.contenu {
font: normal 11px Arial, Helvetica, sans-serif;
color:#f60;
margin: 15px 0 0 0;
line-height:15px;
width: 530px;
float:left;
}
p.edito {
background-image:url(<a href="http://www.android-software.fr/wp-content/gallery/android/papier_froisse.jpg);" target="_blank">http://www.android-software.fr/wp-co..._froisse.jpg);</a>
border: 2px solid #0099CC;
padding:15px;
line-height:18px;
}
h1.article1 {
background-image:url(<a href="http://www.android-software.fr/wp-content/gallery/android/papier_froisse.jpg);" target="_blank">http://www.android-software.fr/wp-co..._froisse.jpg);</a>
font: bold 13px Georgia, "Times New Roman", Times, serif;
color:#f60
border-bottom: 1px solid #f60;
margin-top:20px;
}
p.article2 {
color:#555;
} 
div.breves {
float: right;
width: 150px;
margin: 15px 0 0 10px;
background-color:#001FEA;
padding: 5px;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
h2.breves1 {
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color:#f60;
}
div.pied {
clear:both;
border-top: 1px dotted #ccc;
font: normal 11px Arial, Helvetica, sans-serif;
color:#999;
text-align:center;
margin-top: 20px;
padding: 5px;
} 
 
 
</style>
<table width="700">
<div class="conteneur">
<div class="header1">
NEWSLETTER MAILLON
</div>
<div class="header2">
N°1 - JANVIER 2012
</div>
<table width="550">
<div class="contenu">
  <p class="edito">Ici texte 
  <br /><br />
  Ici texte
  <br />
  <br /><br />
  <strong>Romain Boulet</strong><br />
  <em>Newsletter Maillon</em></p>
<h1 class="article1">Titre du premier article  </h1>
<p class="article2"> Ici texte
<br /><br />
<strong>Pour en savoir plus :</strong> <a href="#">Maillon.fr</a></p>
<h1 class="article1">Titre du 2e article de la newsletter </h1>
<p class="article2"> Ici texte
<br /><br />
<strong>Pour en savoir plus :</strong> <a href="#">Maillon.fr</a></p>
</div>
<table width="150" align="right" valign="top">
<div class="breves">
<h2 class="breves1">ICI TITRE DE CETTE COLONNE  </h2>
<p class="breves2"> <A HREF="http://www.bbbparts.com/"><IMG SRC=http://www.maillon.fr/images-index/newsBBB.jpg></A></p>
<h2 class="breves1">Ici titre 1  </h2>
<p class="breves2"> Ici texte <br />
    <strong><a href="#">Lire la suite</a></strong></p>
<h2 class="breves1">Ici titre 2  </h2>
<p class="breves2">Ici texte</p>
<h2 class="breves1">Ici titre 3 </h2>
<p class="breves2">Ici texte</p>
</div>
</table>
</table>
<div class="pied"> Disclaimer de la newsletter de MAILLON.FR
<br />
<a href="#">Se désabonner de cette newsletter</a></div>
</div>
 
 
 
</body>
</html>

08/01/2012, 15h27
Eric2a

Salut,

Il vaut mieux éviter d'utiliser les flottants ( float: none | left | right; ) dans les documents déstinés à être lus par des clients de messagerie.
08/01/2012, 15h40
laetirom1

Citation:

Envoyé par Eric2a

Salut,

Il vaut mieux éviter d'utiliser les flottants ( float: none | left | right; ) dans les documents déstinés à être lus par des clients de messagerie.

Tu remplacerais les "float" par quel fonction pour forcer l'alignement?
08/01/2012, 15h58
Eric2a

Avec tableau consitué de lignes (<tr>) et de cellules (<td>).

Dans ton code, on a un tableau ou aucun de ces éléments n'est présent.
08/01/2012, 16h44
laetirom1

td tr

Oui pour créer des lignes et des colonnes.
Je n'arrive pas a trouver le résultat de ma mis en page

Essaie à partir avec ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
	<head>
		<title>Newsletter</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
                        .conteneur {
                                margin: 10px;
                                width: 700px;
                        }
                        .header1 {
                                background-color:#001FEA;
                                background-image:url(http://maillon.fr/images-navig/navigation_r2_c2.jpg);
                                background-repeat:no-repeat;
                                background-position:10px 10px;
                                font: normal 24px Arial, Helvetica, sans-serif;
                                padding:23px 10px 23px 180px;
                                color: #fff;
                        }
                        .header2 {
                                background-color:#0099CC;
                                font: bold 11px Verdana, Arial, Helvetica, sans-serif;
                                padding:5px;
                                color:#fff;
                                text-align:right;
                        }
                        .contenu {
                                font: normal 11px Arial, Helvetica, sans-serif;
                                color:#f60;
                                margin: 15px 0 0 0;
                                line-height:15px;
                                width: 530px;
                        }
                        .edito {
                                background-image:url(http://www.android-software.fr/wp-co..._froisse.jpg);
                                border: 2px solid #0099CC;
                                padding:15px;
                                line-height:18px;
                        }
                        .article1 {
                                background-image:url(http://www.android-software.fr/wp-co..._froisse.jpg);
                                font: bold 13px Georgia, "Times New Roman", Times, serif;
                                color:#f60
                                border-bottom: 1px solid #f60;
                                margin-top:20px;
                        }
                        .article2 {
                                color:#555;
                        }
                        .breves {
                                width: 150px;
                                margin: 15px 0 0 10px;
                                background-color:#001FEA;
                                padding: 5px;
                                font: normal 10px Verdana, Arial, Helvetica, sans-serif;
                        }
                        .breves1 {
                                font: bold 11px Verdana, Arial, Helvetica, sans-serif;
                                color:#f60;
                        }
                        .pied {
                                border-top: 1px dotted #ccc;
                                font: normal 11px Arial, Helvetica, sans-serif;
                                color:#999;
                                text-align:center;
                                margin-top: 20px;
                                padding: 5px;
                        }
                </style>
	</head>
	<body>
		<table class="conteneur">
			<tr>
				<td class="header1">NEWSLETTER MAILLON</td>
				<td class="header2">N°1 - JANVIER 2012</td>
			</tr>
			<tr>
				<td	class="contenu">
					<p class="edito">
						Ici texte<br /><br />
						Ici texte<br /><br /><br />
						<strong>Romain Boulet</strong><br />
						<em>Newsletter Maillon</em>
					</p>
					<h1 class="article1">Titre du premier article </h1>
					<p class="article2">
						Ici texte<br /><br />
						<strong>Pour en savoir plus :</strong> <a href="#">Maillon.fr</a>
					</p>
					<h1 class="article1">Titre du 2e article de la newsletter </h1>
					<p class="article2">
						Ici texte<br /><br />
						<strong>Pour en savoir plus :</strong> <a href="#">Maillon.fr</a>
					</p>
				</td>
				<td class="breves">
					<h2 class="breves1">ICI TITRE DE CETTE COLONNE </h2>
					<p class="breves2"><A HREF="http://www.bbbparts.com/"><IMG SRC=http://www.maillon.fr/images-index/newsBBB.jpg></A></p>
					<h2 class="breves1">Ici titre 1 </h2>
					<p class="breves2">
						Ici texte <br /><strong><a href="#">Lire la suite</a></strong>
					</p>
					<h2 class="breves1">Ici titre 2</h2>
					<p class="breves2">Ici texte</p>
					<h2 class="breves1">Ici titre 3</h2>
					<p class="breves2">Ici texte</p>
				</td>
			</tr>
			<tr>
				<td colspan="2" class="pied">
					Disclaimer de la newsletter de MAILLON.FR<br />
					<a href="#">Se désabonner de cette newsletter</a>
				</td>
			</tr>
		</table>
	</body>
</html>

08/01/2012, 23h42
laetirom1

Effectivement, ça m'avance pas mal du tout.
Je vais me dépatouiller avec cette base qui est déja pas mal.
Merci