CSS Position Layer relative to bottom of another layer.

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

  1. Dave Smithz

    Dave Smithz Guest

    I would like to be able to position the top of one layer containing some
    text to a fixed distance from the bottom of another layer containing text.

    Is this possible and if so how?

    For example, I might have a set of web pages I want to develop and each page
    contains a layer of varying vertical length. On each page underneath that I
    want to position another layer containing a copyright message.
    Ideally I would not have to go through each page and position each copyright
    message individually as this would be a pain to maintain. Instead it would
    be better if the copyright layer was always a fixed distance from the text
    box so no matter the size of the main text box, the copyright message is
    always positioned appropriately.

    Hope this makes sense and that someone can assist.

    Kind regards

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

  2. Dave Smithz

    Toby Inkster Guest

    Dave Smithz wrote:

    > I would like to be able to position the top of one layer containing some
    > text to a fixed distance from the bottom of another layer containing text.


    <div>
    Here is some text.
    </div>
    <div style="margin-top:58px">
    This text is exactly 58px below the other text.
    </div>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jan 17, 2006
    #2
    1. Advertising

  3. Toby Inkster wrote :
    > Dave Smithz wrote:
    >
    >> I would like to be able to position the top of one layer containing some
    >> text to a fixed distance from the bottom of another layer containing text.

    >
    > <div>
    > Here is some text.
    > </div>
    > <div style="margin-top:58px">
    > This text is exactly 58px below the other text.
    > </div>
    >


    If the layers are nested, then

    <head>
    (...)
    <style type="text/css">
    div#Container, div#NestedDiv {position: absolute;}
    div#NestedDiv {bottom: 58px;}
    </style>
    (...)
    </head>
    <body>
    (...)

    <div id="Container">Here is some text. Must be at least 59px in height.
    <div id="NestedDiv">This text is exactly 58px from the bottom of its
    containing block.</div>
    </div>

    Gérard
    --
    remove blah to email me
    =?UTF-8?B?R8OpcmFyZCBUYWxib3Q=?=, Jan 17, 2006
    #3
  4. Dave Smithz

    Toby Inkster Guest

    Gérard Talbot wrote:

    > <head>
    > (...)
    > <style type="text/css">
    > div#Container, div#NestedDiv {position: absolute;}
    > div#NestedDiv {bottom: 58px;}
    > </style>
    > (...)
    > </head>
    > <body>
    > (...)
    >
    > <div id="Container">Here is some text. Must be at least 59px in height.
    > <div id="NestedDiv">This text is exactly 58px from the bottom of its
    > containing block.</div>
    > </div>


    But here, the *bottom* of the nested div is 58px *above* the bottom of the
    container, which doesn't sound like what the OP wanted at all.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jan 17, 2006
    #4
  5. Dave Smithz

    Greg N. Guest

    Dave Smithz wrote:

    > I would like to be able to position the top of one layer containing some
    > text to a fixed distance from the bottom of another layer containing text.


    I don't understand why it has to be different layers. If you just use
    two divs, the second one will normally be placed below the first. If
    you need a certain distance, insert a filler of some sort.

    <div>
    page content
    </div>

    <div>
    copyright stuff
    </div>


    --
    Gregor's Motorradreisen:
    http://hothaus.de/greg-tour/
    Greg N., Jan 17, 2006
    #5
  6. Dave Smithz

    Dave Smithz Guest


    >> I would like to be able to position the top of one layer containing some
    >> text to a fixed distance from the bottom of another layer containing
    >> text.

    >
    > <div>
    > Here is some text.
    > </div>
    > <div style="margin-top:58px">
    > This text is exactly 58px below the other text.
    > </div>


    Hmmm my brief experiment did not give the desired results using the example
    above exactly as it is. Do I need to mark the second div tag as relative. IF
    there is a good definitive reference website where I can look up items such
    as "margin-top:58px" then that would be useful.

    Cheers
    Dave Smithz, Jan 17, 2006
    #6
  7. Dave Smithz

    Greg N. Guest

    Dave Smithz wrote:


    >><div>
    >> Here is some text.
    >></div>
    >><div style="margin-top:58px">
    >> This text is exactly 58px below the other text.
    >></div>

    >
    >
    > Hmmm my brief experiment did not give the desired results using the example
    > above exactly as it is.


    Really? Show us the page.


    --
    Gregor's Motorradreisen:
    http://hothaus.de/greg-tour/
    Greg N., Jan 17, 2006
    #7
  8. Dave Smithz

    Toby Inkster Guest

    Dave Smithz wrote:

    > Hmmm my brief experiment did not give the desired results using the example
    > above exactly as it is. Do I need to mark the second div tag as relative.


    Both should be position:static, not relative or absolute.

    http://examples.tobyinkster.co.uk/58pixels

    > IF there is a good definitive reference website where I can look up
    > items such as "margin-top:58px" then that would be useful.


    http://www.w3.org/TR/CSS21/

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jan 17, 2006
    #8
  9. Toby Inkster wrote :
    > Gérard Talbot wrote:
    >
    >> <head>
    >> (...)
    >> <style type="text/css">
    >> div#Container, div#NestedDiv {position: absolute;}
    >> div#NestedDiv {bottom: 58px;}
    >> </style>
    >> (...)
    >> </head>
    >> <body>
    >> (...)
    >>
    >> <div id="Container">Here is some text. Must be at least 59px in height.
    >> <div id="NestedDiv">This text is exactly 58px from the bottom of its
    >> containing block.</div>
    >> </div>

    >
    > But here, the *bottom* of the nested div is 58px *above* the bottom of the
    > container, which doesn't sound like what the OP wanted at all.
    >


    Ok. I read the OP post and misinterpreted it incorrectly. With abs. pos.
    elements and a nested one, then one would need to compute/get the
    clientHeight of the containing block (id="Container") and then add 58px.
    Reposition would have to be done on an onload event of the body node.
    If the nested div is not abs. pos., then your proposal is correct.

    Cheers,

    Gérard
    --
    remove blah to email me
    =?UTF-8?B?R8OpcmFyZCBUYWxib3Q=?=, Jan 17, 2006
    #9
  10. Dave Smithz

    Neredbojias Guest

    With neither quill nor qualm, =?UTF-8?B?R8OpcmFyZCBUYWxib3Q=?= quothed:

    > > But here, the *bottom* of the nested div is 58px *above* the bottom of the
    > > container, which doesn't sound like what the OP wanted at all.
    > >

    >
    > Ok. I read the OP post and misinterpreted it incorrectly.


    Well next time please misinterpret it correctly...

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Jan 18, 2006
    #10
  11. Dave Smithz

    Neredbojias Guest

    With neither quill nor qualm, Dave Smithz quothed:

    > I would like to be able to position the top of one layer containing some
    > text to a fixed distance from the bottom of another layer containing text.
    >
    > Is this possible and if so how?


    If you're talking about positioned layers and the top has only text,
    margin-top the 2nd layer using ems. (You might also need some padding
    in pixels for fine adjustment.)

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Jan 18, 2006
    #11
  12. Dave Smithz

    Guest

    Hi, been a while since I reploie to this thread and I am doing it
    thorugh someone else's PC, but I have still not resolved it. But your
    examples and input have been very useful. My circumstances are a bit
    different.

    This is what I have. It is like this now because of the way the website
    was built (learning more while devfelopming) so it is hard to change
    aspects without a lot of work,

    A summary example is, we I have two div's

    <div>
    <table class="tabletextstyle">
    content
    </table>
    </div>

    <div class="copyrightstyle">
    Copy right text
    </div>

    In another file the styles are defined as

    ..copyright-text {
    width:169px;
    height:25px;
    z-index:11;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #66CCFF;
    margin-top:100px
    }

    ..tabletextstyle{
    position: absolute;
    top: 150px;
    left: 182px;
    width: 437px;
    height: 74px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    z-index: 10;
    }


    Now the main table with the main page text is defined in many webpages
    and I was reluctatnt to make changes to that. So from this I was trying
    to make the copyright text be relative fixed distance from the bottom
    of the main table text.


    Trying to place the div for the copyright text like I have above did
    not quite display it where I wanted it. I will keep reading, but if
    there is a way to easily amend my code to make this work better then I
    am open to suggestions.

    Thanks

    Dave
    , Jan 25, 2006
    #12
    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. Luqman
    Replies:
    1
    Views:
    649
    Luqman
    Feb 7, 2006
  2. Dan
    Replies:
    1
    Views:
    8,345
    ainigma
    Apr 4, 2008
  3. Dave Smithz
    Replies:
    3
    Views:
    7,669
  4. Noozer
    Replies:
    1
    Views:
    7,105
    Carolyn Marenger
    Mar 13, 2006
  5. Dhananjay
    Replies:
    1
    Views:
    1,099
    sloan
    Dec 18, 2006
Loading...

Share This Page