Проблема при создании шаблона электронной почты

Я пытаюсь создать шаблон электронной почты, как показано ниже. Я использовал таблицу. Я могу делать все, кроме того, что изображение не отображается в правильном положении. Изображения должны отображаться в середине и сверху контейнера (см. Экран 1), но я не могу это сделать. Я попытался предоставить negative margin до container, но gmail и другие почтовые службы игнорируют отрицательный запас.

enter image description here

Вот что я смог достичь до сих пор.

enter image description here

Код присутствует здесь. Кто-нибудь может помочь с этим?

Ответы

Ответ 1

Как я уже сказал:

Если бы это был я, я бы сделал верхнюю границу, а изображение - строкой. - Алекс Thomas 23 мин назад

Измените верхнюю строку следующим образом:

<td valign="bottom">
    <b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;">&nbsp;</b>
</td>
<td class="text-center" width="64">
    <img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png">    </td>
<td valign="bottom">
    <b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;">&nbsp;</b>
</td>

проверить результат - http://jsfiddle.net/562ux.

Я не тестировал это в почтовом клиенте, но, как говорит @Kheema Pandey, вы должны попробовать использовать встроенные стили.

Ответ 2

Обновленный ответ:

Вы не можете использовать отрицательный запас в html-письме. Чтобы имитировать это, есть два способа сделать это, способ вложенных таблиц и более сложный путь вставки:

<!-- The nested way -->

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
  <tr>
    <td width="200" height="80"  bgcolor="#007700">
      <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="40" bgcolor="#FFFFFF">&nbsp;
          </td>
        </tr>
        <tr>
          <td height="40" bgcolor="#CCCCCC">&nbsp;
          </td>
        </tr>
      </table>
    </td>
    <td width="100" height="80" bgcolor="#4444FF">
     <img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="200" height="80" bgcolor="#FFFFFF">
      <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="40" bgcolor="#FFFFFF">&nbsp;
          </td>
        </tr>
        <tr>
          <td height="40" bgcolor="#CCCCCC">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="500" height="200" colspan="3">&nbsp;
    </td>
 </tr>
</table>

<br><br>

<!-- The fancy rowspan way -->

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
  <tr>
    <td width="200" height="40" bgcolor="#FFFFFF">&nbsp;
    </td>
    <td width="100"  height="80" rowspan="2" bgcolor="#4444FF">
     <img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="200" height="40" bgcolor="#FFFFFF">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" height="40">&nbsp;
    </td>
    <td width="200" height="40">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="500" height="200" colspan="3">&nbsp;
    </td>
 </tr>
</table>

Оригинальный ответ:

Для базового позиционирования:

Горизонтально используйте align="left|center|right", вертикально используйте valign="top|middle|bottom"

Вот как разместить вершину изображения в верхней части таблицы:

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td height="500" align="center" valign="top">
      <img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
</table>

Ответ 3

Рекомендуется использовать inline style при создании информационного бюллетеня. Также внешний вид не поддерживает свойство margin negative.

в вашем случае изображение не будет отображаться в центре, поэтому вы можете использовать встроенный стиль здесь 'style = "text-align: center;" '.

<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>