Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-19-2009, 12:10 AM   PM User | #1
th3gman
New to the CF scene

 
Join Date: Oct 2009
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
th3gman is an unknown quantity at this point
CSS scrollbar question

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/im...eChallenge.png

Thank in advance!
th3gman is offline   Reply With Quote
Old 10-19-2009, 12:45 AM   PM User | #2
tspek
Regular Coder

 
Join Date: Oct 2009
Posts: 190
Thanks: 12
Thanked 2 Times in 2 Posts
tspek is an unknown quantity at this point
In your CSS:

Code:
#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.
tspek is offline   Reply With Quote
Old 10-19-2009, 02:30 AM   PM User | #3
th3gman
New to the CF scene

 
Join Date: Oct 2009
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
th3gman is an unknown quantity at this point
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/im...eChallenge.png

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

Last edited by th3gman; 10-19-2009 at 02:33 AM..
th3gman is offline   Reply With Quote
Old 10-19-2009, 02:33 AM   PM User | #4
tspek
Regular Coder

 
Join Date: Oct 2009
Posts: 190
Thanks: 12
Thanked 2 Times in 2 Posts
tspek is an unknown quantity at this point
Quote:
Originally Posted by th3gman View Post
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.
tspek is offline   Reply With Quote
Old 10-19-2009, 02:41 AM   PM User | #5
th3gman
New to the CF scene

 
Join Date: Oct 2009
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
th3gman is an unknown quantity at this point
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.

Last edited by th3gman; 10-19-2009 at 02:45 AM..
th3gman is offline   Reply With Quote
Old 10-19-2009, 03:18 AM   PM User | #6
th3gman
New to the CF scene

 
Join Date: Oct 2009
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
th3gman is an unknown quantity at this point
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 is offline   Reply With Quote
Old 10-19-2009, 03:41 AM   PM User | #7
th3gman
New to the CF scene

 
Join Date: Oct 2009
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
th3gman is an unknown quantity at this point
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

th3gman is offline   Reply With Quote
Old 10-19-2009, 02:24 PM   PM User | #8
Rowsdower!
Senior Coder

 
Rowsdower!'s Avatar
 
Join Date: Oct 2008
Location: Some say it's everything.
Posts: 2,007
Thanks: 5
Thanked 395 Times in 388 Posts
Rowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura about
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:

Code:
#colmid {
	float: left;
	width: 33.3%;
	background: red;
/*	overflow: scroll;*/
	overflow-x:auto;
	overflow-y:scroll;
	height: 500px;
}
Congratulations on solving your mystery!
__________________
The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
Seek and you shall find... basically:
validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
Rowsdower! is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:22 AM.


Advertisement
Log in to turn off these ads.