Can anyone give me an example of how to replace these tables with CSS
The 3 boxes cener page <!-- m --><a class="postlink" href="http://catertots.net">http://catertots.net</a><!-- m -->
ThanksDid you want it centered, or did you want to leave it on the left?
Anyway, you can make two DIVs: navigation, content. The navigation one would float: left, the content one would float:right, and then below the both of them, put another div: footer. It would have clear:both to throw the floats back into the document flow. I'd say check out <!-- m --><a class="postlink" href="http://www.maxdesign.com.au/presentation/page_layouts/index.cfm">http://www.maxdesign.com.au/presentatio ... /index.cfm</a><!-- m --> to guide you through the process. (I recall seeing a step-by-step tutorial on creating a two column layout somewhere there, too.)This is pretty close and should give you something to work with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<title>Untitled</title>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<style type="text/css">
<!--
body {
margin: 0;
padding: 10px;
background-color: #333;
color: black;
font: 90% arial, helvetica, verdana, sans-serif;
}
div.main {
width: 600px;
margin: 0;
padding: 0 10px;
background-color: #666;
border: solid 5px #ccc;
}
div.content {
margin: 10px 0;
padding: 5px;
background-color: #ccc;
border: solid 1px black;
}
.content h2 {
margin: -5px -5px 0 -5px;
padding: 5px;
background-color: black;
color: #66f;
}
.content p {
line-height: 1.5em;
}
-->
</style>
</head>
<body>
<div class=main>
<h1>Logo goes here</h1>
<hr>
<div class=content>
<h2>Heading</h2>
<p>This is some content text. This is a test. It is only a test.
This is some content text. This is a test. It is only a test.
This is some content text. This is a test. It is only a test.</p>
<p>This is some content text. This is a test. It is only a test.
This is some content text. This is a test. It is only a test.
This is some content text. This is a test. It is only a test.</p>
</div>
<div class=content>
<h2>Heading</h2>
<p>This is some content text. This is a test. It is only a test.</p>
</div>
<div class=content>
<h2>Heading</h2>
<p>This is some content text. This is a test. It is only a test.</p>
</div>
</div> <!-- main -->
</body>
</html>
The 3 boxes cener page <!-- m --><a class="postlink" href="http://catertots.net">http://catertots.net</a><!-- m -->
ThanksDid you want it centered, or did you want to leave it on the left?
Anyway, you can make two DIVs: navigation, content. The navigation one would float: left, the content one would float:right, and then below the both of them, put another div: footer. It would have clear:both to throw the floats back into the document flow. I'd say check out <!-- m --><a class="postlink" href="http://www.maxdesign.com.au/presentation/page_layouts/index.cfm">http://www.maxdesign.com.au/presentatio ... /index.cfm</a><!-- m --> to guide you through the process. (I recall seeing a step-by-step tutorial on creating a two column layout somewhere there, too.)This is pretty close and should give you something to work with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<title>Untitled</title>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<style type="text/css">
<!--
body {
margin: 0;
padding: 10px;
background-color: #333;
color: black;
font: 90% arial, helvetica, verdana, sans-serif;
}
div.main {
width: 600px;
margin: 0;
padding: 0 10px;
background-color: #666;
border: solid 5px #ccc;
}
div.content {
margin: 10px 0;
padding: 5px;
background-color: #ccc;
border: solid 1px black;
}
.content h2 {
margin: -5px -5px 0 -5px;
padding: 5px;
background-color: black;
color: #66f;
}
.content p {
line-height: 1.5em;
}
-->
</style>
</head>
<body>
<div class=main>
<h1>Logo goes here</h1>
<hr>
<div class=content>
<h2>Heading</h2>
<p>This is some content text. This is a test. It is only a test.
This is some content text. This is a test. It is only a test.
This is some content text. This is a test. It is only a test.</p>
<p>This is some content text. This is a test. It is only a test.
This is some content text. This is a test. It is only a test.
This is some content text. This is a test. It is only a test.</p>
</div>
<div class=content>
<h2>Heading</h2>
<p>This is some content text. This is a test. It is only a test.</p>
</div>
<div class=content>
<h2>Heading</h2>
<p>This is some content text. This is a test. It is only a test.</p>
</div>
</div> <!-- main -->
</body>
</html>