Problème affichage Email HTML

Par Mathieu Giacometti, il y a 8 ans

Les bases HTML/CSS

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 :

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

Med-, il y a 8 ans

il est mieux pratique de n'utilise pas les tableux et travailler avec des div en mettant des position relative , absolute

Mathieu Giacometti, il y a 8 ans

D'accord je vais essayer de faire ça alors. Merci :)

Mathieu Giacometti, il y a 8 ans

Merci à vous pour votre aide! Sympa, je vais voir ce tuto :-)

Mathieu Giacometti, il y a 8 ans

Je vous remercie d'avance de bien vouloir m'aider.

Bonne journée à tous. :-)

Mathieu Giacometti, il y a 8 ans

J'ai résolu en bidouillant le tableau en fait, merci quand même. :-)

Med-, il y a 8 ans

prochainement il est préferable d'éviter l'utilisation des tableux car ils posent beaucoup de problemes surtout dans respensive design

betaWeb, il y a 8 ans

@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).