#html #css #email #outlook #html-email
#HTML #css #Адрес электронной почты #outlook #html-электронная почта
Вопрос:
Я пытаюсь добавить заголовок в свои электронные письма. Это будет изображение, и я хочу, чтобы оно отображалось так: [баннер] [текст письма] [подпись]
Но проблема в том, что изображение отображается с двумя пустыми строками над ним и курсором, размещенным на первой. Это в Outlook.
Если кто-нибудь знает, как я могу это исправить, я был бы признателен.
PS Мне нужно, чтобы это работало и в Thunderbird.
Я создал три блока div, один для баннера, один для тела электронного письма и один для подписи, с пустой строкой абзаца в среднем блоке div. Я думал, что так это будет работать, но нет…
<div>
<table class=MsoNormalTable width='100%' role='presentation' cellpadding=0 cellspacing=0 border=0 style='background: none;border-width: 0;margin: 0;mso-padding-alt: 0 0 0 0; padding: 0 0 0 0;'>
<tbody>
<tr valign='middle'>
<td valign='middle'>
<a href='https://google.com' style='text-decoration: none;'>
<img src='xxx' width=720 height=74 name='Banner' style='vertical-align: middle;display:block;' alt=''/>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div style='background: none; mso-padding-alt: 15px 0 0 0; padding:15px 0 0 0;'>
<p> </p>
</div>
Комментарии:
1. Могу ли я спросить, почему вы вообще беспокоитесь о таблице, если единственное, что в нее входит, — это изображение?
2. Я не уверен, но, вероятно, потому, что я читал, что почтовые клиенты справляются с тем, как все устроено в таблице, лучше, чем с блоками div. Но я не думаю, что это вызывает мои проблемы.
3. Вы упомянули
I created three div blocks, но у вас есть два div только в коде в вашем сообщении. Кроме того, почему бы не использовать таблицу с 3 строками, а не 3 div для каждой строки?4. Казалось бессмысленным помещать здесь код для 3-го блока div. Это содержит подпись, и она работает отлично. Что касается помещения их в таблицу из 3 строк, казалось странным писать свой текст в ячейке таблицы. Я думал, что блоки div будут более интуитивно понятными.
5. Это не бессмысленно. Ваш вопрос содержал просьбу о помощи в 3 строках, а предоставленный код состоял из 2, поэтому я спросил. Также вы кодируете для электронной почты, а не для Интернета. Электронные письма обрабатываются с помощью таблиц, если вы не используете гибридный метод кодирования, тогда вы используете divs.
Ответ №1:
.demo
{
border:1px solid black;
} <div class="banner-div">
<table class="MsoNormalTable" width='100%' role='presentation' cellpadding=0 cellspacing=0 border=2 style='background: none;border-width: 0;margin: 0;mso-padding-alt: 0 0 0 0; padding: 0 0 0 0;'>
<tbody class="demo">
<tr valign='middle'>
<td valign='middle'>
<a href='https://google.com' style='text-decoration: none;'>
<img src='demoimg.jpg' width=100% height="400px;" name='Banner' style='vertical-align: middle;display:block;' alt='banner here...'/>
</a>
</td>
</tr>
<tr>
<td>
<h2>email body here.....</h2>
</td>
</tr>
</tbody>
</table>
</div>
<div class="signature demo" style='background: none; mso-padding-alt: 15px 0 0 0; padding:15px 0 0 0;'>
<p>signature here....</p>
</div> я думаю, что ваша проблема решена с помощью update width =»100%» и добавления второго тега tr для тела письма
Комментарии:
1. Не проще ли было бы использовать таблицу с 3 строками?
2. Спасибо за идею. Проблема, по крайней мере, с Outlook, заключается в том, что он помещает разрывы строк перед всем этим и курсор на эти новые строки (когда вы начинаете писать электронное письмо). То же самое в Thunderbird на самом деле… Мне это нужно для подписи компании, поэтому я не могу сказать каждому сотруднику вручную удалять лишние строки и перемещать курсор под баннером каждый раз, когда они пишут электронное письмо. Это требует времени и, скажем так, не … элегантно. Я думал, что использование блоков div подскажет почтовому клиенту вести себя лучше… но нет… Что вы думаете ? Как я мог это решить?
3. div наиболее полезен, чем table, а также отзывчив .., поэтому вы используете divs, а не table в 3 строки..