50 users online (0 members and 50 guests)  

Thread: CSS scroll box


  Results 1 to 4 of 4

Related

  1. Add CSS scroll bar    Forum: CSS Forum
    Replies: 1
  2. Replies: 6
  3. add a scroll bar    Forum: HTML Forum
    Replies: 0
  4. I need help on a scroll bar??    Forum: HTML Forum
    Replies: 9
  1. #1
    Solan's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2010
    Posts
    2

    CSS scroll box

    Hello. It's my first post here so please cut me some slack (just a bit). I've created a text box with a vertical scroll bar and it's almost how I want it - almost. However, when it's displayed in a browser the top portion of the box seems to have extra padding on it pushing the text down a line or two. This space disappears once you scroll but I'd like the text to line up with the top of the text box from the start (it needs to line up with an image).

    I'm sure this is a quick fix but frack me if I can find it.

    Thanks,

    Solan

    P.S. I've already tried adjusting the padding amount but no joy.

    <style type="text/css">
    <!--
    div.scroll {
    height: 200px;
    width: 600px;
    overflow: auto;
    border: 1px solid #000000;
    background-color: #000000;
    padding: 8px;
    color: grey;
    font-family: arial;
    font-size:13px;
    }
    -->
    </style>

    <div class="scroll">
    <p>Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies sit, magna tincidun duis. Enim eros in vel. Maecenas aliquam maecenas ligula nostra, accumsan taciti.</p>

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: CSS scroll box

    Hi there Solan,

    and a warm welcome to these forums.

    The p element is one of those elements that has default margins.

    Try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #scroll {
        width:600px;
        height:200px;
        padding:0 8px;
        border:1px solid #000;
        background-color:#000;
        overflow:auto;
        font-family:arial,sans-serif;
        font-size:13px;
        color:#808080;
     }
    #scroll p {
        margin-top:0;
     }
    </style>
    
    </head>
    <body>
    
    <div id="scroll">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p><p>
    Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim 
    integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue 
    wisi enim nunc ultricies sit, magna tincidun duis. Enim eros in vel. 
    Maecenas aliquam maecenas ligula nostra, accumsan taciti.
    </p>
    </div>
    
    </body>
    </html>
    

  3. #3
    Solan's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2010
    Posts
    2

    Re: CSS scroll box

    Coot,

    Thanks for the quick response. It looks great. Can you tell me 2 more things?

    1. What was the missing code that brought the text up to the top? Was it:

    #scroll p {
    margin-top:0;


    2. How can I change the color of the scroll handle and the 2 up & down arrows on the right side of the box?

    Thanks in advance.

    -Solan

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: CSS scroll box

    Hi there Solan,
    What was the missing code that brought the text up to the top?
    Code:
    padding:0 8px;
    
    ...removed the padding from the top of the div element and this...
    Code:
    #scroll p {
        margin-top:0;
     }
    
    ..removed the default margin from the div element.

    Coloured scrollbars, at present, only work in IE browsrs.

    Try this to see the effect...
    Code:
    #<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #scroll {
        width:600px;
        height:200px;
        padding:0 8px;
        border:1px solid #000;
        background-color:#000;
        overflow:auto;
        font-family:arial,sans-serif;
        font-size:13px;
        color:#808080;
     }
    #scroll p {
        margin-top:0;
     }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    #scroll {
        scrollbar-arrow-color:#ffffcc;
        scrollbar-track-color:#d9d9ff;
        scrollbar-face-color:#d9d9ff;
        scrollbar-highlight-color:#8c8cff;
        scrollbar-3dlight-color:#8c8cff;
        scrollbar-darkshadow-color:#8c8cff;
        scrollbar-shadow-color:#8C8CFF;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div id="scroll">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p><p>
    Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim 
    integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue 
    wisi enim nunc ultricies sit, magna tincidun duis. Enim eros in vel. 
    Maecenas aliquam maecenas ligula nostra, accumsan taciti.
    </p>
    </div>
    
    </body>
    </html>
    
    Open this link...

    ...in an IE browser to create and test scrollbar colouring and get the resultant code.



Tags for this Thread