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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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!

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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


  •  

    Posting Permissions

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