Таблицы HTML с использованием изображений JPG в качестве границ - PullRequest
0 голосов
/ 08 августа 2009

Я пытаюсь создать «сертификат» для использования в электронной почте capmaign. Мы пытаемся поддерживать совместимость с Outlook 2007, и это ограничивает нас от использования свойства background для простой загрузки одного изображения для отображения за текстом.

Я разделил свои границы на 4 части (слева, сверху, справа, снизу) и поместил их в составные столбцы и строки, но не могу заставить их правильно выстроиться. Любые предложения, основанные на этом коде?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Special Offer from Toyota/Scion of Clifton Park</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-style: italic;
}
.style4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.style8 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #666666;
}
.style9 {color: #666666}
.style10 {color: #000000}

}
-->
</style>
</head>

<body>
<table width="610" height="984" border="0" cellspacing="0" cellpadding="0">
  <tr></tr>


  <tr>
  <td width="74" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
  <td colspan="5"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
  </tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="91">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5"><div align="center">
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4"><span class="style8"><br/> 
      </span><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="466" height="63" align="top" /><br />
    </p>
    </div></td>
</tr>
</table>

</body>
</html>

Ответы [ 8 ]

1 голос
/ 10 августа 2009

Спасибо за все ваши предложения - БОЛЬШАЯ ПОМОЩЬ! Вот чем я закончил, если вам интересно. Предварительный просмотр некорректен в браузерах, но корректно отображается в почтовых клиентах на стороне получателя. Я успешно протестировал Gmail, Outlook 2000/2007, Yahoo (старый / новый), Hotmail, Thunderbird.

Также нашёл это руководство по CSS в письмах http://www.campaignmonitor.com/css/ (в основном избегайте этого при отправке клиентам Outlook 2007/2010 и Gmail)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: #FFF;
    text-align: left;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body table tr td {
    font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<table width="600" height="984" border="0" cellspacing="0" cellpadding="0" font-family: Arial, Helvetica, sans-serif;>    
<tr>
<td valign="top" width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" /></td>

<td valign="top"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" /></td>

<td valign="top" width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" /></td>
</tr> 
<tr>
<td>
  <p align="center"><font size="+1"> <strong>Special Introductory Maintenance Offer for:</strong></font></p>
  <p align="center"><em>Insert Name<br />Insert Vehicle<br />Insert Vin#<br />Insert Delivery Date</em></p>
  <p align="center"><strong>First 5,000 Miles / 6 Months <br /> Maintenance Service<br />$29.95<br /><font size="-4">(a $79.95 value)<br/><br/><font size="-1">to include:<br /></strong></p>
    <ul>
    <li><div align="left">Inspect and top off washer fluid, brake fluid, <br />
        power steering fluid, and coolant level</div></li>
    <li><div align="left"><font size="-1">Set tire pressures and rotate tires</div></li>
    <li><div align="left">Thorough tire inspection for abnormal wear or damage</div></li>
    <li><div align="left">Inspect wiper blades</div></li>
    <li><div align="left">Replace engine oil and filter</div></li>
    <li><div align="left">Reset maintenance indicator </div></li>
    </font>
    </ul>

  <p align="left"><font size="-1"><span>Toyota of Clifton Park would like to <strong>Thank You</strong> for  your vehicle purchase. We have taken time in caring for and preparing  your vehicle before your purchase and would like to continue that same  care throughout your ownership. I personally invite you to take  advantage of the above offer for your first full Toyota scheduled  maintenance in our Award winning service department. The initial &quot;break  in&quot; inspection is crucial to the safety and longevity of your new  investment.<br /><br />
    Our call center will be following up with you as a reminder when the time gets close. If you have any questions or concerns please don't  hesitate to call the service department at 518-664-4444. Any one of our associates can answer your questions. We truly appreciate your business and look forward to seeing you soon.</span></font></p>

<p align="center"><span>Thank You, <br />Jason Halliday, Service Manager<br />Toyota / Scion of Clifton Park<br /><font size="-3"><em><br /><br />Certificate expires 6 months from delivery date or <br />5,000 miles, whichever comes first.<br />Applicable sales tax not included.<br />Certificate not transferable, valid only for the above customer and vehicle.<br /> NC OPCODE FSCERT<br /></em></font></span></p>
</td>     
</tr>
<tr>
<td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63"/></td>     
</tr>
</table>
</body>
</html>
0 голосов
/ 21 августа 2013

Обдумав этот вопрос для моих собственных требований «таблиц HTML, использующих изображения в качестве границ», я пришел к решению, которого больше нигде не видел. Он использует отдельный фон для tbody, tr и td для достижения желаемого эффекта. Вот совместимое с IE8 (CSS2) решение:

table.table tbody {
      background-color: #dddddd;
}

table.table tbody tr td, table.table thead tr th {
    background-image: url('some-image.png');
    background-position: right;
    background-repeat: repeat-y;
}

table.table tbody tr {
    background-image: url('some-image.png');
    background-position: top;
    background-repeat: repeat-x;
}

Решение в CSS3 заключается в использовании нескольких фонов:

table.table tbody tr td, table.table thead tr th {
      background-image: url('some-image.png'), url('some-image.png');
      background-position: top, right;
      background-repeat: repeat-x, repeat-y;
}

Надеюсь, это поможет кому-то в будущем.

0 голосов
/ 08 августа 2009

Убедитесь, что вы сбросили все свои CSS , чтобы поля и отступы были равны 0, прежде чем применять какие-либо стили.

0 голосов
/ 08 августа 2009
  1. Установите верхнюю среднюю ячейку в вертикальное положение: .... top_image3.jpg ....

2. Вырежьте новое изображение для использования в нижней части, которое включает левый, средний и правый столбцы всей таблицы, и добавьте его в ячейку с colspan = "7"

0 голосов
/ 08 августа 2009

... есть несколько способов исправить это, один (если он будет работать в outlook и отображаться во всех других почтовых агентах) - разместить изображения верхней и нижней границ абсолютно в ячейках.

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

0 голосов
/ 08 августа 2009

Мои предложения:

  1. Установите правильные значения ширины изображения (ширина верхней и нижней части составляет 459 пикселей).
  2. Установите общую ширину таблицы (459 + 71 + 71 = 600).
  3. Создайте отдельную строку для нижнего изображения и поместите весь ваш контент в одну ячейку таблицы. Если вам нужно, вы можете вложить больше таблиц внутрь.


<table width="600" height="984" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
       <td><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" align="left" /></td>
       <td width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
     </tr>
     <tr>
        <td>Put all your content in here.</td>
     </tr>
     <tr>
        <td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63" align="top" /></td>
     </tr>
</table>
0 голосов
/ 08 августа 2009

Вы можете сделать это, добавив valign = "top" и valign = "bottom" к центральным ячейкам вверху и внизу таблицы.

вроде так:

<tr>
  <td width="74" rowspan="11"><img src="left_image2.jpg"  width="70" height="984" align="top" /></td>
  <td colspan="5" valign="top"><img src="top_image3.jpg" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11" ><img src="http:right_image2.jpg" border=0  width="71" height="984" align="bottom" /></td>
</tr>
......
<tr  valign="bottom">
0 голосов
/ 08 августа 2009

Все ваши ячейки среднего столбца имеют переменную высоту (не фиксированную), поэтому браузер просто попытается настроить их так, как он считает наилучшим.

Вам нужно исправить их высоту, используя атрибут style следующим образом:

<td style="height: 171px;">

Это было бы для ячейки, содержащей верхнее изображение, так как изображение имеет высоту 171 пикселей.

Также: Вам нужно 9 рядов в центре? Или вы пытались это установить границы?

Редактировать: Или то, что сказал Re0sless. ; D

...