Как правильно сохранить свой адрес?

Я пытаюсь поместить адрес в таблицу в html для электронной почты. Я хочу, чтобы убедиться, что мой адрес показывается, как этотКак правильно сохранить свой адрес?

Screenshot1

Но на некоторых других устройств или телефонов, он будет отображаться как это.

Screenshot2

Мой код здесь

<td style="vertical-align: center; background-color:#00693E; width: 100pt; text-align: left; font-size:8;"> 
     <div style="color:white;"> 
      Some Name for a Group 
      <br> 
      1234 Random St 
      <br> 
      San Francisco, CA 94107 
      <br> 
      website.com 
     </div> 
    </td>

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

источник

2013-12-10 Josh Wang

Это распространенная проблема в html-письме. Во-первых, ваш код должен быть выложен в 100% таблицах. Я добавил таблицу оберток, чтобы продемонстрировать, как правильно ее выровнять, но текст выравнивается влево. Вот готовый продукт:

<style> 
    .appleLinks a {color: #ffffff !important; text-decoration: none;} 
</style> 

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td align="right"> 
     <table width="100" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td valign="middle" bgcolor="#00693E" style="font-size:8px; color:#FFFFFF;"> 
      Some Name for a Group 
      <br> 
      1234&nbsp;Random&nbsp;St 
      <br> 
      San&nbsp;Francisco,&nbsp;CA&nbsp;94107 
      <br> 
      <a href="website.com" style="color: #FFFFFE; text-decoration: none;"><span class="appleLinks">website.com</span></a> 
      </td> 
     </tr> 
     </table>  
    </td> 
    </tr> 
</table>

Адрес легко скрыть, просто положить   между словами, чтобы скрыть его. Причина, по которой он является синим, заключается в том, что ваш почтовый клиент «делает вам одолжение», узнав его и предоставив вам функциональность с одним щелчком, чтобы позвонить по номеру, нанести адрес на карту или посетить сайт и т. Д.

Чтобы предотвратить это, url немного сложнее, так как вы не можете просто добавить  . Для получения более подробной информации посетите this article. Лучший метод охватывает, чтобы добавить что-то вроде этого, чтобы ваш стиль тега:

.appleLinks a {color: #ffffff !important; text-decoration: none;}

и обернуть свой адрес с пролетами:

<a href="website.com" style="color: #FFFFFE; text-decoration: none;"><span class="appleLinks">website.com</span></a>

Я взял на себя смелость добавления HREF в свой адрес. Вы заметите, что я использовал #FFFFFE, который почти белый. Это связано с тем, что Gmail игнорирует чистый белый и черный (#FFFFFF и # 000000 соответственно) и по умолчанию используется стандартная синяя ссылка (которую мы не хотим).

источник

2013-12-11 06:07:06 John

+1 Отличный ответ. Хотя почему * должен * макет быть в таблицах? Является ли это стандартом в электронных письмах, потому что на него нахмурился веб-разработчик. – KyleMit

Таблицы более согласованы между почтовыми клиентами. Они также позволяют вам использовать определенные элементы html (которые также более согласованы), которые вы не можете использовать в div. 2 из основных причин: Outlook использует механизм MS Word для рендеринга html-адреса электронной почты, а веб-клиенты, которым необходимо защитить целостность своей страницы на основе html (ваша электронная почта - это рендеринг внутри их веб-страницы), разделите CSS, который может повлиять на него. @KyleMit – John

1 .: Попробуйте стилизации вашего стола ТД с элементами атрибутов вместо встроенного стиля, например:

<td width="100pt" style="vertical-align: center; background-color:#00693E; text-align: left; font-size:8;"> 
     <div style="color:white;"> 
      Some Name for a Group 
      <br> 
      1234 Random St 
      <br> 
      San Francisco, CA 94107 
      <br> 
      website.com 
     </div> 
    </td>

2 .: Повторите эту процедуру для основной таблицы для того, чтобы заставить ширину.

3 .: Также попытайтесь поместить изображения/другой элемент и укладка его, как следующее:

<style type="text/css"> 
    @media only screen and (max-device-width:480px;) { 
    body .header { width:300px} 
    } 
</style> 

<body> 
    <img src="http://www.url.com/image.jpg" class="header" width="600px" height="100px" /> 
</body>

Это заставляет ширину изображения в 600px, так как стиль элемента перезаписывает обычный набор стилей.

источник

2013-12-11 00:03:54 Jeppe

Как правильно сохранить свой адрес?

ответ

Смежные вопросы