Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts

    positioning is not working in long pages

    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>

    <!-- Footer potion -->
    <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" >&#160; &#160; <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>&#160; <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 &copy; 2004</a>&#160; &#160; </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?

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok thanks a lot kansel. I cannot use frames bec. the client told me. Is there any javascript you know I can use?

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    I don't know any myself. A quick search at DynamicDrive.com returned this gem. It should be fairly simple to modify the script to display a site footer instead of an image.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rethink the design

    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.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •