Trying to create - 100% header, 960px body, 100% footer

Hi All,
I’m sure all the experts can tell i’m a newbie :)…i’m trying to create a site with the header and footer stretching across any display and the body width remaining 960px and am getting a horizontal scrollbar when i try to implement it. Can someone please tell me what i need to modify? (code below for header and body - the CSS and HTML are in same file, will move the CSS to a separate file)

<html>

<head>
...

<style type="text/css">

div.Object15 { position:absolute; top:0px; left:0px; z-index:0; }
div.Object16 { position:absolute; top:10px; left:0px; z-index:1; }
div.Object17 { position:absolute; top:0px; left:0px; z-index:2; }
div.Object18 { position:absolute; top:104px; left:111px; z-index:3; }
div.Object19 { position:absolute; top:373px; left:112px; z-index:4; }

body {
 margin:0px;
 padding :0px;
 text-align:center;
 height:100%;
 width:100%;
 background-image: url('files/image1.jpg');
}


A:link { color:#ffffff; text-decoration:none; }

A:visited  { color:#60a0e2; text-decoration:none; }

A:active  { color:#60a0e2; text-decoration:none; }

A:hover  { color:#b00000; text-decoration:underline; }


img { border:0 none}


#container { position:relative; margin:0px auto 0 auto; height:775px; width:995px; text-align:left; padding-left:0px;}
#header-container { position:relative; margin:0px auto 0 auto; height:55px; width:100%; text-align:center; padding-left:0px;}

</style>
</head>

<body>
<div id="header-container">

<div class="Object15"><img src="files/image2.jpg"  alt="" width="2048px" height="53px"></div>

<div class="Object16"><img src="files/image3.jpg"  alt="" width="2048px" height="32px"></div>
</div>

<div id="container">
<div class="Object17"><img src="files/image4.png"  alt="" width="50px" height="69px"></div>

<div class="Object18"><img src="files/image5.png"  alt="" width="779px" height="370px"></div>

<div class="Object19"><img src="files/image6.jpg"  alt="" width="776px" height="32px"></div>
</div>

</body>
</html>

Thanks,
Max.

Hi maxdp73. Here is a basic way to do a layout like that:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="all">
* {margin: 0; padding: 0;}
body {background: #e7e7e7;}
	.header-outer, .content-outer, .footer-outer {width: 100%;}
	.header-outer, .footer-outer {background: #c7c7c7;}
	.header, .content, .footer {margin: 0 auto;}
	.header, .footer {min-height: 100px; color: white; padding: 20px 0; width: 960px;}
	.content {background: white; min-height: 400px; padding: 20px; width: 920px;}
</style>
</head>

<body>
<div class="header-outer">
	<div class="header">
		<h1>Heading text</h1>
	</div>
</div>

<div class="content-outer">
	<div class="content">
		<p>Body text</p>
	</div>
</div>

<div class="footer-outer">
	<div class="footer">
		<p>Footer text</p>
	</div>
</div>

</body>
</html>

Thanks, Ralph!

You’re welcome. :slight_smile: If you need any help developing the code further, don’t hesitate to ask.

Well, i actually am a bit hesitant to ask for fear of imposing too much or worse, becoming lazy :)…i’ve been browsing the net and finding so much information about web designing that it’s a bit overwhelming…wud u be able to suggest a roadmap on how to develop some good web designing/development skills?

All the same, questions are what forums are fo, so there’s no harm in asking. The key is not make sure you’ve done your homework and at least tried to find a solution first.

wud u be able to suggest a roadmap on how to develop some good web designing/development skills?

My first suggestion would be to get a solid grounding in the basics, like HTML and CSS. My preference for that is with books, but not everyone likes them. There are many good books on HTML/CSS, including those by SitePoint, but you’l also find lots more on Amazon. It doesn’t necessarily matter which you use. Perhaps read the reviews on Amazon to get a sense of which book would suit you best.

Then you can branch out to other things like design, programming, CMSes etc … Also, study sites you really like to learn how they’re done. Look at the code underneath etc. I find that really useful.

I learned all the basics at lynda.com for a few bucks in a couple months. Then learned the rest in this forum and killersites.com forum. Here is a website exactly as you describe I made a while back that made me not one penny. It shows you how to stretch the header and footer full width using the image I used. http://www.visibilityinherit.com/projects/edit-your-website.com/

Am glad i’m following more or less what u’ve outlined, ralph :)…hope the journey ahead is as bright as i perceive it to be now…

Good luck. :slight_smile: