SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning a footer at the bottom of the screen

    I've tried for days to add a CSS sticky footer (positioning a footer at the bottom of the screen) to one of my pages, but I can't get it to work... Please help me, I have tried all I can, but I'm not an expert and I had to give up. I tried with various codes found around the net and especially with "footerStickAlt".

    Below is the code of the page on which I want to add the sticky footer. I have simplified it a lot, so it's easier to understand (I hope). All I need to do is to make the red and white portions (you will see them when you paste the code as html) touch the bottom of the screen. Many thanks, and please help me if you can...

    Source code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    <html><head>

    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <!-- ****** start of Sticky Footer CSS ****** -->

    <!-- here goes the sticky footer css code -->

    <!-- ****** end of Sticky Footer CSS ****** -->

    </head>
    <body>

    <!-- ****** start of Page Layout ****** -->

    <table width="779" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr><td valign="top" width="150" bgcolor="red">
    <table width="100%" cellpadding="9" cellspacing="0" border="0">
    <tr><td><table width="100%" cellpadding="0" cellspacing="2" border="0">
    <tr><td><table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td align="center">

    <img src="http://www.example.com/logo.png" alt="image">

    <tr><td valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td><table width="100%" cellpadding="4" cellspacing="1" border="0">

    <tr><td><a href="http://www.example.com/">Link</a></td></tr>

    </table></table></table></table>

    <table width="100%" cellpadding="1" cellspacing="0">
    <tr><td><table width="100%" cellpadding="3" cellspacing="0" border="0">
    <tr><td align="center">

    </table></table></table>

    <td valign="top" bgcolor="#ffffff">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td valign="top" width="100%" bgcolor="red">
    <table width="100%" cellpadding="2" cellspacing="0" border="0">
    <tr><td width="10%" align="left"><table width="100%" cellpadding="4" cellspacing="2" border="0">

    <tr><td width="20%"><a href="http://www.example.com/">Link</a></td>

    </table>

    <td><table cellpadding="0" cellspacing="1" border="0" width="100%">
    <tr><td align="right">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td width="8" bgcolor="#97B3D1" valign="top">

    </table></table></table>

    </table>
    <tr><td valign="top" width="100%">
    <table width="98%" cellpadding="0" cellspacing="0" border="0">
    <tr><td valign="top">

    <!-- ****** end of Page Layout ****** -->

    <!-- ****** start of Content ****** -->

    text text text text text text text text<br><br>

    FOOTER

    <!-- ****** end of Content ****** -->

    </table></table></table>

    </body></html>

  2. #2
    SitePoint Enthusiast ComputerGuru247's Avatar
    Join Date
    Jul 2006
    Location
    Wisconsin
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Besides all the text can we see a site as well. It is a lot easier to view your source than read it here.

    Thanks.
    Bryan

    Breakpoint Designs - Web Design, Logos, and more!

  3. #3
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^^
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  4. #4
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you say you'd tryed using http://www.themaninblue.com/experiment/footerStickAlt/ ?

    If so, did you try and implement it into your existing code, or start from scratch using one of the examples from the above URL?
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Northern Star
    Did you say you'd tryed using http://www.themaninblue.com/experiment/footerStickAlt/ ?

    If so, did you try and implement it into your existing code, or start from scratch using one of the examples from the above URL?
    Yes, I used the example from [URL=http://www.themaninblue.com/experiment/footerStickAlt/] and I tried to implement the code in my existing page. The page I'm talking about is http://www.nightskyinfo.com/archive/ngc2403_galaxy/ (it has very little text). I did the tests on this page, but if I can get it to work I will add the code site-wide.

    The code I attached in this thread is a simplified version of that page; I think it's much easier to work with it than with the actual page.

    Thanks so much for you replies!

  6. #6
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh I think I got it. The solution is much more simple and elegant than using the sticky footer.

    All I need to do is give a height of 100% to the "master table" of the page (the first table after <!-- ****** start of Page Layout ****** -->).

    Here is the CSS for it:

    <style type="text/css">
    body {
    background-color: blue;
    }
    html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    }
    #wrapper {
    background-color: white;
    margin: 0 auto;
    text-align: left;
    vertical-align: middle;
    width: 779px;
    }
    </style>

    And the html:

    <table id="wrapper" align="center">

    The link to the excellent article that describes this technique can be found in google: 100% Table Height


Bookmarks

Posting Permissions

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