#html #css #html-email
#HTML #css #html-электронная почта
Вопрос:
Действительно глупый вопрос, но я не могу заставить его работать так, как я хочу … больше не делаю много html. Вот что я получил:
<table border="0" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th><th width="10">amp;nbsp;</th><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th></tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} amp;nbsp;</td>
<td>amp;nbsp;</td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} amp;nbsp;</td>
</tr>
</tbody>
</table>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>
Вторая таблица не соответствует ширине 600, похоже, она где-то перезаписана. Я думал, что если я напишу любой тип встроенных стилей, он перезапишет все остальное. … Я в основном хочу, чтобы моя вторая таблица была того же размера, что и первая.
Я попытался просто поместить лишнее <tr><td></td></tr> внутри первой таблицы и полностью исключить вторую таблицу, но это делает один td шире и сжимает другой в первых двух td
***** Это для электронного письма*****
Вот header.phtml файл:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0;
padding: 0;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing:0 !important;
}
/* What it does: Fixes Outlook.com line height. */
.ExternalClass,
.ExternalClass * {
line-height: 100%;
}
/* What it does: Fix for Yahoo mail table alignment bug. */
table {
border-collapse: collapse;
margin: 0 auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
/* Create a class for every link style needed; this template needs only one for the link in the footer. */
.mobile-link--footer a {
color: #666666 !important;
}
/* What it does: Overrides styles added images. */
img {
border:0 !important;
outline:none !important;
text-decoration:none !important;
}
@media screen and (min-device-width: 768px) {
/* Hides the nav menu except for gmail */
*[class].desktopHide {
display: none !important;
}
}
/* Media Queries */
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
/* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
.email-container {
width: 100% !important;
}
/* Hides the nav menu except for gmail */
*[class].mobileHide {
display: none !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="fluid"],
img[class="fluid-centered"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: auto !important;
}
/* And center justify these ones. */
img[class="fluid-centered"] {
margin: auto !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="stack-column"],
img[class="stack-column-center"] {
width: 100% !important;
max-width: 600px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-half"],
img[class="stack-column-center-half"] {
width: 100% !important;
max-width: 300px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-third"],
img[class="stack-column-third-center"] {
width: 100% !important;
max-width: 120px !important;
height: auto !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column"],
td[class="stack-column-center"] {
display: block !important;
width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column-half"],
td[class="stack-column-half-center"] {
display: inline-block !important;
width: 50% !important;
direction: ltr !important;
}
td[class="stack-column-third"],
td[class="stack-column-third-center"] {
display: inline-block !important;
width: 32% !important;
direction: ltr !important;
}
/* And center justify these ones. */
td[class="stack-column-center"] {
text-align: center !important;
}
/* Data Table Styles */
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Change the look and layout of the remaining td's */
td[class="data-table-td"],
td[class="data-table-td-title"] {
display: block !important;
width: 100% !important;
border: 0 !important;
}
/* What it does: Changes the appearance of the first td in each row */
td[class="data-table-td-title"] {
font-weight: bold;
color: #000000;
padding: 10px 0 0 0 !important;
border-top: 2px solid #eeeeee !important;
}
/* What it does: Changes the appearance of the other td's in each row */
td[class="data-table-td"] {
padding: 5px 0 0 0 !important
}
/* What it does: Provides a visual divider between table rows. In this case, a bit of extra space. */
td[class="data-table-mobile-divider"] {
display: block !important;
height: 20px;
}
/* END Data Table Styles */
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f8f8f8" style="margin: 0px; padding: 0px; zoom: 100%;">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f8f8f8" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none; visibility:hidden; opacity:0; color:transparent; height:0; width:0; line-height:0; overflow:hidden; mso-hide: all;">
Shop new arrivals now!
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email wrapper : BEGIN -->
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="width:600px; margin: auto;" class="email-container">
<!-- Full Width, Fluid Column : BEGIN -->
<tbody>
<tr>
<td style="font-family:Helvetica, Arial, sans-serif; color: #999999; font-size:10px; text-align: right;">
<a href="[[BrowserLink]]" title="View In Browser" style="color: #999999;">View in Browser</a>
</td>
</tr>
<!-- Full Width, Fluid Column : END -->
<tr>
<td>
<!-- Logo Links : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" style="font-size: 0; line-height: 0;">amp;nbsp;</td>
</tr>
<tr>
<td valign="middle" align="center" style="padding:0px 0; text-align:center; line-height: 0;" class="stack-column-center">
<a href="http://www.website.com/?email=#ListrakEmail#" title="website.com"><img src="http://cdn.website.com/media/wysiwyg/emails/ecomm/2016_0524_dresses/0524_Dresses_09.jpg" alt="website Stone" width="600" height="70" border="0" style="margin: auto;"></a>
</td>
</tr>
<tr>
<td height="5" style="font-size: 0; line-height: 0;">amp;nbsp;</td>
</tr>
</tbody>
</table>
<!-- Logo Links : END -->
<!-- Menu : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<!-- Menu : END -->
<!-- Free Shipping Pre-Header : BEGIN -->
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mobileHide" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-top: 0px solid #eeeeee;" height="2">
<img src="http://media.website.com/6385/Shared/sca/spacer.gif" style="display: block;" height="1" border="0">
</td>
</tr>
</tbody>
</table>
Комментарии:
1. Можете ли вы включить какой-либо соответствующий CSS? Вы можете использовать инструменты разработки браузера, чтобы разобраться, какие правила CSS вступают в силу и откуда они берутся.
2. Используйте Divs, у вас гораздо больше контроля. У вас есть отдельная таблица стилей css?
3. Если это для электронной почты, вы должны добавить примечание в свой пост. Легко пропустить тег.
4. @user2182349, спасибо.. я только что добавил это примечание.
5. Что делает зависимость ? Может ли это быть причиной проблемы?
Ответ №1:
Если посмотреть на ваш первый фрагмент кода только с двумя таблицами, они отображаются с одинаковой шириной. Я изменил ваш код, чтобы поместить красную рамку размера 2 в обе таблицы, и вы можете видеть, что они действительно имеют одинаковую ширину.
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th>
<th width="10">amp;nbsp;</th>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} amp;nbsp;</td>
<td>amp;nbsp;</td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} amp;nbsp;</td>
</tr>
</tbody>
</table>
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table> Что касается вашего второго фрагмента кода ( header.phtml файла), я буду честен, я не совсем понимаю, как это связано с вашим первым. Предоставленный вами код является неполным, и вложенные таблицы внутри таблиц внутри таблиц (многие из которых представляют собой одну строку, одну ячейку данных) слишком сложны для расшифровки здесь.
Поскольку это для электронной почты, и у меня есть боевые шрамы от моих собственных боев за правильное форматирование HTML в электронном письме, я скажу, что вам нужно отбросить все современные стандарты и стили разработки HTML, особенно когда дело доходит до почтовых клиентов Microsoft, и притвориться, что это снова 1990-е годы. К сожалению, вложенные таблицы иногда необходимы, чтобы получить то, что вы хотите (содрогнуться). Как и в случае с любым HTML-дизайном, чем проще макет, тем легче вам его достичь.
Вот также несколько ссылок, которые я нашел бесценными для справки и обучения, когда дело дошло до того, чтобы заставить электронное письмо в формате HTML вести себя должным образом. Надеюсь, они также помогут вам:
Ответ №2:
На самом деле обе таблицы имеют одинаковую ширину. Если вы обновите border =»01″, вы увидите ширину таблиц должным образом.
Если вы хотите удалить вторую таблицу, добавьте еще одну строку в первую таблицу с атрибутом colspan, равным 3, потому что в первой таблице 3 столбца.
<tr><td colspan="3"></td></tr>
Я хотел бы предложить использовать классы css, а не встроенные стили.
Комментарии:
1. внутри или снаружи tbody?
2. Внутри tbody
3. не сработало .. в итоге была скорректирована таблица выше, а также та, которую я пытался изменить. я