Squeak.ru - шаблоны программирования

Как обеспечить отступы/поля для текста поверх изображения в Outlook 2010, Outlook 2007, Outlook 2013?

Я пытаюсь добавить текст поверх изображения, как показано ниже. Он работает со всеми почтовыми клиентами, кроме Outlook 2010, Outlook 2007, Outlook 2013. Заполнение игнорируется для всех трех. Я искал везде, пробовал все :( Пожалуйста, помогите мне получить текст поверх изображения, чтобы у него было 147 пикселей слева и 107 пикселей сверху отступа/поля/?

Решил, наконец, как показано ниже:

 <tr>
        <td background="yourimage.gif" bgcolor="#c0393f" width="600" height="240" valign="top" style="background:url('yourimage.gif')">
            <!-- M$ hack for table background images -->
            <xsl:comment>
                <![CDATA[[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" color="#c0393f" style="width:600px;height:240px;">
                    <v:fill type="frame" src="yourimage.gif" />

                    <v:textbox inset="107px,147px,0px,0px" id="headerTitle">
                    <![endif]]]>
            </xsl:comment>
            <font style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;">
                <div style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;padding:147px 0px 0px 107px;">
                    Your Text
                </div>
            </font>
           <xsl:comment>
                <![CDATA[[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]]]>
            </xsl:comment>
        </td>
    </tr>
html css outlook html-email outlook-2010
24.04.2015

Ответы:


1

заполнение div игнорируется в Outlook. Лучше всего вставить таблицу внутрь div, а затем дополнить ее TD.

В вашем коде были некоторые другие ошибки, которые я изменил ниже, но это работает в Outlook. Я бы также порекомендовал использовать padding-top и т. д. вместо простого заполнения, потому что я обнаружил, что оно более широко распространено и единообразно в почтовых клиентах.

     <table width="640" height="240">
<tr>
<td background="http://www.swagatobhatta.info/emailtest/header.gif" width="600" height="240" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
    <v:fill type="tile" src="http://www.swagatobhatta.info/emailtest/header.gif" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
   <table width="400" align="right" cellpadding="0" cellspacing="0" border="0" style="color:#c9be8a;font-weight:700;font-size:19px;width:400px;">
        <tr>
        <td style="text-transform:uppercase;padding-top:107px; padding-left:147px;">TEST CONTENTS TEST CONTENTS TEST CONTENTS</td></tr>
        </table></div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
                        </tr>
                    </table>
24.04.2015
  • У вас есть закрывающий тег шрифта, но нет открывающего. Это сделано специально? 24.04.2015
  • было ошибкой. Я удалил теги шрифта из его оригинала, должно быть, пропустил один из них. Отредактирует ответ, чтобы удалить. 24.04.2015
  • Привет,. Спасибо за ответ. Я обновил свой код, чтобы попытаться отразить ваши изменения. Каким-то образом я потерял весь текст, например, для Outlook 2010 ... Я думаю, что схожу с ума от этого. Пожалуйста помоги 24.04.2015
  • немного подправил и переделал VML, используя шаблон пуленепробиваемых фонов (backgrounds.cm). 24.04.2015
  • Спасибо еще раз. Однако моей самой большой проблемой был код, необходимый для размещения в файле xsl. Следовательно, нужен CDATA. Текст должен быть примерно сверху padding-top:107px; padding-left:147px .. То, что у вас есть, возможно, работает.. Но у меня не сработает.. если только оно не упаковано в CDATA. Я действительно запутался с этой штукой XSL/электронной почты 24.04.2015
  • хорошо - извините, даже не узнал тег - чтобы убедиться, что вы используете xml для отправки электронной почты? например, через вызов API или что-то в этом роде? Если да, то делаете ли вы это как полную вставку html или вставляете контент в уже существующий шаблон? 24.04.2015
  • Да ты прав. Я использую xml для отправки электронной почты. Текст и изображение на самом деле динамические, но для целей тестирования можно предположить, что они статичны. вставка содержимого в шаблон 24.04.2015
  • Ваше решение мне очень помогло. Спасибо 24.04.2015
    • Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...