CSS Scrolling Inquiry

ryankop · **Posted:** Mon Oct 16, 2006 8:46 pm

Hey, I'm building my site here.. however I saw something really cool which was done on another site and I want to incorporate on my site. It's 2 things really. I looked at the site http://www.indigofield.com and if you use firefox or something and scroll down using the main scrollbar (may have to resize the screen smaller) an interior div container scrolls down not the whole site. Another cool thing is when it hits either the bottom or the top of the blog area the text fades. Anyone know how they did it?

Thanks

Ryan[/url]

Tony · **Posted:** Mon Oct 16, 2006 9:06 pm

actually the entire site does scroll, but the header and the footer are statically positioned to remain in place. The text fading is achieved with having a semi-transparent image overlayed in that area.

really nice layout, I like Smile

ryankop · **Posted:** Mon Oct 16, 2006 10:02 pm

Yea I was assuming that also. Know the syntax to make a background to a div container stationary? Also think it'd be possible to make my navbar stationary too? I almost want only one part moving when it scrolls.

ryankop · **Posted:** Mon Oct 16, 2006 10:03 pm

Oh woops, forgot to also ask. What'cha mean by semi-transparent? That I don't quite understand how that is done image-wise or css wise.

Tony · **Posted:** Mon Oct 16, 2006 10:18 pm

from the site itself

code:

.headercontainer {
position: fixed;
display: block;
top: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 50px;
z-index: 10;
}

the semi-transparent image is

http://www.indigofield.com/images/fade_out.png

basically just a png with transparancy turned on, and a layer solid colour set to be semi-translusent (different % will have different effects)

rdrake · **Posted:** Mon Oct 16, 2006 10:32 pm

Very nice layout. Sadly it doesn't render nearly correctly in Internet Explorer. Not like anybody cares about IE anymore anyways Wink

.

ryankop · **Posted:** Tue Oct 17, 2006 4:18 pm

Hmm.. trying to implement something similar into this site of mine. Can't exactly get it to work though. I have the sidebar position's locked and working fine, the header/footer sort'of working (can't get the lines properly below or above them), also some difficulty with the text, since it goes past the footer, and I want it to be cut off past the footer. Does anyone wanna help me? If so, pm me.

Thanks a lot you guys!

Tony · **Posted:** Tue Oct 17, 2006 6:28 pm

ryankop wrote:

some difficulty with the text, since it goes past the footer, and I want it to be cut off past the footer.

Place the footer lower. Anything pass the footer should be off the page.

ryankop · **Posted:** Tue Oct 17, 2006 8:12 pm

Oh gotcha gotcha. Some reason I can't auto margin it to the bottom though... so if I resize the window it auto margins left, right, and bottom. Weird. Also my lines are now all messed...

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members