Можно ли использовать absolute в верстке письма?
Есть ли варианты использовать абсолют, ну и соответственно right, left, top, bottom? У меня задача встала, нужно на огромную картинку наложить ссылки и их расставить по местам. Есть варианты? Вообще хоть как то можно использовать CSS в вёрстке письма?
Ответы (1 шт):
Если вы готовите HTML-документ для почтовой рассылки, то CSS отдельным файлом выносить не получится. Многие почтовые программы обрезают все внешние CSS файлы и медиа-запросы. В данном случае для определения стиля элементов письма с помощью правил CSS применяется атрибут style. Вот его синтаксис:
<тег style="правила описания стилей"></тег>
В качестве значений указываются обычные стилевые правила. Вначале имя стилевого свойства, а затем через двоеточие его значение. Стилевые свойства разделяются между собой точкой с запятой. Атрибут style применяется к различным тегам.
Это была небольшая теория. Теперь вернемся непосредственно к вашему вопросу:
У меня задача встала, нужно на огромную картинку наложить ссылки и их расставить по местам.
Приведу вам простой пример, где показано, каким образом можно решить вашу задачу:
<div style="position: relative; width: 500px; height: 300px;
background: url(https://i.imgur.com/Joed5du.jpg);
background-position: bottom right;">
<a href="#" style="position: absolute; top: 60px; left: 50px;">Ссылка 1</a>
<a href="#" style="position: absolute; bottom: 50px; left: 85px;">Ссылка 2</a>
<a href="#" style="position: absolute; top: 85px; right: 80px;">Ссылка 3</a>
</div>
Однако, при всём этом нужно ещё учитывать, что некоторые почтовые клиенты в целях безопасности могут вырезать часть HTML-кода письма. Кроме этого, и каждый провайдер может по-разному реагировать на одно и то же свойство.
upd. Добавил пример, в случае, если у вас табличная вёрстка. Хотя, исходя из моего уже многолетнего опыта по email-рассылкам, могу утверждать, что абсолютно никакой разницы нет, какая будет вёрстка.
<table style="border-collapse: collapse; border-spacing: 0;
position: relative; width: 500px; height: 300px;
background: url(https://i.imgur.com/Joed5du.jpg);
background-position: bottom right;">
<tbody>
<tr>
<td>
<a href="#" style="position: absolute; top: 60px; left: 50px;">Ссылка 1</a>
<a href="#" style="position: absolute; bottom: 50px; left: 85px;">Ссылка 2</a>
<a href="#" style="position: absolute; top: 85px; right: 80px;">Ссылка 3</a>
</td>
</tr>
</tbody>
</table>