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 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    33
    Thanks
    1
    Thanked 1 Time in 1 Post

    Forcing Content On One Line

    Take a look at the JSFiddle as to why the content is going onto the next line.
    http://jsfiddle.net/Scdmn/

    Basically I want to keep the content on 1 line and use a scroll bar to scroll left and right.

    Thanks in advance

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,704
    Thanks
    0
    Thanked 234 Times in 229 Posts
    Hi there abell12,

    does this help...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <link rel="stylesheet"  href="/">
    
    <style>
    body {
        background-color:rgb(241,241,241);
     }
    #profileOtherVideos {
        height:200px;   /* img height plus li line-height plus 20px for scrollbar */
        padding:10px 0 0 10px;
        border:1px solid rgb(203,203,203);
        margin:0 20px;
        overflow:auto;
        background-color:rgb(255,255,255);
        box-shadow:10px 10px 10px rgba(0,0,0,0.6);
     }
    #profileOtherVideos ul {
        width:1260px;  /* (img width plus li padding) multiplied by number of images */
        padding:0;
        margin:0;
        list-style-type:none;
     }
    #profileOtherVideos li {
        float:left;
        line-height:30px;
        padding-right:10px;
        text-align:center;
     }
    #profileOtherVideos img {
        display:block;
        width:200px;
        height:150px;
        box-shadow:5px 5px 5px rgba(0,0,0,0.4);
     }
    </style>
    
    </head>
    <body>
    
    <div id="profileOtherVideos">
    <ul>
     <li><img src="http://img.youtube.com/vi/afdgfad/mqdefault.jpg" alt="">Video Name</li>
     <li><img src="http://img.youtube.com/vi/afdgfad/mqdefault.jpg" alt="">Video Name</li>
     <li><img src="http://img.youtube.com/vi/afdgfad/mqdefault.jpg" alt="">Video Name</li>
     <li><img src="http://img.youtube.com/vi/afdgfad/mqdefault.jpg" alt="">Video Name</li>
     <li><img src="http://img.youtube.com/vi/afdgfad/mqdefault.jpg" alt="">Video Name</li>
     <li><img src="http://img.youtube.com/vi/afdgfad/mqdefault.jpg" alt="">Video Name</li>
    </ul>
    </div>
    
    </body>
    </html>
    coothead


  •  

    Posting Permissions

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