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

**maxdp73** · Sep 19, 2012 06:39

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)

Code:

<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.

**ralph.m** · Sep 19, 2012 07:09

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

Code:

<!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>

**maxdp73** · Sep 19, 2012 07:51

Thanks, Ralph!

**ralph.m** · Sep 19, 2012 09:17

You're welcome.

If you need any help developing the code further, don't hesitate to ask.

**maxdp73** · Sep 19, 2012 10:41

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?

**ralph.m** · Sep 19, 2012 16:40

Originally Posted by maxdp73

i actually am a bit hesitant to ask for fear of imposing too much

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.

**PicnicTutorials** · Sep 19, 2012 19:03

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/pro...r-website.com/

**maxdp73** · Sep 19, 2012 22:19

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...

**ralph.m** · Sep 19, 2012 23:24

Originally Posted by maxdp73

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.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions