2015-09-07 63 views
-1

我正在寻找解决方案,我可以在'h1'标签中添加填充。下面的标记允许我在Outlook中渲染背景图像。但是,当我向td添加填充时,填充会添加到背景 - 这不是我想要的结果。有谁知道我可以如何添加填充到与Outlook电子邮件客户端兼容的h1如何在不影响背景图像的情况下将填充添加到​​?

<!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></title> 
</head> 

<body> 
    <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center"> 
     <tr> 
      <td style="padding-left:35px;" class="mbl-pad-1" background="images/banner1.jpg" bgcolor="#7bceeb" width="600" height="248" valign="middle" > 
       <!--[if gte mso 9]> 
       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:248px;"> 
       <v:fill type="tile" src="images/banner1.jpg" color="#7bceeb" /> 
       <v:textbox inset="0,0,0,0"> 
       <![endif]--> 

       <h1 class="emailh1" style="font-size:65px; line-height:60px; font-family:Arial, sans-serif; color:#fff; text-align:left; margin:0;">DO YOU TRUST<br/>YOUR SOURCE?</h1> 

       <!--[if gte mso 9]> 
       </v:textbox> 
       </v:rect> 
       <![endif]--> 

      </td> 
     </tr> 
    </table> 
</body> 
</html> 
+0

您的标记有多个语法问题。首先验证您的HTML。 – Xufox

+0

现在应该会更好。检查它agian – rman215

+0

我没有看到任何'h2'标记在您的html –

回答

1

一堆finagling和用户的帮助后Gortonington我能找到使用这里找到Bullet Proof Background我能得到的背景图像标记一个solution.By在Outlook中正确显示。为了给h1标签添加填充,我使用了Gortonigton的建议,并添加了一个宽度为100%的额外表格,然后添加了一个填充样式以正确对齐文本。感谢大家的帮助!

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td background="images/banner1.jpg" bgcolor="#333" width="100%" valign="top"> 
      <!--[if gte mso 9]> 
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:248px;"> 
      <v:fill type="tile" src="images/banner1.jpg" color="#333" /> 
      <v:textbox inset="0,0,0,0"> 
      <![endif]--> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td class="mbl-pad-1" style="padding-left:35px; padding-top:60px; padding-bottom:60px;"> 
        <h1 class="emailh1" style="font-size:65px; line-height:60px; font-family:Arial, sans-serif; color:#fff; text-align:left; margin-top:0; margin-bottom:0;">DO YOU TRUST<br/>YOUR SOURCE?</h1> 
        </td> 
      </tr> 
      </table> 
      <!--[if gte mso 9]> 
      </v:textbox> 
      </v:rect> 
      <![endif]--> 
      </td> 
    </tr> 
</table> 
0

我想补充的<h1>围绕<div>标签内<td>和填充添加到它。

<td> 
    <div style="padding: 10px;"> 
     <h1>...</h1> 
    </div> 
</td> 

//编辑:

如果这只是针对电子邮件,我只想用表空间它像这样:

<td> 
    <table> 
     <tr><td colspan="3" height="10"></td></tr> 
     <tr> 
      <td width="10"></td> 
      <td><h1>...</h1></td> 
      <td width="10"></td> 
     </tr> 
     <tr><td colspan="3" height="10"></td></tr> 
    </table> 
</td> 
+0

我试过这个以及outlook不提供填充div标签。 – rman215

0

添加保证金左:35px;为H1标签

<td> 
<h1 style="margin-left:35px;"></h1> 
</td> 
+0

我试过这个。 Outlook不支持h1标签中的边距 – rman215

2

巢内以100%的宽度的新表并添加填充到该TD。

所以基本上:

<td with background > 
     <table width="100%"> 
     <tr> 
     <td style="padding: Xpx;">your content</td> 
     </tr> 
     </table> 
    </td> 
相关问题