CSS et Newsletter

laetirom1 · 07/01/2012, 19h40

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Macmillenium · 07/01/2012, 21h40

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

laetirom1 · 08/01/2012, 15h18

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Eric2a · 08/01/2012, 15h27

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.

laetirom1 · 08/01/2012, 15h40

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?

Eric2a · 08/01/2012, 15h58

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.

laetirom1 · 08/01/2012, 16h44

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

Eric2a · 08/01/2012, 17h34

Essaie à partir avec ce code

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

laetirom1 · 08/01/2012, 23h42

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

07/01/2012, 21h40	#2
Macmillenium Rédacteur/Modérateur Inscription : mars 2008 Messages : 2 290 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France, Sarthe (Pays de la Loire) Informations professionnelles : Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : mars 2008 Messages : 2 290 Points : 3 208 Points : 3 208	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 __________________ Je ne réponds pas aux questions techniques par MP.
	00

08/01/2012, 15h27	#4
Eric2a Membre Expert Eric Garidacci Inscription : septembre 2005 Messages : 1 057 Détails du profil Informations personnelles : Nom : Eric Garidacci Âge : 41 Informations forums : Inscription : septembre 2005 Messages : 1 057 Points : 1 564 Points : 1 564	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. __________________ N'oubliez pas le vote des messages utiles ainsi que le Tag [Résolu]. Mon Site Web : Corse - Actualité, Météo, Vidéos, Logiciels, ...
	00

08/01/2012, 15h58	#6
Eric2a Membre Expert Eric Garidacci Inscription : septembre 2005 Messages : 1 057 Détails du profil Informations personnelles : Nom : Eric Garidacci Âge : 41 Informations forums : Inscription : septembre 2005 Messages : 1 057 Points : 1 564 Points : 1 564	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. __________________ N'oubliez pas le vote des messages utiles ainsi que le Tag [Résolu]. Mon Site Web : Corse - Actualité, Météo, Vidéos, Logiciels, ...
	00

08/01/2012, 16h44	#7
laetirom1 Invité de passage Romain commercial Inscription : janvier 2012 Messages : 5 Détails du profil Informations personnelles : Nom : Romain Localisation : France Informations professionnelles : Activité : commercial Secteur : Tourisme - Loisirs Informations forums : Inscription : janvier 2012 Messages : 5 Points : 0 Points : 0	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
	00

08/01/2012, 23h42	#9
laetirom1 Invité de passage Romain commercial Inscription : janvier 2012 Messages : 5 Détails du profil Informations personnelles : Nom : Romain Localisation : France Informations professionnelles : Activité : commercial Secteur : Tourisme - Loisirs Informations forums : Inscription : janvier 2012 Messages : 5 Points : 0 Points : 0	Effectivement, ça m'avance pas mal du tout. Je vais me dépatouiller avec cette base qui est déja pas mal. Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email