...

View Full Version : Unresolved CSS Footer problem



Eskimojo
12-08-2006, 03:12 AM
Hi there,

I'm sort of an intermediate CSS user, but being mostly self taught from a million tutorials, I can do some stuff and then have NO idea about other things.

I've set up a layout which is driving me nuts, because I can't get the footer to stretch, and I'm not sure why the width keeps blowing out..

If anyone can help me, i will be deliriously grateful.

Here's the code :


html{
height: 100%;
}

body {
background-color: #020202;
background-image: url(../images/logo_emboss.jpg);
background-repeat: no-repeat;
background-position: 28% 50%;
height: 100%;
margin: 0;

font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 140%;
}

#topBanner {
height: 85px;
width: 100%;
left: 0;
top: 0;
padding: 2%;
background-color: #870000;
border-bottom: 4px solid white;
}

#footer {
clear: both;
padding: 2%;
width: 100%;
height: 22%;
/*this should go all the way to the bottom*/
/* but every time i add height, it pushes everything out */
bottom: 0;
background-color: #870000;
border-top: 4px solid white;
}

#bkg_graphic {
position: absolute;
}

#container {
clear: both;
margin-right: 354px;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
padding: 2%;
color: #FFFFFF;
}

#logo {
height: 60px;
margin-bottom: 2%;
}

#navZone {
z-index: 5;
float: left;
width: 140px;
margin-right: 2%;
}

#copy {
z-index: 3;
min-width: 140px;
max-width: 800px;
margin-left: 150px;
padding-right: 2%;
}

#picArea {
position: absolute;
z-index: 4;
display: block;
top: 70px;
right: 2%;
width: 338px;
height: 480px;

border: 6px solid white;
background-color: #999999;
}

h1 {
font-size: 30px;
padding: 0;
margin: 0;
line-height: 110%;
}

harbingerOTV
12-08-2006, 03:21 AM
do you have the html behind this you can show?

do you have the html behind this you can show?

dont know igf you can work this in but here's a simple example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>|</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font: .8em/1.4em tahoma, sans-serif;
background: #99c;
text-align: center;
}
#container {
width: 600px;
margin: 0 auto;
text-align: left;
background: #696;
height: 80%;
position: relative;
}
#footer {
text-align: center;
height: 20%;
width: 600px;
background: #d63;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
Content here
</div>
<div id="footer">I'm the footer</div>
</body>

Eskimojo
12-08-2006, 05:10 AM
Thanks Harbinger - code is below:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Driving me nuts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="topBanner">
<div align="right"><img src="images/client_album_link.png" alt="to client albums" width="145" height="32"></div>
</div>
<div id="container">
<div id="logo"><img src="images/logo_horz.png" alt="logo"></div>
<div id="navZone">
<ul>
<li>NAVIGATION</li>
<li>Will go HERE</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="copy"><em><strong> Content to go here <br>
</strong></em></div>
</div>
<div id="footer"><img src="images/tell_a_friend_link.png" alt="tell a friend" width="130" height="32"><br>
<img src="images/search_site_link.png" alt="Search the site" width="155" height="32"> </div>
<div id="picArea">
<p>Picture goes here.</p>
</div>
</body>
</html>

Excavator
12-08-2006, 10:06 AM
Hello Eskimojo,
With a name like that I *had* to reply!
But, I can't tell what the problem is, IE6, IE7 and FF2 all render your page the same.

harbingerOTV
12-08-2006, 01:37 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Driving me nuts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html{
height: 100%;
}

body {
background-color: #870000;
background-image: url(../images/logo_emboss.jpg);
background-repeat: no-repeat;
background-position: 28% 50%;
height: 100%;
margin: 0;
padding: 0;

font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 140%;
}

#topBanner {
height: 85px;
padding: 10px;
background-color: #870000;
border-bottom: 4px solid white;
}

#footer {
clear: both;
padding:10px;

height: 22%;
/*this should go all the way to the bottom*/
/* but every time i add height, it pushes everything out */
bottom: 0;
background-color: #870000;
border-top: 4px solid white;
}

#bkg_graphic {
position: absolute;
}

#container {
clear: both;
margin: 0;
padding: 10px 370px 10px 10px;
color: #FFFFFF;
background: #020202;
}

#logo {
height: 60px;
margin-bottom: 2%;
}

#navZone {
z-index: 5;
float: left;
width: 140px;
margin-right: 2%;
}


#copy {
z-index: 3;
min-width: 140px;
max-width: 800px;
margin-left: 150px;
}

#picArea {
position: absolute;
z-index: 4;
display: block;
top: 70px;
right: 20px;
width: 338px;
height: 480px;
border: 6px solid white;
background-color: #999999;
}

h1 {
font-size: 30px;
padding: 0;
margin: 0;
line-height: 110%;
}
</style>
</head>
<body>
<div id="topBanner">
<div align="right"><img src="images/client_album_link.png" alt="to client albums" width="145" height="32"></div>
</div>
<div id="container">
<div id="logo"><img src="images/logo_horz.png" alt="logo">

</div>
<div id="navZone">
<ul>
<li>NAVIGATION</li>
<li>Will go HERE</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="copy"><em><strong> Content to go here sdfgdg df dd dssdd fdf fsfd fsdfd fdf sd dsd dsdf df dsd fd sdf sdfsd fd fdf sdfsd fdf sdf sdfsd fsd fsdf sdf sdfs fer ef ef ef sefs fsef sef sefsf4frw4rwr4rsfsef sef e sef sfs fs ee f<br>
</strong></em></div>
<div style="clear: left;"></div>
</div>
<div id="footer"><img src="images/tell_a_friend_link.png" alt="tell a friend" width="130" height="32"><br>
<img src="images/search_site_link.png" alt="Search the site" width="155" height="32"> </div>
<div id="picArea">
<p>Picture goes here.</p>
</div>
</body>
</html>


I dont have th eimages but this should work. What I did was fake it. Giving the container the black background and the body the redbackground it"appears" that the footer is stretching down. I took off all th e% paddng as I wasn't sure if it was messing it up or not. I also took off width: 100% on your divs. They are block level so will always be 100% of whatever they are in unless told other wise. Leaving it on was forcing th eheader and footer to actuall ybreak the page horizontially. Maybe that's what you had the issue with too. I added a clearing just bvefre the end of t\your #container. Since the nav is floated, you need something to force the container to wrap around the floated leements.

tested on FF 1.5, IE 6 and Opera 8. They all appear preety indentical.

try that out and see how it goes.

Eskimojo
12-11-2006, 12:34 AM
Thanks Harbinger, that worked a treat.

The fact that you explain what it is you did is also very much appreciated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum