positioning is not working in long pages

chelvis

01-21-2004, 07:42 PM

I have website with some pages short and some are very long. Initially I had my website as a framed page and the bottom frame is only used to display some links and the copyright information. The reason I used as a framed page is even the page is very long, the bottom links will always show. But now I have to remove the frames. So I created this style sheet and it works fine in very short pages (pages which don't have to scroll). In these pages, the bottom links stays at the bottom of the browser. But with very long pages, when the page is loaded the bottom navigation links appears to stay at the bottom. But when I scroll they I see the links are cutting in the middle of the page content. Is there a way to fix this with some .css?

<html>
<head>
<style type="text/css">
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" width="85%">
<tr><td valign="top">
There is a lot of text in this table which makes the table to scroll
</td></tr>
</table>


<div id=footer>
<table border="0" height="24" width="99%" cellspacing="0" cellpadding="0">
<tr><td CLASS="DYelbg" valign="top" height="2" colspan="2"><img src="images/sp.gif" border="0" height="2"></td></tr>
<tr><td CLASS="Blubg" align="left" valign="top" height="16" > <a CLASS="SWhite" href="home.html"target="home"><b>Home</b></a> <a CLASS="SWhite">|</a> <a CLASS="SWhite" href="mailto: email@me.com"><b>E-mail</b></a> <a CLASS="SWhite">|</a> <a CLASS="SWhite" href="javascript: window.open('privacy.html','NewWindow','status=yes,resizable,scrollbars=1,width=600,height=450');voi d('');"><b>Privacy Policy</b></a> <a CLASS="SWhite">|</a> <a CLASS="SWhite" <a CLASS="SWhite" href="sitemap.html" target="home"><b>Sitemap</b></a></td><td CLASS="Blubg" align="right" valign="top"><a CLASS="SWhite">Copyright © 2004</a> </td></tr>
<tr><td CLASS="DBlubg" height="2" colspan="2"><img src="images/sp.gif" border="0" height="2"></td></tr>
</table>
</div>

</body>
</html>

Can I use the div tag with a table as I have used?

kansel

01-21-2004, 08:55 PM

You can use position: fixed; instead, but this doesn't work in IE yet.
When it does work (as in Mozilla) it positions the div where you want it to go but the container is the viewport (window) instead of the document so when you scroll, the fixed div won't scroll with the page.

chelvis

01-21-2004, 09:22 PM

Yes it works but doesnt solve my problem. Because if the page is too long, then the bottom footer is all the way at the bottom. If you dont scroll, then you wont see the bottom links. But when I used the frames the story is different. With frames the bottom links (which are in the bottom frame) is always visible.

What I would like is, the bottom links should always be visible to the user at the bottom of the page whether the page is too long or short. But with no frames.

kansel

01-21-2004, 09:35 PM

What I would like is, the bottom links should always be visible to the user at the bottom of the page whether the page is too long or short. But with no frames.
That is what position: fixed; does.

It doesn't work in IE though, it acts the same as position: static;. The only way to get the effect you're after that works in all browsers is to use javascript or frames.

chelvis

01-21-2004, 10:22 PM

ok thanks a lot kansel. I cannot use frames bec. the client told me. Is there any javascript you know I can use?

kansel

01-21-2004, 10:56 PM

I don't know any myself. A quick search at DynamicDrive.com returned this gem (http://www.dynamicdrive.com/dynamicindex4/logo.htm). It should be fairly simple to modify the script to display a site footer instead of an image.

ronaldb66

01-22-2004, 10:43 AM

It's perfectly normal for a footer to reside at the bottom of the page, even when it's outside the viewport because of the page's length. If the links aren't important enough to be visible immediately when the page is loaded and the top of it is in the viewport, leave 'm at the bottom of the page; if they are important, better consider moving 'em to the top of the page, like somewhere around the header, or have 'em both around the top and at the bottom.