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 6 of 6

Thread: Scroll bar

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Scroll bar

    I have searched the internet and cannot find code for a simple news box, so the best way is to make my own newsbox with a scroll bar to move downwards on the div.

    How would I do this?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I think dynamicdrive.com has some you might can use. If I'm thinking of the right thing you're wanting.
    Teed

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    No dynamic drive does not have anything I want.
    I just want a small div with a scrollbar on it. Do I add overflow: scroll-y?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    overflow: auto would be the current standards compliant way to do it. overflow-x and -y are Microsoft proprietary properties that are going to be in the upcoming CSS3 recommendation, though. But test browser support before considering to use it.

    By the way: http://www.brunildo.org/test/Overflowxy2.html

  • Users who have thanked VIPStephan for this post:

    quartzy (02-13-2011)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Thanks for the link stephen, I checked at wc3 schools and am sorted now, with the link you gave.

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I tried it with browsers FF3 and IE8 but I dont have a scrollbar.

    Code:
    div#info {
    width: 260px;
    height: 100px;
    overflow:auto;
    padding: 0.50em;
    margin: 0;
    float:right;}
    
    p.ticker {
    width: 240px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 1em;
    margin: 0; padding-top: 5px;}
    the html is:
    Code:
    <div id="info">
    <h4 class="booking_box">Latest News!</h4>
    <p class="ticker">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio eros pellentesque sapien, at consectetur mi nibh at massa.</p>
    <p class="ticker">orem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, eros pellentesque sapien, at consectetur mi nibh at massa.</p>
    </div>


  •  

    Posting Permissions

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