1 pièce(s) jointe(s)
Du code pour envoyer des mails avec Mailjet.
Hello les amis,
et surtout :help:
Je galère depuis des heures sur un truc tout bête.
Je veux créer un modèle pour envoyer mes maillings avec Mailjet.
J'ai donc écrit un beau code que j'ai tellement modifié que ça ne ressemble plus à rien...
Il est en dessous.
Dans tous les cas mon mail s'affiche tout beau sur les clients mails "normaux".
Dans la version qui est en dessous il s'affiche aussi tout beau sur mon portable (et donc je suppose sur les tablettes aussi).
Par contre sur Outlook c'est la cata ! L'image est énorme, le texte tout écrasé sur la droite comme ça :
Pièce jointe 662365
Ce que je voudrais faire c'est un truc responsive dans tous les cas (même outlook).
Soit on a assez de largeur et on affiche côte a cote, soit si c'est trop étroit c'est image au dessus et texte dessous.
Du coup voilà mon code, si vous avez une idée d'ou ça foire (surement un peu partout :oops:).
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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hors Antenne - James Deano</title>
<style>
/* Pour tous les écrans */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #ffffff; /* Fond blanc général */
}
table {
border-collapse: collapse;
}
/* On centre et on limite la largeur sur les grands écrans */
.content-table {
width: 90%;
max-width: 1000px; /* Pour pas que ça devienne trop large sur les écrans super larges */
margin: 0 auto;
}
.left-column img {
width: 80%; /* On réduit un peu l'image */
height: auto; /* On garde les proportions pour que l'affiche ne se deforme pas */
}
/* Pour écrans plus petits (768px norme trouvee sur le net) */
@media only screen and (max-width: 768px) {
.content-table {
width: 95%; /* Une petite marge pour pas coller les bords */
}
.left-column, .right-column {
width: 100%;
display: block;
margin-bottom: 20px; /* Ajoute un espace entre enetet et pied de page */
}
.left-column img {
width: 100%; /* La on garde la grande largeur pour les GSM */
}
/* Ajuste la taille du texte pour les petits écrans a voir si assez grand */
.right-column p {
font-size: 16px;
}
}
/* espace a voir si necessaire */
.spacer {
height: 30px; /* Taille de l'espace */
background-color: #ffffff;
}
</style>
</head>
<body>
<!-- Logo du haut -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="https://www.art-media-entertainment.fr/transfert/imagesmail/ame.jpg" alt="Logo" width="1466" height="89" style="display:block; max-width:100%; height:auto;">
</td>
</tr>
</table>
<!-- Espace -->
<div class="spacer"></div>
<!-- bloc principal avec fond gris -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f0f0f0">
<tr>
<td align="center">
<table class="content-table" cellpadding="20" cellspacing="0" border="0">
<tr>
<!-- Colonne de gauche avec laffiche du spectacle -->
<td class="left-column" width="30%" valign="top">
<img src="https://www.art-media-entertainment.fr/transfert/imagesmail/deano.JPG" alt="Affiche du spectacle">
</td>
<!-- Colonne de droite avec le texte -->
<td class="right-column" width="70%" valign="top">
<p><strong>Hors Antenne, le nouveau spectacle de James Deano.</strong></p>
<p>Après plus de 10 ans de bons et loyaux services en tant qu’envoyé… très spécial dans l’émission culte « Le Grand Cactus », James Deano revient sur scène !</p>
<p>Déjà bien connu du public pour ses prestations scéniques, il fait un retour très attendu, après une longue période passée devant les caméras de la RTBF.</p>
<p>Avec ce spectacle en parfaite continuité avec l’émission, James nous invite à découvrir ce qui se passe vraiment quand les caméras s’éteignent.</p>
<p>Des sketchs mordants et quelques surprises musicales, il dévoile les coulisses de sa vie à la télé et n’hésite pas à chambrer son célèbre complice, Jérôme De Warzée.</p>
<p>Avec son incontournable "qu’il est con, ce De Warzée !", James joue avec son public, même si tout le monde sait que c’est de l’humour, et qu’en réalité, ces deux-là s’adorent.</p>
<p>Toujours aussi impertinent, James Deano mélange autodérision et piques bienveillantes, offrant un spectacle où il se montre encore plus authentique et direct, mais surtout... plus drôle que jamais !</p>
<p>Un spectacle à découvrir hors antenne, disponible dès maintenant pour vos salles de spectacles, centres culturels ou événements d'entreprise.</p>
<p>Plus d'info <a href="mailto:contact@art-media-entertainment.fr">contact@art-media-entertainment.fr</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Espace -->
<div class="spacer"></div>
<!-- pied de page et desabonement -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<p>Art Média Entertainment, <a href="http://www.art-media-entertainment.fr">www.art-media-entertainment.fr</a>, contact@art-media-entertainment.fr</p>
<p>Tél : 0032 2 315 70 73 / 003 7 83 76 45 98</p>
<p>Cet email est envoyé à [[EMAIL_TO]], <a href="[[UNSUB_LINK_EN]]" style="color:inherit;text-decoration:none;" target="_blank">Pour vous désinscrire cliquez ici</a>.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> |
