Абсолютное позиционирование в электронных письмах Gmail - PullRequest
44 голосов
/ 04 августа 2010

У меня есть клиент, который хочет отправить подарочные сертификаты людям, которые зарегистрировались на их сайте.Они хотят, чтобы все было разработано, поэтому я не могу просто отправить текстовое электронное письмо.Я пытаюсь расположить текст поверх изображения, чтобы оно могло быть динамичным.

Я пытаюсь сделать это с абсолютным позиционированием.Некоторые почтовые системы любят это.Некоторые ненавидят это.Gmail ненавидит его.

Мы используем MailChimp для кампании.Вот полный источник письма.Ниже приведен только фрагмент кода, который не работает.

<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>

И фрагмент кода, о котором я беспокоюсь:

<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> 

Примечание. Переменные слияния MailChimp - это то, что между |и | .

Вот изображение того, как это выглядит в Entourage.Красная полоса - это настоящее имя, так что ... ya: E-mail работает http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

И вот оно в gmail (я знаю, имя не подвергается цензуре): E-mail не работает http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

Есть идеи, как заставить это работать в Gmail?

Ответы [ 4 ]

51 голосов
/ 04 августа 2010

К сожалению, вы не можете использовать position: absolute.

Кроме того, поскольку Outlook использует средство визуализации Word HTML, вы также столкнетесь с проблемами при использовании абсолютного позиционирования.

Большинство электронных писем в формате HTML представлены в виде таблиц.

Проверьте это .

3 голосов
/ 30 января 2017

Это помогло мне: http://blog.rebelmail.com/absolute-positioning-in-email/

Обратите внимание, что это не надежное решение. У меня были некоторые проблемы с ним в Outlook, и мне нужно отключить его.

3 голосов
/ 04 августа 2010

Я бы предложил сделать все это в виде таблицы (поддержка div не надежна на 100% в почтовых клиентах). Используйте свойства border, чтобы придать таблице зеленую рамку. Вставьте изображение логотипа / баннера в первый ряд таблицы (объединены три столбца). Используйте следующие 3 строки для Кому, От и Суммы (со значениями в объединенном втором и третьем столбцах). И используйте последний столбец последней строки для кода купона.

Если вы действительно хотите двойную границу, вы можете заключить таблицу в div или для максимальной совместимости обернуть таблицу в 1 столбец, 1 строку таблицы.

Да, это уродливо, но почтовые клиенты имеют очень глючные и / или старые реализации HTML, так что сейчас не время и не время для сомнений по поводу уродливого кода, не похожего на web 2.0.

См. Ссылку, опубликованную alex для получения дополнительной информации.

2 голосов
/ 16 октября 2014

(я знаю, что отвечаю через 4 года ... но, возможно, это кому-нибудь поможет ...) Если вы посмотрите внимательно, у вас нет фоновых изображений, возможно, у вас есть 10 или более изображений, много цветов фона и сложная таблица.

Там нет изображения за текстом. Вы можете разделить таблицу и составить фоновое изображение в виде нескольких фрагментов изображения и сопоставить цвет фона текста с этими изображениями.

Действительно ... в этом шаблоне нет "обязательных" фоновых изображений, просто сложная таблица.

...