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