...

View Full Version : CSS scrollbar question



th3gman
10-19-2009, 01:10 AM
All,

I am stuck on something that is probably pretty simple.

On this page:
http://www.starvingdevelopers.com/finaltest.html

The center column is supposed to have horizontal and vertical scroll bars, and the content in that one column needs to be viewed by scrolling while the other columns just get longer as content is added.

I think my solution for the background color may be stopping me from doing the center column.

Basically, my final page needs to look like:
http://www.starvingdevelopers.com/images/finalCodeChallenge.png

Thank in advance!

tspek
10-19-2009, 01:45 AM
In your CSS:



#block2 {
overflow:scroll;
}


It's also a matter of how wide that block is. If that block is wide enough to hold the entire text without scrolling then it won't scroll. So you'll need to adjust the width of those blocks if you need it to scroll.

th3gman
10-19-2009, 03:30 AM
Right, so I have overflow: scroll in there...that's why the vertical bar is showing up. But...since the width is set to 33% and the height just adjusts with the content...how will it actually ever scroll?

Even if I set the width to say 150px...the text just keeps wrapping, and it never scrolls...how do I stop if from wrapping?

Basically, no matter what I do, I can't get it to be just like this (this is what I HAVE to do):
http://www.starvingdevelopers.com/images/finalCodeChallenge.png

This is as close as I get:
http://www.starvingdevelopers.com/finaltest.html

tspek
10-19-2009, 03:33 AM
Right, so I have overflow: scroll in there...that's why the vertical bar is showing up. But...since the width is set to 33% and the height just adjusts with the content...how will it actually ever scroll?

Even if I set the width to say 150px...the text just keeps wrapping, and it never scrolls...how do I stop if from wrapping?

Thanks!

Then you need to limit how tall it is.

th3gman
10-19-2009, 03:41 AM
Ok..do check this out:
http://www.starvingdevelopers.com/finaltest.html

I limited the height...

There are 4 paragraphs of text...you can't see the 4th paragraph (well maybe just the top)...the scroll bar is there...yet you can't scroll. ....Sigh....

Basically the scroll bar is there...but inactive...even with text below that should be scrollable to.

th3gman
10-19-2009, 04:18 AM
Gah...this is killing me...

How about this...how would some of y'all code a page to look like this:
http://www.starvingdevelopers.com/im...eChallenge.png

I keep changing my code...and at this point, I think I've totally hosed it.

th3gman
10-19-2009, 04:41 AM
Thanks for the help...I think I answered my own questions there at the end.

It think I got it!

http://www.starvingdevelopers.com/finaltest.html

:thumbsup:

Rowsdower!
10-19-2009, 03:24 PM
As it is, it seems like you will never use the horizontal scroll bar on there. If you would prefer to get rid of it then try this:



#colmid {
float: left;
width: 33.3%;
background: red;
/* overflow: scroll;*/
overflow-x:auto;
overflow-y:scroll;
height: 500px;
}

Congratulations on solving your mystery!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum