Footer Working but background image issue now.

zimmo · June 10, 2010

I have followed the userguide as suggested by Haku.

Now I need to change things to fit what I am doing, but following this guide has really helped, the sticker footy issue one. I am unsure as to why the footer does not stretch the full width of the window, it is as though it has a 10px padd on either side... but I have followed this guide and when I view their site it fills the entire width of the screen as mine does not.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page title</title>
<link rel="stylesheet" href="drive.css" type="text/css" media="screen">
</head>

<body>
<div id="wrap">

  <div id="headercontainer">
  <div class="header">
  <img src="images/logo.gif" width="480" height="180" alt="Crafty Cakes" style="vertical-align:top"/>
  </div>
</div>

<div id="contentcontainer">
	<div id="content">
		<div class="left">
			<p>Content Here Left</p>
			<p>Content Here Left</p>
			<p>Content Here Left</p>
			<p>Content Here Left</p>
			<p>Content Here Left</p>
			<p>Content Here Left</p>
			<p>Content Here Left</p>
			<p>Content Here Left</p>
			<p>Content Here Left</p>
		</div>

		<div class="right">
			<p>Content Here Right</p>
		</div>
	</div>
</div>

</div>

<div id="footercontainer">
<p>Footer Text Here</p>
</div>

</body>
</html>

CSS

html, body {
height: 100%;
}
body {
font:11pt Georgia, Times New Roman, serif; 
background-color:#999999;
line-height:1.3em; 
color:#444444;
background-image: url(inc/mainbackground.gif);
background-repeat: repeat-x;
background-position: center top;
}

#wrap {
min-height: 100%;
width: 100%;
}
/* Containers */
#headercontainer {
height: 200px;
}  
#contentcontainer {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
margin:0 auto; /* center, not in IE5 */
}  

#footercontainer {
position: relative;
margin: 0px;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background: #444444 url('inc/footer.gif') repeat-x;
color:#ffffff;
font-size:11px;
font-family:Verdana, Arial, sans-serif;
} 
/*End Containers */
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
/*Internal divs */
.header {
width: 1024px;
margin:0 auto; /* center, not in IE5 */
}
#content {
width: 1024px;
margin:0 auto; /* center, not in IE5 */
}
.left {
width: 200px;
float: left;
color: #ffffff;
}
.right {
width: 700px;
float: right;
color: #ffffff;
}

Have I missed something?

If you try this code you will see its not the full width?

haku · June 10, 2010

Try adding:

body
{
  margin:0;
  padding:0;
}

You should start using a CSS reset sheet (google it). It will prevent problems like this in the future.

zimmo · June 10, 2010

Thanks again, that fixed it, and just had a look at that and exactly what I need, thanks for pointing me in the direction.

James25 · June 14, 2010

hmmm, maybe you could add body

{

margin:0;

padding:0;

}

haku · June 14, 2010

You mean exactly like I told him to do two posts above yours? The post to which he replied that it worked? Is that what you mean?

Sign In

Footer Working but background image issue now.

Recommended Posts

zimmo

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

zimmo

Link to comment

Share on other sites

James25

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information