5568 sujets

Sémantique web et HTML

[Résolu] Integration Newsletter : bouton 1 px décalage

Bonjour,

Sur une newsletter que j’intègre j’ai un souci avec un bouton. J’ai 1 px de décalage entre le texte et l’image. J’ai réussi à résoudre le problème sur bouton carré en encapsulant tous les contenus dans un tableau avec un fond de la même couleur .Mais avec un bouton avec des bords arrondis je trouve aucune solution. Et je peux même pas utiliser le bordeur radius car certains clients mail n’acceptent pas.

Avez-vous une solution ?

Voici le code :

https://jsfiddle.net/92zLbxc4/



<!doctype html>
<html lang="fr">
   <head>
      <meta charset="utf-8">
      <title>Tableau</title>
   </head>
   <body>
      <table cellpadding="0" cellspacing="0" border="0" width="650" style="width: 650px; " class="full-width">
         <tr>
            <td height="40" bgcolor="#FFFFFF">
            </td>
         </tr>
         <tr>
            <td width="200" align="center" valign="middle" bgcolor="#b97a57" style="vertical-align: middle;padding:  0 0 0 0; line-height: 0px; color: #ffffff; " class="w-auto pl-20 pr-20">
               <a class="font-15" href="#" style="font-family:Arial,Georgia, 'Times New Roman', Times, serif; font-size: 20px; text-decoration: none; color: #ffffff; text-align: center; text-decoration: none;" target="_blank">
               Lorme lipsum 
               </a>
            </td>
            <td width="50" style="padding:0 0px 0 0; line-height: 0px;
               ">
               <a href="#" target="_blank">
               <img src="https://image.noelshack.com/fichiers/2019/37/5/1568400276-bouton.png" width="32" height="35" border="0" alt="test" style="display:block;" />
               </a>
            </td>
            <td width="400" style="padding:0 0px 0 0; line-height: 0px;">
            </td>
         </tr>
         <tr>
            <td height="20" bgcolor="#FFFFFF">
            </td>
         </tr>
      </table>
   </body>
</html>


Voici le rendu :
https://image.noelshack.com/fichiers/2019/37/5/1568400287-img.png

Merci
Modifié par dop10 (13 Sep 2019 - 20:53)
Le border border-radius: 0px 40px 40px 0px; n'est pas pris en compte par les clients mail comme Outlook ! Smiley decu
L'utilisation de balise "div" n'est pas recommandé non plus pour l'intégration de Newsletter.
Avez vous une autre solution ?

Merci
Modifié par dop10 (15 Sep 2019 - 09:31)
Salut

dop10 a écrit :

L'utilisation de balise "div" n'est pas recommandé non plus pour l'intégration de Newsletter.


D'où tiens tu cette phrase du coup ?
Jean-Pierre-Bruneau a écrit :

Oui c'est surement qu'il ne lit que les factnews Smiley cligne


C'est écrit sur le site de Alsacreation! Merci pour la solution . Elle fonctionne effectivement.

https://www.alsacreations.com/tuto/lire/1533-Un-e-mail-en-HTML-responsive-multi-clients.html

Des tableaux pour la mise en page
Oubliez ce qu’on vous a appris à l’école : pour les e-mails, les tableaux, c’est le bien. Enfin, c’est plutôt qu'il n'y a pas beaucoup de choix. Attention, nous ne disons en aucun cas que les éléments de bloc comme <div> ou <p> sont à proscrire, mais quand il s’agit de la mise en page, il vaut mieux utiliser des tableaux puisque les placement en CSS utilisant display ou même float deviennent problématiques sur les clients mail.
Modifié par dop10 (29 Sep 2019 - 14:21)
Sujet clos
Aller à