Hello platenumdesign,
That's pretty easy to do by nesting divs. I'll give you a start here. I was going to do more but this will give you the idea and you'll learn more doing it yourself :thumbsup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
width: 1000px;
height: 801px;
margin: 30px auto;
background: url(http://www.plattenumdesigns.com/images/new-template_02.jpg) no-repeat left;
}
#wrap {
width: 1000px;
height: 801px;
background: url(http://www.plattenumdesigns.com/images/new-template_11.jpg) no-repeat right;
}
#content {
width: 1000px;
height: 801px;
background: url(http://www.plattenumdesigns.com/images/new-template_01.jpg) no-repeat top;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrap">
<div id="content">
<!--end content--></div>
<!--end wrap--></div>
<!--end wrapper--></div>
</body>
</html>
All you need to finish this to look like your tabled example is a center div and a footer. Specify the width for you center div and position it with margins. You can put a menu like this at the top of it - http://nopeople.com/CSS/h_ul_menu-with_images/index.html then position your bg image down the height of your menu.
The footer can either go at the bottom of #wrapper or you can make #wrapper longer to contain it, either way would work fine.
