Jump to content

Footer Working but background image issue now.

zimmo

By zimmo
in CSS Help

 Share

Recommended Posts

zimmo Regular Member

zimmo

Posted
Posted

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?

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.