5106 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 ?
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)