Forum Moderators: not2easy
I am looking for a CSS floating footer which can be seen at the bottom of the page regardless of page length (ie in most cases will hover over the content)
I have this working fine, the problem is when one scrolls, the footer scrolls up with the content and doesnt position itself back where it is meant to be unless you resize the window!
This is the CSS I am using to positon the footer:-
div.footer {
background-color: #000000;
height: 80px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
position: absolute;
width: 100%;
position:absolute; left:0px; bottom:0px;
}
Does anyone have the patients to help me out with this one?
Thx
How about position:fixed;
My problem is when I scroll, my footer moves up the page, and doesnt reset it self until i change the browser window size
I want the footer to stay at the bottom whilst I scroll - im sure it must be possible? although i am not experienced enough in css to fix this problem!
div.footer {
background-color: #000000;
height: 80px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed; left:0px; bottom:0px;
}
If you have a problem with the bottom of your content not showing because of the footer then add a bottom-margin thats just a bit higher than your footer height to your content.
If you don't want the above then I'm not sure what you want.
I want the footer to always be visable at the bottom of the browser window, regardless of the length of my page, or how much i scroll.
In effect, I want the same appearance you would get if you used a bottom frame...
Does that make sense? perhaps it just isnt possible in css!
thanks for the help, much appreciated - and if you have any idea on the above please post back....
Okay, so this is what I have left:-
<!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>
<style type="text/css">
<!--
div.footer {
background-color: #000000;
height: 80px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed; left:0px; bottom:0px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0">
a large amount of text!
<br /><br />
<div class="footer">some random footer text</div>
</body>
</html>
The footer is not located at the bottom of the browser window, but right at the bottom of the content - ie you need to scroll to see it...
Also if you forget the doctype and put the browser in quirks mode it will also fail in IE7
God bless IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>hjhjh</title>
<style type="text/css">
/*Yhis is just to make the text long enough so we can scroll delete it demo*/
p {width:10px;}
.footer {
background-color: #000000;
height: 80px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed; left:0px; bottom:0px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
body {height:100%; overflow-y:auto;}
html {overflow-x:auto; overflow-y:hidden;}
* html .footer {position:absolute;}
</style>
<![endif]-->
</head>
<body>
<p>Lo rem ipsu m dol or sit am et, conse cte tuer adi pis cing elit. Vest ibu lum ac tel lus eu tur pis tem por phar etra. Fus ce eget odio id ma uris volu tpat accums an. Viva mus sag ittis tincid unt nibh. Ali quam elem en tum, ips um vel</p>
<div class="footer">some random footer text</div>
</body>
</html>
