Ok, tables officially suck. Does anyone remember how to put together a table based site? I've tried 3 times and each one seems so limited now that I know CSS.
Here is the code stripped out of my mail chimp beta.
<!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>Arthritis Foundation : eHEADLINES </title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
</head>
<style>
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MAIN LAYOUT STYLES <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
* {
margin: 0;
padding: 0;
}
body {
background-color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/_bg.jpg);
background-repeat: repeat-x;
text-align: center;
font-size: 8px;
line-height: 17px;
}
h1 {
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
}
h2 {
font-size: 12px;
font-weight: bold;
padding-bottom: 5px;
}
h3 {
}
h4 {
font-size: 1.6em;
color: #37658F;
}
p {
font-size: 1.4em;
margin-bottom: 2em;
}
body {
}
#wrapper {
width: 580px;
text-align: left;
background-color: #fff;
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/body_bg.jpg);
background-repeat: repeat-y;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-position: left top;
}
#legaltop {
padding-top: 10px;
font-size: 8px;
text-align: center;
}
#legalfooter {
font-size: 9px;
text-align: center;
padding-top: 20px;
}
#header {
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/header.jpg);
height: 148px;
width: 580px;
}
#header h1 {
float:left;
padding-left: 40px;
padding-top: 121px;
font-size: 15px;
font-weight: bold;
color: #0062A1;
}
#header h2 {
float:right;
padding-top: 120px;
font-size: 11px;
padding-right: 25px;
color: #0062A1;
}
#content {
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/bodybg.jpg);
background-repeat: repeat-y;
width: 580px;
height: 1400px;
}
#leftcolumn {
float: left;
width: 320px;
padding-left: 30px;
}
#leftcolumn h1 {
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/h1bg.jpg);
height: 30px;
background-repeat: no-repeat;
background-position: left center;
margin-left: -15px;
padding-left: 20px;
color: #FFFFFF;
padding-top: 15px;
}
#rightcolumn {
float: right;
width: 195px;
padding-right: 20px;
}
#footer {
background-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/footer.jpg);
background-repeat: no-repeat;
height: 48px;
width: 580px;
}
.clear {
clear:both;
}
ul {
font-size: 12px;
padding-left: 5px;
padding-bottom: 10px;
list-style-type: none;
list-style-position: inside;
list-style-image: url(http://www.wayoutwestenterprises.com/clients/eheadlines/af_icon.gif);
}
li {
padding-bottom: 5px;
}
a {
color: #0062A1;
text-decoration: none;
}
a: hover {
text-decoration: underline;
}
.leftimg {
float:left;
padding: 10px;
}
.rightimg {
float:right;
padding: 10px;
}
.centerimg {
display: block;
margin-left: auto;
margin-right: auto
margin-right: auto;
padding: 5px;
margin-right: auto;
padding-bottom: 15px;
}
hr {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #0062A1;
border-right-color: #0062A1;
border-bottom-color: #0062A1;
border-left-color: #0062A1;
}
</style>
<body>
<div id="wrapper">
<div id="legaltop">
<p>You're receiving this newsletter because you signed up at the <a href="#">ARTHRITIS.ORG</a> website.<br />
Trouble reading this email? <a href="#">View it in your browser</a>.
Not interested anymore? <a href="#">Unsubscribe instantly.</a></p>
</div><!-- End Legal Top -->
<div id="header">
<h1>VOLUME 1 - Issue #1</h1>
<h2>Monday, September 30th, 2009</h2>
</div>
<div id="content">
<img src="http://www.wayoutwestenterprises.com/clients/eheadlines/feature.jpg" alt="main feature" width="540" height="175" class="centerimg" />
<div id="leftcolumn">
<h1>New eHeadlines</h1>
<div class="rightimg"><img src="http://www.wayoutwestenterprises.com/clients/eheadlines/walk.jpg" alt="2009 Walk" width="200" height="122" /></div>
<p>Hi *|FNAME|*, this is a BETA version of eHeadlines that I am designing. You are currently on my BETA recipient list to ensure that this email looks good in all email clients. If you notice anything that does not appear properly, please let me know. Thank you! - Rob <a href="#">Read more</a></p>
<h1>Another Headline!</h1>
<div class="leftimg"><img src="http://www.wayoutwestenterprises.com/clients/eheadlines/dc.jpg" alt="DC" width="150" height="146" /></div>
<p>Second article. Fusce et ipsum et nulla tristi-que facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna vehicula urna vel turpis. Suspendisse sagittis ante a urna..</p>
<ul>
<li><a href="#">HAWAII</a></li>
<li><a href="#">SOUTHERN CALIFORNIA</a></li>
<li><a href="#">NEVADA</a></li>
</ul>
<p> Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Metus eu nunc. <a href="#">Read more</a></p>
<h1>A third Headline!</h1>
<div class="centerimg"><img src="http://www.wayoutwestenterprises.com/clients/eheadlines/banner.jpg" alt="2009 Walk" width="300" height="145" /></div>
<p>Third Article. Fusce et ipsum et nulla tristi-que facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Metus eu nunc. <a href="#">Read more</a></p>
</div><!-- End Left Column -->
<div id="rightcolumn">
<h1>In This Issue</h1>
<ul>
<li><a href="#">Al Pacino honored at Gala!</a></li>
<li><a href="#">Lorem ipsum dolor sit met</a></li>
<li><a href="#">Donec porttitor ligula dolor</a></li>
</ul>
<hr />
</p>
<h1>Also this month</h1>
<h2>Pellentesque vel dui sed</h2>
<p>Aucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Phasellus mattis sotudin ligula. <a href="#">Read More </a></p>
<h2>Pellentesque vel dui sed</h2>
<p>Aucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Phasellus mattis sodin ligula. <a href="#">Read More </a>
<hr /></p>
<h1>Unsubscribe</h1>
<p>If you no longer wish to receive this email <a href="*|UNSUB|*">please unsubscribe</a>.</p>
<img src="http://www.wayoutwestenterprises.com/clients/eheadlines/banner2.jpg" alt="Banner" width="170" height="488" class="centerimg" /></div>
<!-- End Right Column -->
</div><!-- End Content -->
<div class="clear"></div>
<div id="footer"></div>
<div id="legalfooter">The Arthritis Foundation - eHeadlines, ©2009 All rights reserved. To unsubscribe, <a href="#">click here</a>. <br />
900 South 2nd St. Los Angeles, CA 90019 888-123-2345 <a href="http://www.robonekea.com">Design by RobOnekea</a></div>
</div><!-- End Wrapper -->
<center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr>
<td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;">
Sent to *|EMAIL|*. <a href="*|UNSUB|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Unsubscribe</a> |
<a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Update Profile</a> |
<a href="*|FORWARD|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Forward to a Friend</a>
</td>
<td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;">
*|REWARDS|*
</td>
</tr></table></center></body>
</html>
Grrr..... frustrating.
posted 10-20-2009 03:37
