...

View Full Version : Keep Element in View - Pure CSS



itsallkizza
10-30-2008, 08:50 PM
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 ;)

twodayslate
10-30-2008, 10:13 PM
#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.

itsallkizza
10-30-2008, 10:39 PM
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.

twodayslate
10-30-2008, 11:04 PM
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
http://d-graff.de/fricca/center.html
http://www.milov.nl/code/css/verticalcenter.html
?

jlhaslip
10-30-2008, 11:39 PM
check out cssplay.co.uk
there is a position fixed layout that even IE6 likes.

Apostropartheid
10-30-2008, 11:52 PM
Will the element have an explicit height and width?

itsallkizza
10-31-2008, 01:10 AM
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.

twodayslate
10-31-2008, 01:14 AM
What is this being used for and why can't you use js?

itsallkizza
10-31-2008, 06:03 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum