Forum Moderators: not2easy
---------------------
To show you the design im after the table design is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="720" height="82" border="0" align="center" cellpadding="6">
<tr>
<td>header</td>
</tr>
</table>
<table width="720" height="35" border="0" align="center" cellpadding="6">
<tr>
<td>menu</td>
</tr>
</table>
<table width="720" height="35" border="0" align="center" cellpadding="0">
<tr>
<td width="554"><table width="100%" height="45" border="0" cellpadding="0">
<tr>
<td>navigation</td>
</tr>
<tr>
<td><p>Header</p>
<p>paragraph 1</p>
<p> </p>
<table width="80%" border="0" align="center" cellpadding="0">
<tr>
<td>image 1</td>
<td>image 2</td>
</tr>
</table>
<p> </p>
<p>paragraph 2</p>
<p> </p>
<p> </p></td>
</tr>
</table></td>
<td width="160"><table width="100%" border="0" cellpadding="2">
<tr>
<td><p>links</p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td><p>image</p>
<p> </p>
<p> </p></td>
</tr>
</table></td>
</tr>
</table>
<table width="720" height="35" border="0" align="center" cellpadding="6">
<tr>
<td>footer</td>
</tr>
</table>
<p> </p>
</body>
</html>
------------------
If i can get the above layout with CSS & DIV's it would be a good starting point for my new website.
Im new to CSS & DIV's so need all the help i can get :)
Ideally, i would like all sections within seperate <div> tags, eg the menu, link, news, image1, image2, heading, paragraph1, paragraph2. So i can position the order in the code for SEO purposes.
But i need all components to stay fixed in relation to the browser - so the design stays the same.
thanks for any help.
W3C CSS tutorials [w3schools.com]
And a good example would be the home page without tables. [w3schools.com]
You're looking for a alyout that is sort of like so:
----------Header----------
--------Navigation--------
sidebar ¦ content ¦
¦ ¦
----------Footer----------
Would this be a correct assesment? (I can't tell with what you've posted if you're trying to have a center content flanked by 2 sidebars, or just one sidebar on the left with the content on the right, as above.)
I'm going to go with what's shown above, if you're doing 3 columns, let me know.
It's relatively easy. Basically, HTML is like so:
<body>
<div id="wrapper">
<div id="header">
header & navigation stuff here
</div>
<div id="left">
sidebar column here
</div>
<div id="content">
content here
</div>
<div id="footer">
footer stuff here
<div>
</div>
CSS:
#wrapper {
width:760px;
margin:0 auto;
}
#header {
width:760px;
}
#left {
width:200px;
float:left;
}
#content {
width:560px;
float:right;
}
#footer {
width:760px;
clear:both;
}
And there you have the basics. The #wrapper div is 760px wide, and centered on the page no matter what resolution the browser window is. It'll also hold everything in place.
I noticed you had images in your table cells - again, I haven't used tables in a while, so I'm not sure where you want them! - my guess is that they would be images to accent the content and you'd want the text to wrap around them? Simply set your images as float:left (to have the image on the left side of the content with the text wrapping around the right) or float: right (for the opposite) wherever you need the images to be, within your #content div.
Hope that helps!
thanks for the help.
It isnt exactly how i wished, but you have gave me a great starting point which i can learn from.
If i get stuck i'll be back for more help :)
thanks
