I'm wondering how you can have the text also under the Logo.
This is the code, and I couldn't find where I can have the text under the logo. Thanks Now this is what I got:
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
p{margin-bottom:10px;}
/**
* @tab Page
* @section background color
* @tip Choose a color for your HTML email's background. You might choose one to match your company's branding.
* @theme page
*/
body {
/*@editable*/ background-color:#62788F;
text-align:center;
}
#layout {
margin:0 auto;
text-align:left;
}
/**
* @tab Header
* @section header top
* @tip Set the look of the archive link bar.
*/
#header-top {
/*@editable*/ background-color:#62788F;
/*@editable*/ border-top:0px none;
/*@editable*/ border-bottom:0px none;
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:11px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
padding:15px 0 5px;
/*@editable*/ text-align:center;
}
/**
* @tab Header
* @section title style
* @tip Titles and headlines in your message body. Make them big and easy to read.
* @theme title
*/
/**This is the title*/
.primary-heading {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:46px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin:0;
padding:0px;
/*@editable*/ text-transform:uppercase;
}
/**
* @tab Header
* @section subtitle style
* @tip This is the byline text that appears immediately underneath your titles/headlines.
* @theme subtitle
*/
.secondary-heading {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:18px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
margin:0 0 0 0;
padding:10px 0 0 0;
/*@editable*/ /*text-transform:uppercase; Wrenching Tips For DIY'ers*/
/*@editable*/ text-transform:uppercase;
}
/**
* @tab Body
* @section intro content
* @tip This is the default text style for the introductory content of your email.
* @theme content
*/
#content-intro {
/*@editable*/ background-color:#62788F; /**background of the text title*/
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
padding:15px 10 20px 10; /*New*/
/*padding:15px 0 20px 0; O*/
vertical-align:top;
width:300px;
}
#content-intro-text {
/*@editable*/ /*background-color:#62788F;*/ /*background of the text title*/
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
/*padding:15px 0 20px 0; O*/
/*vertical-align:top;*/
/*width:300px;*/
}
#content-intro p{
width:300px
/*width:285px O */
}
#image{
padding:15px 0 20px 0;
text-align:left;
vertical-align:top;
}
/**
* @tab Body
* @section intro content
* @tip This is the default text style for the introductory content of your email.
* @theme content
*/
#content-left, #content-right{
/*@editable*/ border-top:1px solid #8193A5;
padding:0 0 10px 0;
vertical-align:top;
}
/**
* @tab Body
* @section sidebar widget headings
* @tip This is the default style for the sidebar widgets of your email.
* @theme content
*/
.widget .secondary-heading {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:18px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ text-transform:uppercase;
}
/**
* @tab Body
* @section sidebar widget te开发者_StackOverflow中文版xt
* @tip This is the default style for the sidebar widgets of your email.
* @theme content
*/
.widget {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
margin:20px 0;
width:290px;
}
/**
* @tab Body
* @section closing content
* @tip This is the default text style for the closing content block of your email.
* @theme content
*/
#content-outro{
/*@editable*/ background-color:#8193A5;
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
padding:20px;
}
/**
* @tab Body
* @section closing content heading
* @tip This is the default style for the heading of the closing content block of your email.
* @theme content
*/
#content-outro .secondary-heading {
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ text-transform:uppercase;
}
#button{
text-align:center;
}
/**
* @tab Body
* @section closing content button
* @tip This is the default text style for the closing content button.
* @theme content
*/
#button a {
/*@editable*/ background-color: #92AECB;
/*@editable*/ color: #FFFFFF;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size: 18px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight: bold;
padding: 15px 30px;
/*@editable*/ text-decoration: none;
/*@editable*/ text-transform: uppercase;
}
/**
* @tab Footer
* @section footer
* @tip You might give your footer a light background color and separate it with a top border
* @theme footer
*/
#footer {
/*@editable*/ background-color:#62788F;
/*@editable*/ border-top:0px none;
/*@editable*/ border-bottom:0px none;
/*@editable*/ color:#EFEFEF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:11px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:14px;
padding:20px 0 20px 0;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section link style
* @tip Specify a color for your footer hyperlinks.
* @theme link_footer
*/
#footer a {
/*@editable*/ color:#FFFFFF;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/**
* @tab Page
* @section link style
* @tip Specify a color for all the hyperlinks in your email.
* @theme link
*/
a, a:link, a:visited {
/*@editable*/ color:#FFFFFF;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
</style>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" id="layout">
<tr>
<td id="header-top" colspan="2" mc:edit="header-top">
<p>Email not displaying correctly? <a href="*|ARCHIVE|*" title="View this email in your browser.">View it in your browser</a></p>
</td>
</tr>
<tr>
<td colspan="2">
<p>
<img align="left" hspace="20" src="http://logo_312x142.jpg" />
<td id="content-intro-text" colspan="2">
<div mc:edit="main">
<h1 class="primary-heading">Test</h1>
<h2 class="secondary-heading">This is a test</h2>
<p>Sample copy. Lorem ipsum dolor sit amet et est, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum.
</p>
</div>
</p>
</td>
</tr>
<tr>
<td colspan="1" id="content-left">
<div mc:repeatable>
<div class="widget" mc:edit="content-left-repeatable">
<h2 class="secondary-heading">Flush Your Coolant</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p>
<a href="" target="_blank">Read More</a>
</div>
</div>
</td>
<td colspan="1" id="content-right">
<div mc:repeatable>
<div class="widget" mc:edit="content-right-repeatable">
<h2 class="secondary-heading">Flush Your Coolant</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p>
<a href="" target="_blank">Read More</a>
</div>
</div>
</td>
</tr>
<tr>
</table>
<span style="padding: 0px;"></span>
</body>
</html>
see how to do it in this example
http://www.ironspider.ca/graphics/alignment.htm
the idea is play with align attribute in image (put the image in the same paragraph )
and put a space around with hspace / vspace attribute
some thing like :
<tr>
<td colspan="2">
<p>
<img align="left" hspace="20" src="http://logo_312x142.jpg" />
<div mc:edit="main">
<h1 class="primary-heading">Test</h1>
<h2 class="secondary-heading">This is a test</h2>
<p>Sample copy. Lorem ipsum dolor sit amet et est, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum.
</p>
</div>
</p>
</td>
</tr>
to solve issues while coding for email html template, dont be shy to use the traditional <table> tag to organize your content. there's a huge issue in email client compatibility, some renders it right, some renders it weirdly...etc
in your case here, so far so good.. now you decided to have all these in a single <td>...</td>, right.. if you want to move the Text content (h1, h2, p..etc) to be placed below the img logo, i think you can just add <br> at the end of the img. logically this should work, right? eventough h1 itself is a block element, but things could be be rendered differently in email client.
or, just add another <tr>..</tr> after the tr for logo.. make sense?
OR, old-skool style, "Nested Table"! :D off course i dont recommend that..
let us know if it help. :)
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论