web-dev-qa-db-fra.com

Positionnement absolu dans les e-mails Gmail

J'ai un client qui souhaite envoyer des chèques-cadeaux aux personnes qui s'inscrivent sur son site. Ils veulent que tout soit conçu, je ne peux donc pas simplement envoyer un SMS. J'essaie de positionner le texte sur l'image afin qu'elle puisse toujours être dynamique.

J'essaie de le faire avec un positionnement absolu. Certains systèmes de messagerie électronique l'adorent. Certains détestent ça. Gmail arrive à le détester.

Nous utilisons MailChimp pour la campagne. Voici la source complète de l'e-mail. Après cela, c'est juste l'extrait qui ne fonctionne pas.

<html> 
    <head> 
        <!-- This is a simple example template that you can edit to create your own custom templates -->
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
        <title>*|MC:SUBJECT|*</title> 

    <style type="text/css">body{background-color:#bab145;text-align:center;}#layout{border:5px solid #999999;background:#ffffff;margin:10px auto;text-align:left;}#header{background-color:#cccccc;padding:0px;color:#333333;font-size:30px;font-family:Georgia;text-align:left;}#content{font-size:13px;color:#4d4d4d;font-family:Helvetica;line-height:1.25em;padding:10px 30px;}.primary-heading{font-size:28px;font-weight:bold;color:#8b0000;font-family:Georgia;line-height:150%;margin:25px 0 0 0;}.secondary-heading{font-size:20px;font-weight:bold;color:#000000;font-style:normal;font-family:Georgia;margin:25px 0 5px 0;}#footer{background-color:#eeeeee;border-top:0px none #ffffff;padding:20px;font-size:10px;color:#333333;line-height:100%;font-family:Verdana;}#footer a{color:#800000;text-decoration:underline;font-weight:normal;}a,a:link,a:visited{color:#800000;text-decoration:underline;font-weight:normal;}</style></head> 
    <body style="background-color: #bab145;text-align: center;"> 
        <table id="layout" border="0" cellspacing="0" cellpadding="0" width="600" style="border: 5px solid #999999;background: #ffffff;margin: 10px auto;text-align: left;"> 


            <tr> 
                <td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
    <div style="position: absolute; top: 110px; left: 130px;">
        *|FNAME|* *|LNAME|*</div>
    <div style="position: absolute; top: 140px; left: 130px;">
        GetFreePellets.com</div>
    <div style="position: absolute; top: 166px; left: 130px;">
        $100</div>
    <div style="position: absolute; top: 200px; left: 370px;">
        *|COUPONCODE|*</div>
</div>
</td></tr> 

            <tr> 
                <td id="footer" style="background-color: #eeeeee;border-top: 0px none #ffffff;padding: 20px;font-size: 10px;color: #333333;line-height: 100%;font-family: Verdana;"> 
                    <p><a href="*|ARCHIVE|*" class="adminText" style="color: #800000;text-decoration: underline;font-weight: normal;">view email in browser</a> | <a href="*|UNSUB|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Update your profile</a> | <a href="*|FORWARD|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Forward to a friend</a></p> 

                    <p>*|LIST:DESCRIPTION|*</p> 

                    <p>*|HTML:LIST_ADDRESS_HTML|*</p> 
                    <p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.</p> 
                </td> 
            </tr> 
        </table>
        <span style="padding: 0px;"></span>
    <center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr>
    <td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;">
        Sent to *|EMAIL|*.  <a href="*|UNSUB|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Unsubscribe</a> |
        <a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Update Profile</a> |
        <a href="*|FORWARD|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Forward to a Friend</a>
    </td>
    <td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;">
        *|REWARDS|*
    </td>
</tr></table></center></body> 
</html>

Et juste l'extrait qui m'inquiète:

<tr> 
                <td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
    <div style="position: absolute; top: 110px; left: 130px;">
        *|FNAME|* *|LNAME|*</div>
    <div style="position: absolute; top: 140px; left: 130px;">
        GetFreePellets.com</div>
    <div style="position: absolute; top: 166px; left: 130px;">
        $100</div>
    <div style="position: absolute; top: 200px; left: 370px;">
        *|COUPONCODE|*</div>
</div>
</td></tr>

Remarque: les variables de fusion MailChimp sont ces choses entre | et | .

Voici une image de ce à quoi il ressemble dans Entourage. La barre rouge est un vrai nom, alors .. ya: Courriel de travail http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

Et le voici dans gmail (je sais que le nom n'est pas censuré): L'e-mail ne fonctionne pas http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

Des idées sur la façon de faire fonctionner cela dans gmail?

cssgmailcss-position
44
hookedonwinter

Malheureusement, vous ne pouvez pas utiliser position: absolute.

De plus, comme Outlook utilise le moteur de rendu HTML Word, vous rencontrerez également des problèmes lors du positionnement absolu.

La plupart des e-mails HTML sont présentés avec des tableaux.

Vérifiez ceci .

51
alex

Je suggère de faire le tout sous forme de tableau (le support div n'est pas fiable à 100% dans les clients de messagerie). Utilisez les propriétés de bordure pour donner au tableau la bordure verte. Insérez l'image du logo/bannière dans la première ligne du tableau (fusion de trois colonnes). Utilisez les 3 lignes suivantes pour le To, From et Amount (avec les valeurs dans les deuxième et troisième colonnes fusionnées). Et utilisez la dernière colonne de la dernière ligne pour le code cupon.

Si vous voulez vraiment la double bordure, vous pouvez soit envelopper le tableau dans un div ou pour une compatibilité maximale, envelopper le tableau dans une table à 1 colonne et 1 ligne.

Oui, c'est moche, mais les clients de messagerie ont des implémentations HTML extrêmement boguées et/ou donc ce n'est pas le moment ni l'endroit pour se tordre sur un code laid, non web2.0.

Voir le lien publié par alex pour plus d'informations.

3
slebetman

(Je sais que je réponds 4 ans plus tard ... mais cela aidera probablement quelqu'un ...) Si vous regardez attentivement, vous n'avez pas d'images d'arrière-plan, vous avez peut-être 10 images ou plus, de nombreuses couleurs d'arrière-plan et un complexe table.

Il n'y a pas d'image derrière un texte. Vous pouvez diviser votre tableau et composer votre image d'arrière-plan en plusieurs fragments d'image, et faire correspondre la couleur d'arrière-plan du texte avec ces images.

Vraiment ... dans ce modèle, il n'y a pas d'images d'arrière-plan "requises", juste un tableau complexe.

2
Beto Aveiga

Cela a fait un tour pour moi: http://blog.rebelmail.com/absolute-positioning-in-email/

Veuillez noter que ce n'est pas une solution infaillible. J'ai eu quelques problèmes avec Outlook sur Outlook et je dois le désactiver.

0
panec