39 users online (0 members and 39 guests)  


  Results 1 to 9 of 9

Related

  1. scroll bars (and no, not colors)    Forum: Javascript Forum
    Replies: 3
  2. Scroll bars    Forum: HTML Forum
    Replies: 6
  3. Help on Scroll Bars...    Forum: CSS Forum
    Replies: 7
  4. I dont want any scroll bars    Forum: HTML Forum
    Replies: 2
  5. Scroll Bars    Forum: CSS Forum
    Replies: 11
  1. #1
    ripetungi's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    5

    No verticial scroll bars

    Hi

    I am developing a concept for a website and need a horizonal scroll bar on the page. I found some code for this within this forum but can't get it to work - there are no scroll bars appearing at all. Before I had veritial bars but not horizonal.

    Here is the code i'm using -

    <body>
    <div id="Layer1" style="position:absolute; width:500px; height:100; y-index:1; overflow-x: scroll; overflow-y: hidden; ">
    <body>

    Can anyone help

    Many thanks

  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: No verticial scroll bars

    HI there ripetungi,

    and a warm welcome to these forums.

    Have a look at this basic example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #layer1 {
        width:500px;
        height:100px;
        border:3px double #ccc;
        margin:auto;
        white-space:nowrap;
        overflow:auto;
     }
    #layer1 p {
        margin:15px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="layer1">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </p><p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </p>
    </div>
    
    </body>
    </html>
    Note:-
    The use of position:absolute is rarely needed in layouts and should be avoided.

  3. #3
    ripetungi's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    5

    Re: No verticial scroll bars

    cheers coothead, that seems to work good for me.
    I take it that I simply replace the text with images within the layer, and that all layers within the page will follow the same horizontial scroll bar if they overflow? ie if I use layers with tables.

    Also can I make the scroll customised? and how to I do that.

    thanks

  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: No verticial scroll bars

    Hi there ripetungi,

    here is an example that uses images instead of text...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <base href="http://mysite.orange.co.uk/azygous/images/">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #layer1 {
        width:500px;
        height:100px;
        border:3px double #ccc;
        margin:auto;
        overflow:auto;
     }
    #layer1 div {
        width:984px;
     }
    #layer1 img {
        float:left;
        width:70px;
        height:70px;
        margin:5px;
        border:1px solid #000;
     }
    </style>
    
    </head>
    <body>
    
    <div id="layer1">
    <div>
    <img src="anim.gif" alt="">
    <img src="anim1.gif" alt="">
    <img src="anim2.gif" alt="">
    <img src="anim3.gif" alt="">
    <img src="anim4.gif" alt="">
    <img src="anim5.gif" alt="">
    <img src="anim.gif" alt="">
    <img src="anim1.gif" alt="">
    <img src="anim2.gif" alt="">
    <img src="anim3.gif" alt="">
    <img src="anim4.gif" alt="">
    <img src="anim5.gif" alt="">
    </div>
    </div>
    
    </body>
    </html>
    Tables are for the display of tabular data, rather than layout purposes, so I do not advocate or code for them.

    Further reading:-


    Also can I make the scroll customised? and how to I do that.
    Customized scrollbars are an IE propriety feature only and will not work in other browsers.

    You can find out about them here...
    Last edited by HTML; 03-09-2012 at 11:02 AM.

  5. #5
    ripetungi's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    5

    Re: No verticial scroll bars

    many thanks for your help.

    i think i can use it

    cheers

  6. #6
    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: No verticial scroll bars

    No problem, you're welcome.

  7. #7
    ripetungi's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    5

    Re: No verticial scroll bars

    sorry cootread - i thought that would do me, but have run into a problem with the following code.

    <style type="text/css">
    #layer1 {
    width:500px;
    height:100px;
    border:3px double #ccc;
    margin:auto;
    overflow:auto;
    }
    #layer1 div {
    width:984px;
    }
    #layer1 img {
    float:left;
    width:70px;
    height:70px;
    margin:5px;
    border:1px solid #000;
    }

    I thinking I will need the images to be a little larger than 70px and changed the img size, along with the layer 1 size to -

    <style type="text/css">
    #layer1 {
    width:500px;
    height:120px;
    border:3px double #ccc;
    margin:auto;
    overflow:auto;
    }
    #layer1 div {
    width:984px;
    }
    #layer1 img {
    float:left;
    width:100px;
    height:100px;
    margin:5px;
    border:1px solid #000;
    }

    but the horizontal scroll bars reappear, why is that - i thought by simply changing the height that would not happen (note. doesn't happen when I change the width)

    can you help, and explain

    many thanks

  8. #8
    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: No verticial scroll bars

    Hi there ripetungi,

    there are a few other values that need changing to accommodate 100x100 images.

    Have a look at this amended example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <base href="http://mysite.orange.co.uk/azygous/images/">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #layer1 {
        width:500px;
        height:128px;
        padding:4px;
        border:3px double #999;
        margin:auto;
        overflow:auto;
     }
    #layer1 div {
        width:1344px;
     }
    #layer1 img {
        float:left;
        width:100px;
        height:100px;
        margin:5px;
        border:1px solid #000;
     }
    </style>
    
    </head>
    <body>
    
    <div id="layer1">
    <div>
    <img src="anim.gif" alt="">
    <img src="anim1.gif" alt="">
    <img src="anim2.gif" alt="">
    <img src="anim3.gif" alt="">
    <img src="anim4.gif" alt="">
    <img src="anim5.gif" alt="">
    <img src="anim.gif" alt="">
    <img src="anim1.gif" alt="">
    <img src="anim2.gif" alt="">
    <img src="anim3.gif" alt="">
    <img src="anim4.gif" alt="">
    <img src="anim5.gif" alt="">
    </div>
    </div>
    
    </body>
    </html>

  9. #9
    ripetungi's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    5

    Re: No verticial scroll bars

    that seems to have done it. but why do i need to change

    #layer1 div {
    width:1344px;

    and what is the ratio to the image weidth for it to work without the horzional bars



Tags for this Thread