37 users online (2 members and 35 guests)  


  Results 1 to 7 of 7

Related

  1. scroller seed does't get slower    Forum: Javascript Forum
    Replies: 0
  2. news scroller direction    Forum: HTML Forum
    Replies: 0
  3. scroller table in CSS- if possible    Forum: HTML Forum
    Replies: 8
  4. SCROLLER TABLE help!    Forum: CSS Forum
    Replies: 2
  5. Scroller bar, in a section of a table    Forum: HTML Forum
    Replies: 15
  1. #1
    JadeWolf's Avatar
    New User

    Status
    Offline
    Join Date
    May 2008
    Posts
    3

    Horizontal Scroller

    Excuse me, I need help with a scroll I am using. I want only horizontal and nothing else. I was already reffered a similar thread and I have tried all codes. Including the white-space:nowrap; and so on. It only stretches my page's scroll bar. Any help would be appreciated, thanks.

  2. #2
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: Horizontal Scroller

    Post your code, or a link to the web page in question.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  3. #3
    JadeWolf's Avatar
    New User

    Status
    Offline
    Join Date
    May 2008
    Posts
    3

    Re: Horizontal Scroller

    <div style="overflow-x: scroll; overflow-y: hidden;">
    That is what I used. I can't post links, it won't let me.

    It's okay if you can't get anything. I'd prefer to have a suggestion by the end of the night, but it's okay. I may use a vertical, which is the only that seems to work.
    Last edited by JadeWolf; 05-23-2008 at 07:54 PM.

  4. #4
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: Horizontal Scroller

    What you need is something similar to this:

    Code:
    .codebox-auto {
    	white-space: pre;
    	/* below is the magic code to have scrollbars */
    	width: 65%;
    	height: auto;
    }
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  5. #5
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Horizontal Scroller

    white-space: pre; will work.
    ...but your code also works, apparently, you just missed to have a width attribute
    Code:
    <div style="overflow-x: scroll; overflow-y: hidden;width:100px;">

  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: Horizontal Scroller

    Hi there JadeWolf,

    have a look at this example, it may meet your requirements...
    • http://mysite.orange.co.uk/azygous/hor_scroll_box.html

    ...and this is the code...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>horizontally scrolling box</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    body {
        background-color:#303;
     }
    #wrapper {    
        width:852px;
        height:202px;
        margin:100px auto 0;
        background-image:url(images/eyes.gif);
     }
    #container {
        width:850px;
        height:200px;
        border:1px solid #fcf;
        overflow:auto;
     }
    #content {
        width:2000px;
        height:184px;
        filter:alpha(opacity=50);
        -moz-opacity: 0.5; 
        -khtml-opacity: 0.5;  
        opacity:0.5;
        background-color:#fcf;
        color:#303
     }
    #content p {
        margin:0;
        padding:10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="container">
    
    <div id="content">
    <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>
    </div>
    
    </div>
    
    </div>
    
    </body>
    </html>
    
    
    
    Last edited by HTML; 03-09-2012 at 10:28 AM.

  7. #7
    JadeWolf's Avatar
    New User

    Status
    Offline
    Join Date
    May 2008
    Posts
    3

    Re: Horizontal Scroller

    Quote Originally Posted by rangana View Post
    white-space: pre; will work.
    ...but your code also works, apparently, you just missed to have a width attribute
    Code:
    <div style="overflow-x: scroll; overflow-y: hidden;width:100px;">
    Thanks, I believe that might work. If I increase the width, I hope the images won't stack.

    EDIT: Wait, sorry. It only increases the width of the entire table. Let me try something else, with that code. JAS



Tags for this Thread