PDA

Click to See Complete Forum and Search --> : Table layout for email newsletter - advice please

moistzombie
02-07-2008, 10:18 PM
(SORRY ABOUT THE CENTRE ALIGNMENT, I COULDN'T FIGURE OUT HOW TO CHANGE IT!)

Hey, my name is Cheyne, I work for a small company in Sydney, Australia.

I have put my hand up to do our monthly newsletter, as I have had some dabblings in web authoring in the past.

I am a touch rusty and just wanted to ask advice of some seasoned coders.

I want to achieve the below concept:

http://www.future-prospects.net/FutureChat/mockUP.jpg

I believe I can achieve this by the below layout (lines represent tables to put together layout):

http://www.future-prospects.net/FutureChat/tableLayout.gif

I have coded this so far:

<!DOCTYPE html PUBLIC "=//W3C//DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MacTalent: Hot Candidates from MacPeople</title>
<style>
table.main {border-style: solid; border: 2px;}
td {border-style: solid; border: 2px;}
td.banner {height: 140px; width: 591px;}
td.header {height: 87px; width: 591px;}
td.footer {height: 87px: width: 591px;}
td.sidebanner {height: 250px;}
div.center {text-align: center;}
div.center table {margin-left: auto; margin-right: auto; text-align:left;}
</style>
</head>
<body>
<div class="center">
<table class="main">
<tr>
<tr>
<td class="header" colspan="3">Header</td>
</tr>
<tr>
<td class="banner" colspan="3">Banner</td>
</tr>
<tr>
<td class="sidebanner">Side Banner</td>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td class="footer" colspan="3">Footer</td>
</tr>
</tr>
</table>
</div>
</body>
</html>

I THINK I am heading in the right direction. Only thing is when I try to nest tables for the "profile" sections it goes all wonky.

Any help would be most appreciated.
WebJoel
02-07-2008, 10:29 PM
This would be amazing if done non-TABLEs. Using your visual image I can try to markup something and label it to help.

I noted this first thing:
<!DOCTYPE html PUBLIC "=//W3C//DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This is supposed to be a "hypen", not an "equal sign"..

In the meantime: http://www.hotdesign.com/seybold/index.html
:)
moistzombie
02-07-2008, 10:49 PM
Thanks WebJoel - if you could provide some markup would be most appreciated.

I am fully aware that tables are to be avoided for layout, to aid the better development of the web. I made the decision to use tables for this project as it's a one page document that won't require too much work to modify. Also so I could avoid learning the CSS workarounds for email

Thanks for pointing out the mistake in the DOCTYPE declaration.

LOL - I just came across that link you provided earlier today. Quite comical with the illustrations!

Thanks again!
WebJoel
02-07-2008, 10:50 PM
Here is a 5-minute build that might get your started. I'm sure you'll have questions though. :)
This looks the same for IE as for Firefox, and valiadates..

<!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=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
@charset "utf-8";
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; /*for compliant browsers*/
padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/
font:x-small Arial, Verdana, sans-serif;voice-family: "\"}\"";voice-family:inherit;font-size:small;/*for IE 5.5 */
font-size:100%; line-height:1.125em;}

#wrapper p {color:black;}
/*non-content: e.g., -navigation lists, etc. Slightly smaller than content text {font-size:0.75em;} */

html>body {font-size:small; height:auto;/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";voice-family: inherit; font-size: medium}
/* Assist IE rendering height, keyword-font sizes, etc. */

#menu ul li {float: left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}
#menu ul li a {height: 1%; /* make links honour display: block; properly */}

#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
* html #wrapper {height:100%;}/* and feed IE what it needs */

html, body, p, th, td, li, dd, dt { font:0.875em Arial, Helvetica, verdana sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, 'times new roman', sans-serif;}

h1 { font-size: 2.0em;}
h2 { font-size: 1.5em;}
h3 { font-size: 1.2em;}
h4 { font-size: 1.0em;}
h5 { font-size: 0.9em;}
h6 { font-size: 0.8em;}/* Defined default Header sizes*/

a:link, a:visited, a:focus, a:hover, a:active {background-color:none;}/*s.508 Accessibility*/

a:link {color: #00f;}
a:visited {color: #009;}
a:focus: {color: #06f;}/*for non-mouse pointers: e.g. "hotkeys", etc. s.508*/
a:hover {color: #06f;}
a:active {color: #0cf;}


</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico" /><!-- path to your favicon -->
</head>
<body>
<div style="width:760px; height:auto; margin:25px auto; border:3px double silver; overflow:hidden;'">
<div style="width:auto; height:80px; border-bottom:3px double silver; padding:10px 30px 10px;">
<h1>HEADER area</h1>
</div>

<div style="width:auto; height:80px; border-bottom:3px double silver; padding:10px 30px 10px;">
<h1>Second HEADER area</h1>
</div>

<div style="width:360px; height:100%; padding: 10px 20px 10px 20px; float:left;">
<h2>Left Column</h2>
</div>


<div style="width:317px; height:100px; border-bottom:3px double silver; border-left:3px double silver; padding:10px 20px 10px; float:right">
<h3>first right-hand box</h3></div>
<div style="width:317px; height:100px; border-bottom:3px double silver; border-left:3px double silver; padding:10px 20px 10px; clear:right; float:right">
<h3>second right-hand box</h3></div>
<div style="width:317px; height:100px; border-left:3px double silver; padding:10px 20px 10px; clear:right; float:right">
<h3>third right-hand box</h3></div>

</div><!-- end WRAPPER -->
</body>

</html>
The 'important stuff' is in BOLD.
moistzombie
02-07-2008, 11:27 PM
Thanks for the hasty reply. I will have a good look at this and tinker a bit and get back to you with any questions. Also continue my reading in regards to DIVS.

Really appreciate the help.
Frank62
02-08-2008, 08:41 AM
All,

Less high-tech, but much simpler to edit, I'd think:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Table Layout</title>
<style type="text/css">
<!--
#layoutTable {
border: 1px solid silver;
width: 400px;
height: 600px;}
#layoutTable td {
border: 1px solid silver;}
.adCells {
width: 35%;
height: 25%;
vertical-align: top;}
.adCellHeaders {
background: navy;
color: white;
height: 25%;}
-->
</style>
</head>
<body>
<center>
<table cellspacing="5" id="layoutTable">
<tr>
<td colspan="3">M:3*1</td>
</tr>
<tr>
<td colspan="3">M:3*1</td>
</tr>
<tr>
<td rowspan="3">M:1*3</td>
<td class="adCells"><div class="adCellHeaders">Header Text</div>
Content text</td>
<td class="adCells">3,3</td>
</tr>
<tr>
<td class="adCells">2,4</td>
<td class="adCells">3,4</td>
</tr>
<tr>
<td class="adCells">2,5</td>
<td class="adCells">3,5</td>
</tr>
<tr>
<td colspan="3">M:3*1</td>
</tr>
</table>
</center>
</body>
</html>


Validates, too.

- Frank
WebJoel
02-09-2008, 09:13 AM
I posted TABLE-less without reading the post prior to it, that you needed TABLE layout. :o If TABLE-layout is what you need for this, it is okay to do so. A bit dated, but okay.
moistzombie
02-10-2008, 04:33 PM
Thanks Frank62 - exactly what I needed. Thanks WebJoel also, I will spend some time to learn all this stuff properly - for now I will use the TABLE version so I can have this project ready on time!

Cheers.