td stacking без использования css

Наш CRM позволяет нам отправлять автоматические электронные письма нашим клиентам с помощью их программного обеспечения. Такие вещи, как квитанции о покупке и т. Д. Хотя они предлагают HTML-редактирование электронных писем, они сильно ограничены, и мы не можем использовать CSS.td stacking без использования css

Насколько то, что их стиль руководства действительно позволяет, это, кажется, все HTML и некоторые встроенный стиль, например:

<span style="color:#ffffff">white</span> 
<div style="color:#ffffff"> 
<img src="dickbutt.gif" style="width:30px;height:20px">

... все в порядке в соответствии с руководством. Тем не менее, никаких ссылок CSS или CSS не допускается, в том числе:

<link rel="stylesheet" href="/stylesheet.css" type="text/css">

или

<style type="text/css"> 
@import "/stylesheet.css"; 
</style>

или

<style type="text/css"> 
body { color:green; } 
</style>

Чтобы добавить оскорбление раны, и я должен был включать это выше, все, что находится над тегом <body> (и включая сам тег body), удаляется при сохранении файла в своем встроенном HTML-редакторе. У них есть какие-то сценарии модификации автокода, которые ссылаются на «одобренный» код в своем руководстве по стилю и лишают то, что осталось. Так что же я оставил? Совсем нет. В основном от открытия <table> до закрытия </table>. Они даже снимают </body> и </html>.

С остальным кодом я не могу использовать @media вообще или разрешить любую укладку <td>. Итак, являются ли они альтернативными способами ссылки на таблицу стилей, о которой вы знаете? ... метод, который позволит стекировать без доступа к CSS? Я в основном ищу способ, чтобы эти электронные письма реагировали на ограничения, описанные выше.

Я загрузил стиль руководства к JSfiddle: https://jsfiddle.net/Lxfqus7f

источник

2015-09-15 solateor

Похоже, ваш стиль руководства включает в себя использование некоторых стилей инлайн:

<p>Our studio is <span style="color:purple">purple.</span></p> 
    Define sections of text that require different HTML <div> 
<div style="color:#FC8301"> 
    <h3>This title.</h3> 
    <p>This is sentence.</p> 
</div>

Поскольку вы автоматически генерировать сообщения электронной почты в любом случае, почему бы просто не позволить этот слайд и объявить свои стили в переменных и использовать их там, где это необходимо?

Выделяются ли они все теги стиля? Не могли бы вы просто поместить стиль, скрытый при создании TD?

<td><style>/*rules are for quitters!*/</style>Stuff</td>

источник

2015-09-15 17:44:50

Спасибо за быстрый ответ! Через несколько минут после публикации я вошел и уточнил свою цель (внизу сообщения), которая заключается в том, чтобы выяснить способ укладки TD (или альтернативный способ реагирования на электронную почту) в соответствии с ограничениями, изложенными в руководстве по стилю , – solateor

Правильно, почему бы не поместить правила CSS, которые вы хотите поместить в таблицу стилей в html вручную? Я думаю, что ' Stuff Stuff Stuff' –

Да, да 100 раз да. У всех, кто когда-либо создавал шаблон электронной почты, были те же жалобы. Дизайн электронной почты - это веб-дизайн около 1999 года. Прежде всего, просто забудьте ссылки CSS только встроить все, что можете, и не беспокоиться с тегами @media, забыть, что они даже существуют.

Таблица Дизайн
Подумайте о <table> как электронные таблицы, в <tr> как строки таблицы, и <td> в качестве ячейки таблицы. Вместо «стекирования» TDs используют таблицы вложенности. Новая таблица может войти в TD и в стиле матрешки в стиле матрешки, вы можете сделать любой макет, который вы хотите.

<table> 
    <tr> 
     <td> 
     <table> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>4</td> 
      </tr> 
     </table> 
     </td> 
     <td>5</td> 
    </tr> 
</table>

Вышеупомянутые работы отлично.

Ответные письма
Слова отзывчивые и электронной почты обычно не идут вместе. Какие почтовые клиенты оказываются сильно ограничены, но есть способы обойти это. Как установка ширины основного стола до 100% и наличие двух TD с каждой стороны. Пример:

<table width="100%" cellspacing="0" cellpadding="0"> 
    <tr height="500px" valign="top"> 
    <td width="*" bgcolor="#00FFFF"> </td> 
    <td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td> 
    <td width="*" bgcolor="#00FFFF"> </td> 
    </tr> 
</table>

Вот как примеры в JSfiddle.

http://jsfiddle.net/e8r9ky4x/

источник

2015-09-16 22:02:39 JoeyPhillips

Использование тега стиля в теле не может быть best of things to use и даже может вызывать рвоту во многих веб-разработчиков, но это IS a possibility to utilize in Email.

Я бы настоятельно рекомендовал не использовать его таким образом вне случаев, как вы указали, и рекомендовал бы ТЯЖЕЛЫЙ тест для всех клиентов, поскольку он может иногда приводить к ошибкам.

Я бы хотел, чтобы ваш встроенный стиль делал большую часть тяжелого подъема и просто использовал теги стиля в теле для предметов, которые нельзя сделать каким-либо другим способом.

Ниже приведены некоторые полезные ресурсы в ответном HTML-письме, сделанном для работы с GMAIL APP (который почти полностью стирает тег стиля) и должен помочь вам найти оптимальный способ создания ваших писем.

Гибридный подход кодирования - http://labs.actionrocket.co/the-hybrid-coding-approach

Hybrid перевождь кодирование - http://labs.actionrocket.co/the-hybrid-coding-approach-2

гибридная правильный вариант - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question

источник

2015-09-17 14:37:47 Gortonington