Верстка email письма

12
R
На сайте с 16.09.2016
Offline
5
#11
obius:
Такой вот вариант:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div>
<img usemap="#promo" src="http://rgho.st/7rTrTTc7Z/image.png" style="width:827px;height:1168px;" alt="">
<map name="promo">
<area shape="rect" coords="660,345,795,480" href="https://www.citibank.ru/russia/services/rus/cbol.htm" alt="">
</map>
</div>
</body>
</html>


Список поддерживаемых клиентов:


Судя по таблице, не работает только в gmail, но нужно проверять :)

песочница
Атрибут coords

Так как я ленивый в крайней степени, как пример кнопка размечена только одна ( citibank ).

Интересный вариант

я попробую

doebat:
Первый камень это выравнивание по левому краю.
Какой аутлук стоит на win 10? Ставил из магазина приложений или скачивал exe?
До сих пор не понимаю, почему нельзя сделать все одной картинкой, а не резать на несколько, да еще и каждую в table оборачивать?
Ну ладно, оставим это для отдельного разговора.
Каждой таблице необходимо задавать, исключений тут быть не может
style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0"


А таблице в свою очередь оборачивать в td.
Так же высоту и ширину каждой картинке, ячейке и таблице, в вашем случае это можно сделать.
Все это может в вашем случае помочь, а может быть и нет и надо более детально рассматривать.

Вот ошибка в верстке
http://joxi.ru/vAWM07aUL6XWmW
Именно здесь как раз и едет письмо из 1 поста.

Спасибо за сообщение

на компе приложение встроенное называется просто "почта" http://floomby.ru/s2/fgM8gN/full/

а оутлук есть и в сервисе litmus, там посматриваю

Цель моих манипуляций, сделать некоторые части верстки - ссылками, чтобы при нажатии был переход...

---------- Добавлено 17.09.2016 в 18:14 ----------

obius:
Таблица в таблице в таблице, потому что все в лучших традициях "рашен матрешка"🤪 ТС видать нарезал ( верстал ) через какой то софт по типу frontpage или dreamweaver :)

ограничений в используемых стилях, например "position", нечего лучше не придумал как резать картинками для того чтобы некоторые отдельные картинки сделать ссылкой

верстал ручками) а резал в photoshop)

понравилось про тег map, посмотрим, может и ненужны будут таблицы

---------- Добавлено 17.09.2016 в 18:15 ----------

"Изза ограничений"*

что то форум порезал текст

D
На сайте с 14.09.2016
Offline
4
#12

Я уже показал, что не так даже в литмусе, семантика. Под win 10 почта одна из самых привередливых, с ней может посоревноваться только doeBAT(ник именно про этот клиент).

Задача тривиальная, что бы её решить в том виде какое вас устроит, достаточно одной таблици, если нет желание высчитывать colspan то несколькими, но меньше чем сейчас.

R
На сайте с 16.09.2016
Offline
5
#13
obius:
Такой вот вариант:
Судя по таблице, не работает только в gmail, но нужно проверять :)

вполне все работает

пока вариант для меня очень актуальный

правда небольшой трабл с ссылками mailto, в тегах "area" данные ссылки просто игнорятся

вроде помогает оборачивание их в тег a 🚬

а по поводу полосы под первой картинкой, всему виной моя невнимательность, оказывается при резке самую левую нижнюю картинку я обрезал на 1px меньше по высоте, 😮 решил проблему урезав нижнюю правую)

всем спасибо за ответы 🍻

obius
На сайте с 19.08.2015
Offline
56
#14

radioactives, ну не знаю как Вы там обрезали/нарезали, у меня все сошлось и склеилось ровненько 🤣

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий