5038 sujets

Sémantique web et HTML

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)
Bonjour,
Je te vois sans réponses, mais tu décourages les lecteurs Smiley rolleyes ,tu présentes un script de 30 lignes avec plein de paramètres (excuses moi de dire cela) mal maîtrisés !
testes ce html tu verra une idée de ce que tu cherches je crois !

<!DOCTYPE html>
<html lang="fr">
<body>
<div  style="color: #ffffff;width: 300px;height:48px;background-color:#ba7a55;border: 2px ridge rgb(186, 122, 85);outline: none;border-radius: 0px 40px 40px 0px;">
UN TEXTE comme tu veux
</div>
</body><html>

Bon courage pour la suite Smiley cligne
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)
Tu n'a pas la bonne méthode ! bien sur le html ne s'écrit pas sur un mail, mais en faisant dans le message importer HTML ça ouvre une fenêtre tu copie colle ton html et voila !
Je viens de m'en envoyer un, ça marche avec un logiciel bien moins performant que outlook (thunderbird)
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 ?
JENCAL a écrit :
Oui parce que &lt;div&gt; fonctionne très bien dans les mails.

Tu as lu ma réponse ? pas que DIV, tout le html css etc...