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 text
* @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
alignattribute in image (put the image in the same paragraph )and put a space around with
hspace/vspaceattributesome thing like :