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 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS layer - how to get it to hug the bottom

    Fairly simple I'd have thought but under closer inspection, perhaps not. Would be grateful if anybody could help out with it.

    Anyway, what I need to do is to get an image to stay in the bottom right. This is easy with absolute positioning but when you scroll down it remains in position. I can't specify it as a background image because I've already got one.

    The rest of the layout is relatively positioned but that probably doesn't make any difference.


    So to sum up, how can you get a layer to hug the bottom of the page even when you scroll down?



    Thanks in advance,
    Ed

  • #2
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just set the absolute positioning to:
    Code:
    div.name{position:absolute; bottom:1px; right:1px;}
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Same result as having bottom: 0px and right: 0px;

    Absolute positioning applies to the initial browser position but doesn't follow when you scroll.

  • #4
    eak
    eak is offline
    Regular Coder eak's Avatar
    Join Date
    Jun 2002
    Location
    Nashville, TN
    Posts
    354
    Thanks
    0
    Thanked 26 Times in 26 Posts
    you want position:fixed;

    IE does not support this though.
    eak | "Doing a good deed is like wetting your pants; every one can see the results, but only you can feel the warmth."

  • #5
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you post a link to your site?
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #6
    New Coder
    Join Date
    Jun 2006
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Unfortunately not, I have to keep it confidential until it's released and IE support is important moreso than anything else so fixed isn't really an option. I guess I'll have to do without it for the time being. Thanks for the help.

  • #7
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #8
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Have you thought about positioning the image as an image and set its z-index to 1 and set the z-index to the content text to 5. This should allow the text to flow over the image as if it were a background no problem!

    #YourPicture img {
    position:absolute;
    bottom:0;
    right:0;
    z-index:1;
    }

    #content {
    position:relative;
    z-index:5;
    }

    then put all you text in <div id=content>YourText</div>

    That should do the trick.

    Daniel


  •  

    Posting Permissions

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