Problème affichage Email HTML
Bonjour,
Voila je rencontre des difficultés avec l'affichage de mes images et du CSS dans un email que j'essaie d'envoyer.
J'ai bien mis mon CSS dans une balise <style> dans mon <head>.
J'ai même fait une version ou je mets mon CSS dans l'attribut style de chaque balise HTML...
J'ai en réalité 2 problèmes :
-
le logo en bas de mon email ne s'affiche pas d'emblée dans ma boîte, il faut donc que j'aie recours à l'affichage manuel dans mon mail par simple clic. Est-il possible de forcer l'affichage d'une image dans un email? Lorsque je reçois des newsletter de certaines grosses enseignes, les images sont pourtant bien chargées sans que j'aie besoin de cliquer sur quoi que ce soit...
-
et nous en venons donc à mon deuxième problème... lorsque je clique sur "afficher les images dans ce mail", une partie du CSS qui s'affichait bien avant ce clic part en vrille. C'est la partie <table> de mon email qui ne marche plus... comme si le clic sur "afficher les images dans ce mail" provoquait une altération du CSS. Je ne comprends vraiment pas pourquoi...
Voici donc mon code mais je ne sais pas s'il est utile de le fournir dans ce cas.
<!doctype html>
<html lang='fr'>
<head>
<meta charset='utf-8'>
<title>Newsletter Société</title>
<style>
body{font-family: Helvetica, Arial, sans-serif; width: 720px; font-size:14px; margin-left: 20px;}
.tableau1 {border-collapse: collapse; border-spacing : 0; font-size: 12px; width: 700px;}
.tableau1 td {border: 1px solid; text-align: center;}
.tableau1 td:nth-child(5){padding-left: 20px; padding-right:20px;}
.tableau2 {font-size: 12px; width: 400px;}
.tableau2 img{width: 60%;}
.titres td {background: #A9F5F2; padding:20px; font-size: 14px; font-weight: bold;}
#cellule1 {border-right: 1px solid black; padding-right: 10px; padding-top: 0; padding-bottom: 0; line-height: 1.5;}
#cellule2 {padding-left: 10px; padding-top: 0; padding-bottom: 0;}
</style>
</head>
<body>
<p>Cher partenaire,</p><p>Veuillez trouver, ci-dessous, la liste de nos ressources disponibles actuellement.<br>N’hésitez pas à nous contacter pour plus de renseignements ou pour obtenir le CV de nos collaborateurs.</p>
<u><b>Nos profils disponibles :</b></u><br><br>
<table class='tableau1'>
<tr class='titres'>
<td>Profil</td>
<td>Compétences</td>
<td>Disponibilité</td>
<td>Mobilité</td>
<td>Contact</td>
</tr>
<tr>
<td>Analyste - Développeur Oracle</td>
<td>Développement, conception, modélisation Oracle, SQL, PL/SQL, Forms/Report SQL Loader, Shell</td>
<td>1 mois</td>
<td>IDF</td>
<td><p>Prénom NOM</p><p> Email</p><p> Tél.</p></td>
</tr>
<tr>
<td>Ingénieur d’étude</td>
<td>Datastage PX</td>
<td>Immédiate</td>
<td>IDF</td>
<td><p>Prénom NOM</p><p>Email</p><p>Tél.</p></td>
</tr>
</table><br><br>
Nous restons à votre disposition pour tout renseignement.
<br><br>
Cordialement,
<br><br><br>
<table class='tableau2'>
<tr
<td id='cellule1'><p>L'équipe Societe</p> <p>Tél.: 0800.000.000 (Numéro Vert - Appel gratuit) <p>Email: bidule@societe.com</p></td>
<td id='cellule2'><p><img src='http://www.ciorane.com/images/ciorane.png' alt='logo Ciorane' style='width: 60%;'></p><br><p>Adresse Adresse Adresse Code Postal</p><br><p><a>www.societe.com</a></p></td>
</tr>
</table>
</body>
</html>
``
8 réponses
Je vous remercie d'avance de bien vouloir m'aider.
Bonne journée à tous. :-)
il est mieux pratique de n'utilise pas les tableux et travailler avec des div en mettant des position relative , absolute
prochainement il est préferable d'éviter l'utilisation des tableux car ils posent beaucoup de problemes surtout dans respensive design
@Med- Lorsque l'on parle de template mail, pour le moment l'utilisation des tableaux HTML est le plus conseillé, pour une question de compatibilité avec les différents clients mails (donc certains intègrent des moteurs de rendu vieillots et obsolètes ne supportant que du HTML du fond des âges).
exactement mais est ce que @mathieu voulais utiliser ce code pour le mail, si c'est le cas je l'invite a voir un tuto de grafikart sur la creation d'un mail html: https://www.grafikart.fr/tutoriels/html-css/email-html-table-678