Bonjour,
Je dois intégrer un emailing (Une première pour moi), mais j'ai un soucis j'arrive pas afficher le logo du groupe ainsi que l'image de fond en en-tête (J'ai essayé mais je l'ai enlevé car ça ne marchait pas).
Si vous pouviez m'aider
Merci
Lucas
9 réponses
Bonjour.
Si tu ne nous montre pas le code HTML correspondant, je ne vois pas trop comment nous pourrons t'aider.
Si tu attends que nous te posions une foule de questions pour essayer de comprendre d'où vient le problème, pour ma part ça commence à me fatiguer et je ne pense pas être le seul.
Si dans le template de création de sujet il est indiqué :
Ce que je fais
Décrivez ici votre code ou ce que vous cherchez à faire
Ce n'est pas pour rien.
C'est bien joli de nous montrer le design de l'email, mais ce n'est pas ça qui va nous permettre de t'aider.
Je te dirais juste ceci, que tu ne peux pas mettre de lien relatif pour tes images, sauf peut-être si les images sont attachées à l'email, mais il ne faut pas en abuser, car mettre en attachement juste une image, comme le logo par exemple, ça peut le faire encore, mais s'il y en a trop, tel que par exemple une image de fond, des images pour habiller l'email afin de présenter des produits (par exemple), en plus d'alourdir l'email, ça pourrait vite agacer le destinataire.
Tu pourrais par exemple visionner : Tutoriel Vidéo HTML/CSS » Créer un email HTML, ça pourrait t'aider.
Quoi qu'il en soit, nous attendons ton code HTML pour voir d'où peut venir le problème et comment t'aider à résoudre ton problème.
@Lartak : Je suis vraiment désolé pour le code HTML je le mets toujours normalement.
Désolé vraiment
Voici le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table bgcolor="" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="" color="#fbfdfe" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table align="center" width="590" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="30" style="font-size:30px; line-height:30px;"> </td>
</tr>
<tr>
<td>
<a href="https://particuliers.engie.fr/">
<img src="https://particuliers.engie.fr//images/logo.png" width="200" border="0" alt="Logo Engie">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
</html>Le code est imonde....
Concerant la vidéo je l'ai justement suivi et c'est a 14min lorsqu'il insère le lien pour l'image je fais de même mais ça marche pas.
Ca doit etre une énorme erreur, une erreur de débutant je pense mais n'ayant jamais fait d'emailing je suis perdu.
Merci pour ton aide et encore désolé pour le code
Est-ce que tu as tout simplement essayé de copier le lien de ton image et de le charger dans ton navigateur par exemple ?
Tu as mis un double slash entre particuliers.engie.fr et images, du coup l'image ne peut être chargée étant donné que ça cible une page d'erreur.
P.S. : En fait, même sans le double slash, le lien est incorrect.
Tu ne chercherais pas à faire de faux mails par hasard ?
Car si tu as de faux liens pour tes ressources, c'est qu'il y a un problème quelque part.
Non je fais pas de faux lien rassure toi, c'est un test pour une alternance.
Je sais que le lien est mauvais mais je vois pas quel lien mettre en faite
Quand je mets le chemin en chemin relatif ça marche mais pas en absolu
EDIT : Est ce que pour faire le chemin absolu je dois connaitre les dossiers que contient le site ENGIE ainsi qu'y avoir accès ?
Quand je mets le chemin en chemin relatif ça marche mais pas en absolu
Tu ne ferais pas une erreur entre les deux termes ?
Quand tu dis que ça marche avec le lien relatif, tu veux dire quand tu veux afficher l'image sur ton site car tu as le logo sur ton serveur web/site ?
Est ce que pour faire le chemin absolu je dois connaitre les dossiers que contient le site ENGIE ainsi qu'y avoir accès ?
Pour le lien absolu, il te faut en effet l'url complete et pour ça, soit tu pointes le lien de l'image vers celle que tu aurais hébergé sur ton site, ou alors il te suffit d'aller sur le site d'Engie et sur la page d'accueil par exemple en expectant avec ton navigateur tu regardes où se trouve leur logo sur leur serveur web, soit actuellement https://particuliers.engie.fr/etc/designs/particuliers/images/logo-engie.svg, par contre comme tu pourras le remarquer si tu vas sur le lien, c'est un SVG et d'une taille importante, il te faudra donc fixer une taille sur ta balise img.
Pour le lien relatif c'est l'inverse il me semble ^^ je mets le dossier sur mon serveur (WAMP) et je mets : ../images/logo.png
Ah ouai galère je vais passer du temps dessus alors ^^
EDIT: Et si je veux une image qui est pas sur le site mais dans mes documents faut que je l'héberge sur un site type imgur ? Ca marcherait ?
Comment ça tu vas passer du temps dessus ?
Je t'ai donné l'url de la source du logo et pour le dimensionnement de celui-ci, il te suffit d'utiliser les propriétés width et height.
Et puis si tu dois utiliser ce logo en en-tête de l'email, c'est que tu dois être en alternance pour Engie, il te suffit donc de demander aux personnes concernées les différents liens vers les différents format du logo.
Si ce n'est pas le cas et que tu n'es pas en alternance pour eux, dans ce cas là tu n'as aucun droit d'utiliser le logo en tant qu'en-tête de mail, dans ce cas là autant que tu fasses avec le logo de l'entreprise pour laquelle tu es en alternance.
Et si je veux une image qui est pas sur le site mais dans mes documents faut que je l'héberge sur un site type imgur ? Ca marcherait ?
Si tu n'as pas de site personnel en ligne, il te faut en effet utiliser un service d'hébergement/partage de fichiers pour la stocker et quelle soit accessible par n'importe qui, donc aucune restriction.
Sans oublier que tu dois utiliser un lien qui renvoit bien l'entête concerant le format de l'image, donc en prenant l'exemple du lien de l'image que tu as mis dans le contenu de ton sujet, il ne faudra pas que tu utilises ce lien, mais plutôt celui de sa source, soit https://i.imgur.com/JYvxaLI.jpg.
Alors pour te resituer, je travail pas en alternance pour ENGIE, j'ai postulé et ils m'ont demandé de réaliser le design d'un email (Photo sur mon premier post) ainsi que de l'intégrer en HTML/CSS.
C'est un test, et donc j'en suis qu'au début ^^
Et pour le logo c'est bon il est au bon dimmension.
Pour les futurs images j'ai bien compris merci pour ton aide ;)
EDIT : Dernier truc pour l'image de l'enfant qui ski en fond faire un background-image ça marche ?
Je reviens car j'ai un peu avancé voici le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="" color="#fbfdfe" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table align="center" width="590" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="30" style="font-size:30px; line-height:30px;"> </td>
</tr>
<tr>
<table align="left" width="200" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<a href="https://particuliers.engie.fr/">
<img src="https://particuliers.engie.fr/etc/designs/particuliers/images/logo-engie.svg" width="200" border="0" alt="Logo Engie">
</td>
</tr>
</tbody>
</table>
<table align="right" width="200" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img src="https://i.imgur.com/X0FYix5.png" width="200" border="0" alt="Logo promo">
</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td height="100" style="font-size:100px; line-height:100px;"> </td>
</tr>
<tr>
<td style="font-family: arial; font-weight: bold; color: #3399ff; text-align: center; font-size: 40px; mso-line-height-rule: exactly; line-height: 28px"> ENGIE vous aide à payer votre matériel </td>
</tr>
<tr>
<td height="15" style="font-size:15px; line-height:15px;"> </td>
</tr>
<tr>
<td style="font-family: arial; font-weight: bold; color: #3399ff; text-align: center; font-size: 40px; mso-line-height-rule: exactly; line-height: 28px">de ski avec ses promotions :</td>
</tr>
<tr>
<td height="200" style="font-size:200px; line-height:200px;"> </td>
</tr>
<tr>
<td>
<table width="118" align="left" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img src="https://i.imgur.com/6sWQU5H.png" width="150" border="0" alt="Logo Electricite">
</td>
</tr>
</tbody>
</table>
<table align="left" width="118" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: arial; color: #3399ff; text-align: center; font-size: 20px; mso-line-height-rule: exactly; line-height: 28px">OU</td>
</tr>
</tbody>
</table>
<table align="left" width="118" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img src="https://i.imgur.com/Wm7y5TD.png" width="150" border="0" alt="Logo gaz">
</td>
</tr>
</tbody>
</table>
<table align="left" width="118" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: arial; color: #3399ff; text-align: center; font-size: 30px; mso-line-height-rule: exactly; line-height: 28px">=</td>
</tr>
</tbody>
</table>
<table align="left" width="118" cellspacing="0" cellpadding="0">
<td>
<tbody>
<tr>
<td align="center">
<img src="https://i.imgur.com/TkXbZKc.png" width="150" border="0" alt="Logo monnaie">
</td>
</tr>
</tbody>
</td>
</table>
</td>
</tr>
<tr>
<td height="30" style="font-size:30px; line-height:30px;"> </td>
</tr>
<tr>
<td style="font-family: arial; color: #3399ff; text-align: center; font-size: 20px; mso-line-height-rule: exactly; line-height: 28px"> Pour toute souscription à une offre d’éléctricité sèche ou gaz sèche*. </td>
</tr>
<tr>
<td height="2" style="font-size:2px; line-height:2px;"> </td>
</tr>
<tr>
<td style="font-family: arial; color: #3399ff; text-align: center; font-size: 20px; mso-line-height-rule: exactly; line-height: 28px">Recevez 100€ de chèques cadeaux !</td>
</tr>
<tr>
<td height="2" style="font-size:2px; line-height:2px;"> </td>
</tr>
<tr>
<td align="center">
<img src="https://i.imgur.com/RlU4nfW.png" width="200" border="0" alt="En Savoir Plus">
</td>
</tr>
<tr>
<td height="30" style="font-size:30px; line-height:30px;"> </td>
</tr>
<tr>
<td>
<table width="118" align="left" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img src="https://i.imgur.com/YQeB4jP.png" width="150" border="0" alt="Logo Electricite et Gaz">
</td>
</tr>
</tbody>
</table>
<table align="left" width="118" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: arial; color: #3399ff; text-align: center; font-size: 30px; mso-line-height-rule: exactly; line-height: 28px">=</td>
</tr>
</tbody>
</table>
<table align="left" width="118" cellspacing="0" cellpadding="0">
<td>
<tbody>
<tr>
<td align="center">
<img src="https://i.imgur.com/TkXbZKc.png" width="150" border="0" alt="Logo monnaie">
</td>
</tr>
</tbody>
</td>
</table>
</td>
</tr>
<tr>
<td height="30" style="font-size:30px; line-height:30px;"> </td>
</tr>
<tr>
<td style="font-family: arial; color: #3399ff; text-align: center; font-size: 20px; mso-line-height-rule: exactly; line-height: 28px"> Pour toute souscription à une offre duale* (Gaz + Electricité). </td>
</tr>
<tr>
<td height="2" style="font-size:2px; line-height:2px;"> </td>
</tr>
<tr>
<td style="font-family: arial; color: #3399ff; text-align: center; font-size: 20px; mso-line-height-rule: exactly; line-height: 28px">Recevez 200€ de chèques cadeaux !</td>
</tr>
<tr>
<td height="2" style="font-size:2px; line-height:2px;"> </td>
</tr>
<tr>
<td align="center">
<img src="https://i.imgur.com/RlU4nfW.png" width="200" border="0" alt="En Savoir Plus">
</td>
</tr>
<tr>
<td height="30" style="font-size:30px; line-height:30px;"> </td>
</tr>
<tr>
<td style="font-family: arial; color: black; text-align: left; font-size: 14px; mso-line-height-rule: exactly; line-height: 28px">* Les offres éligibles pour cette opérations sont : Elec we / Elec Ajust / Gaz Ajust / Duo Ajust.</td>
</tr>
<tr>
<td height="2" style="font-size:2px; line-height:2px;"> </td>
</tr>
<tr>
<td align="center">
<img src="https://i.imgur.com/6pWmjdE.png" width="100%" border="0" alt="Footer email">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
</html>mais j'ai quelques soucis de placement les icons sont à gauche et j'aimerais les centrer (Qu'ils soient un peu plus décalé vers la droite), et que le "=" et le "ou" soit aligné avec les icons voici une photo :
https://i.imgur.com/EH92yqk.png
J'aimerais aussi que le texte soit noir (je sais faire) mais que certains mots soient en bleu et en gras et là je bloque les mots vont a la ligne dès que je change la couleur et la taille.
Je voudrais insérer l'image de l'enfant en haut mais je vois pas comment faire vu que Background-image est pas supporté par tout les clients.
Dernier truc l'image en footer est pixelisé il y aurait pas un moyen qu'elle soit plus nette :
https://i.imgur.com/4uxrS7P.png
EDIT : J'ai réussi a centrer les icons ainsi que les "Ou" et "=", ainsi que le texte et l'image en footer !
Si vous savais comment mettre en image en background je suis preneur !
Merci pour votre aide
Lucas