Postion absolute Signature Gmail / Outlook
momo
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour,
J'ai un soucis de codage. Je souhaiterais intégrer le code suivant dans Gmail. Mais, la fonction CSS " positon: absolute; " n'est pas supportée par Gmail.
Est ce que vous seriez capable de reproduire le code suivant sans utiliser la valeur " positon: absolute; " et ce en gardant le même desing.
voici mon code :
<header id="separatorHeader" style="height: 15px;">
<span style=" display: block; width: 100%; height: 100%; position: relative;">
<span style="background-color: rgb(116, 116, 166); width: 100px ; left: 0px; position: absolute; height: 100%;"></span>
<span style="background-color: rgb(116, 116, 166); width: 220px; left: 120px;position: absolute; height: 100%; "></span>
<span style=" background-color: rgb(116, 116, 166); width: 140px; left: 360px; position: absolute; height: 100%; " ></span>
</span>
</header>
J'ai essayé et impossible pour moi de reproduire ce design sans utiliser le code " position "
Je vous remercie d'avance !
J'ai un soucis de codage. Je souhaiterais intégrer le code suivant dans Gmail. Mais, la fonction CSS " positon: absolute; " n'est pas supportée par Gmail.
Est ce que vous seriez capable de reproduire le code suivant sans utiliser la valeur " positon: absolute; " et ce en gardant le même desing.
voici mon code :
<header id="separatorHeader" style="height: 15px;">
<span style=" display: block; width: 100%; height: 100%; position: relative;">
<span style="background-color: rgb(116, 116, 166); width: 100px ; left: 0px; position: absolute; height: 100%;"></span>
<span style="background-color: rgb(116, 116, 166); width: 220px; left: 120px;position: absolute; height: 100%; "></span>
<span style=" background-color: rgb(116, 116, 166); width: 140px; left: 360px; position: absolute; height: 100%; " ></span>
</span>
</header>
J'ai essayé et impossible pour moi de reproduire ce design sans utiliser le code " position "
Je vous remercie d'avance !
1 réponse
-
Bonjour,
A la place duposition: absolute;
etleft: Npx;
tu pourrais essayer d'appliquer unfloat: left;
ou undisplay: inline-block;
avecmargin-left: Npx;
pour gérer les espaces.
Une solution plus moderne serait d'utiliser le positionnement via flexbox mais il ne semble toujours pas pris en charge par Gmail.
Pour les clients de messagerie, on va généralement utiliser les tableau html. Tu trouveras facilement pleins d'infos à ce sujet via ton moteur de recherche préféré.
Un lien parmi tant d'autres : https://www.lafabriquedunet.fr/email-marketing/guide/coder-email-html-css/