homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
A fixed css floating footer - apologies in advance
soxos




msg:3667047
 8:15 pm on Jun 4, 2008 (gmt 0)

I have looked I promise, but I am not a css expert, so I can't find an example of what I am looking for!..

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

 

appi2




msg:3667062
 8:26 pm on Jun 4, 2008 (gmt 0)

hmm a footer fixed to the bottom.

How about position:fixed;

mkdigi




msg:3667765
 5:28 pm on Jun 5, 2008 (gmt 0)

Or, what I do, is clear:both. It will float at the absolute bottom of your page, if the html code is at the bottom of your site, by not appearing until both sides are clear.

soxos




msg:3667921
 8:26 pm on Jun 5, 2008 (gmt 0)

Sorry for being dense, can anyone sticky me an example?
I have no problem with the floating footer hovering over content - infact I want it too, as the last section of the "content" (html) is actually empty space, deliberately so if people do scroll to the bottom of the page they see all the useful content and all that is hidden by the footer is empty space.

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!

appi2




msg:3667939
 8:47 pm on Jun 5, 2008 (gmt 0)

Do you want the footer to always be visible. Even if the user scrolls the window. If so with the code you have up there becomes.

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.

soxos




msg:3667966
 9:19 pm on Jun 5, 2008 (gmt 0)

thanks for your help appi :)

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

appi2




msg:3667978
 9:34 pm on Jun 5, 2008 (gmt 0)

lol
That above does exactly what you want, it works in IE6 7 FF2 Opera and safari.. Unless your using IE5.
If you have problems it might be due to other code in your CSS.
Make a test page with only the footer and a page full of text.
Oh and it also works in konqueror.

soxos




msg:3668023
 10:58 pm on Jun 5, 2008 (gmt 0)

Thanks again for your help & patients. I got all excited then, but for some reason it just isnt playing nice! I've stripped out everything, but still no joy. I've been at this now for 2 nights.

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

appi2




msg:3668176
 5:20 am on Jun 6, 2008 (gmt 0)

Ahh I get it know sorry [blush] Your using IE6. I swear it worked in IE6 when I tried it. Excuses excuses!
Anyhoo there's a work around try this.. Just be aware if you use absolute or relative position anywhere else on another element in the page it will go wrong and kittens will cry.

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved