Discussion :

[BOU59000]

Bonjour à toutes et à tous,

Je souhaite créer un site qui pourra envoyer des e-mails en automatique.
La partie "fond" est opérationnelle.
En revanche, la partie "forme" du mail me pose quelques soucis...
S'agissant d'un e-mail, j'ai intégré directement le css dans le code (je ne fais pas appel à une feuille de style au risque de faire baisser la note du mail et que ce dernier se retrouve en spam).

Lorsque j'affiche le résultat sur une page web, j'obtiens cela:


Lorsque je transmets le message, voila comment il s'affiche en tant qu’e-mail:


Il y a une légère différence (et ce jaune flashy qui pique aux yeux n'est pas le seul responsable!).

Voici le code:

Code css :

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
<div style="background-color:#FFFFFF; border-radius:5px;">
				<div style="display: flex; flex-direction:column; border-radius:5px;">
					<div style="background-color:#000000; text-align:center; border-top-left-radius: 5px;border-top-right-radius: 5px;"><p style="color:yellow; font-size:xxx-large; font-weight:bold;">TITRE</p></div>
					<div style="background-color:#000000; border-bottom: 2px solid; border-color:yellow;"></div>
					<div style="background-color:#000000; border-color:yellow; border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;">
						<div style="background-color:yellow; width:20%; border-radius:5px; margin: 0 auto;">
						<p style="color:#000000; font-size:x-large; border-radius: 10px; text-align:center">Message stylé</p>
						</div>
					</div>
				</div>
					<div style="color:#000000; margin: 100px;">
 
						<h1 style="background-color:yellow; border-radius:5px;text-align:center;font-size:xx-large;">TITRE PRINCIPAL</h1>
						</br>
						<h2 style="background-color:#FFFFFF; border: 2px solid; border-color:black; border-radius:5px; color:#000000; font-size:x-large; text-align:center">Sous Titre 1</h2>
 
						<p style="text-align:justify;">
						Lorem ipsum dolor sit amet, consectetur adipiscing 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 style="text-align:justify;">
						Lorem ipsum dolor sit amet, consectetur adipiscing 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 style="text-align:justify;">
						Lorem ipsum dolor sit amet, consectetur adipiscing 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 style="text-align:justify;">
						Lorem ipsum dolor sit amet, consectetur adipiscing 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>
						</br>
 
					</div>
					<div style="background-color:#000000; text-align:center; border-radius:5px;"><p style="color:#FFFFFF; padding:20px 0 20px 0";>Désinscription</p></div>
			</div>

Des idées sur la manière d'améliorer cela?

D'avance merci pour vos retours