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 9 of 9
  1. #1
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts

    Keep Element in View - Pure CSS

    Looking to see if anyone knows a way to keep an element visible halfway down a page as the user scrolls down without using javascript (thinking it's got to lie in the position:fixed property, but how to get the 50%...).

    For example, a menu positioned on the right of the page, but halfway down - without knowing the exact height of the element.

    If it turns out to be impossible without javascript, feel free to post your personal favorite (cleanest/smallest/no scroll lag) method.

    I'll be doing the same thing after I hit post, so this is more of a challenge for the tightest code possible
    Last edited by itsallkizza; 10-30-2008 at 09:58 PM. Reason: changes

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Code:
    #box {
    position:fixed;
    top: 50%;
    left: 50%;
    }
    This will put #box in the center of the screen all the time.

    LMK if this is what you wanted.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Ah yes, that's close but for two things:
    1) Doesn't cut the cake for IE6 (though honestly for my purposes this doesn't matter too much)
    2) More importantly, the 50% sets the top of the element at 50%, not the center of the element, which is why I was so focused on finding a non-JS method.

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    check out cssplay.co.uk
    there is a position fixed layout that even IE6 likes.

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Will the element have an explicit height and width?

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    without knowing the exact height of the element
    If I knew the height it'd be a no brainer.

    http://www.wpdfd.com/editorial/thebox/deadcentre4.html and http://www.milov.nl/code/css/verticalcenter.html don't work because you need a height.

    http://d-graff.de/fricca/center.html doesn't work because I need it to be fixed.

  • #8
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    What is this being used for and why can't you use js?
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #9
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I can, just figured we had some top notch brains on this board and wanted to see if (assuming it's possible) we could figure out a way to manage it with CSS only.


  •  

    Posting Permissions

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