CSS Position Layer relative to bottom of another layer (cont.)

Discussion in 'HTML' started by Dave Smithz, Feb 17, 2006.

  1. Dave Smithz

    Dave Smithz Guest

    Hi there,

    A good while ago I posted a request about how I could get copy right message
    always be a fixed distance from the bottom of another layer / table.
    This meant I would be able to make the content of a particular page be as
    long as necessary and then the copyright message always be a fixed distance
    from the bottom of the text.

    I read all your useful messages, but could just not get it to work for me. I
    have decide to post the actual page and see if anyone can recommend how I
    would achieve what I'm after.

    Take a look at:

    http://www.d-geo.com/about-test.htm

    and see the copyright message at the bottom- this is a fixed position using
    a class that has an absolute positioning, but bearing in mind the rest of
    the page layout (as in the rest of the website is already rolled out in the
    current style), how do I add the copyright information so that it is in a
    fixed position below the text (without using Javascript).

    Also in an ideal world, the position of the copyright text would also be at
    a maximum vertical position on the page. Therefore if the text part is quite
    small on the page, the copyright message would only come up to a maximum
    point on the page (so it does not end up being too high on pages with a
    little text). This part is not as important.

    Hope this makes sense.

    Kind regards

    Dave
     
    Dave Smithz, Feb 17, 2006
    #1
    1. Advertising

  2. Dave Smithz

    wayne Guest

    Dave Smithz wrote:
    > Hi there,
    >
    > A good while ago I posted a request about how I could get copy right message
    > always be a fixed distance from the bottom of another layer / table.
    > This meant I would be able to make the content of a particular page be as
    > long as necessary and then the copyright message always be a fixed distance
    > from the bottom of the text.
    >
    > I read all your useful messages, but could just not get it to work for me. I
    > have decide to post the actual page and see if anyone can recommend how I
    > would achieve what I'm after.
    >
    > Take a look at:
    >
    > http://www.d-geo.com/about-test.htm
    >
    > and see the copyright message at the bottom- this is a fixed position using
    > a class that has an absolute positioning, but bearing in mind the rest of
    > the page layout (as in the rest of the website is already rolled out in the
    > current style), how do I add the copyright information so that it is in a
    > fixed position below the text (without using Javascript).
    >
    > Also in an ideal world, the position of the copyright text would also be at
    > a maximum vertical position on the page. Therefore if the text part is quite
    > small on the page, the copyright message would only come up to a maximum
    > point on the page (so it does not end up being too high on pages with a
    > little text). This part is not as important.
    >
    > Hope this makes sense.
    >
    > Kind regards
    >
    > Dave
    >
    >


    Replace your css for .copyright entries for margin-top and margin-bottom
    with

    top : auto;
    bottom : 1em;

    Regards,

    --
    Wayne
    http://www.glenmeadows.com
     
    wayne, Feb 19, 2006
    #2
    1. Advertising

  3. Dave Smithz

    Dave Smithz Guest

    "wayne" <> wrote in message:
    >
    > Replace your css for .copyright entries for margin-top and margin-bottom
    > with
    >
    > top : auto;
    > bottom : 1em;


    Thanks for that Wayne, I tried this (although I did not have a margin-top
    and margin bottom entry in their originally) and while it sort of gave the
    results I was after, it's not exact.

    Can you explain a little how this should work. What does 1em mean?

    Thanks again.

    Dave
     
    Dave Smithz, Feb 19, 2006
    #3
  4. Dave Smithz

    Guest

    Hello Dave,

    Am I right in thinking your goal is to have the copyright at the bottom
    of the page no matter how short or long the page is? If so, I've only
    found one way to get this to work. I tried a lot of things just using
    CSS, but nothing was cross-browser compatable. So, unfortunately you
    have to use a table.

    Here's how it works:

    1. Add the following styles (notice the height values and the negative
    margin on the footer style):
    html, body {
    min-height:100%;
    }
    ..body-table {
    height:100%;
    width:100%;
    padding:0px;
    }
    ..clear-footer {
    height:135px;
    }
    ..footer {
    width:100%;
    margin-top:-135px;
    }

    2. Use this as a basis for your page:
    <table class="body-table" cellspacing="0">
    <tr>
    <td>
    <div class="clear-footer"></div>
    </td>
    </tr>
    </table>
    <div class="footer"></div>
    </table>

    I tried a ton of different ideas, and this was the one that worked all
    of the time, and had the least code. Hope it helps.

    Chris S.
    Implied By Design
    http://www.impliedbydesign.com
    Free Web Development Programs and Scripts
    http://www.impliedbydesign.com/free-software-scripts.html
     
    , Feb 20, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dan
    Replies:
    1
    Views:
    8,374
    ainigma
    Apr 4, 2008
  2. Dave Smithz
    Replies:
    11
    Views:
    1,368
  3. Noozer
    Replies:
    1
    Views:
    7,170
    Carolyn Marenger
    Mar 13, 2006
  4. gelbeiche
    Replies:
    6
    Views:
    441
    CrayzeeWulf
    Apr 25, 2005
  5. Dhananjay
    Replies:
    1
    Views:
    1,127
    sloan
    Dec 18, 2006
Loading...

Share This Page