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 5 of 5
  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts

    Add spacing to li img scroller with css

    Hi guys having a bit of a problem adding some white space between these images (see attached picture), I would like a few pixels in between each image, the HTML for the scrolling images is as follows:
    Code:
    <div class="images">
    <br />	
    		<ul id="scroller">
    			<li><img class="scrollimg" src="img0.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img1.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img2.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img3.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img4.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img5.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img6.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img7.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img8.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img9.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img10.jpg" alt="" />&nbsp;&nbsp;</li>
    			<li><img class="scrollimg" src="img11.jpg" alt="" />&nbsp;&nbsp;</li>
    		</ul>
    </div>
    And the CSS:

    Code:
    img.scrollimg{
    
    display:inline;
    height:150px;
    width:120px;
    }
    
    .simply-scroll-container { 
    	position: relative;
    }
    
    /* Clip DIV - automatically generated */
    .simply-scroll-clip { 
    	position: relative;
    	overflow: hidden;
    }
    
    /* UL/OL/DIV - the element that simplyScroll is inited on
    Class name automatically added to element */
    .simply-scroll-list { 
    	overflow: hidden;
    	list-style: none;
    }
    	
    .simply-scroll-list li {
    
    	list-style: none;
    }
    	
    .simply-scroll-list li img {
    
    	border: none;
    	display: block;
    }
    
    /* Custom class modifications - adds to / overrides above
    
    .simply-scroll is default base class */
    
    /* Container DIV */
    #changeIMG{
    width:400px;
    height:250px;
    background-color:red;
    float:right;
    top:2000px;
    }
    
    .simply-scroll { 
    	width: 100%;
    	height: 120px;
    	
    }
    
    /* Clip DIV */
    .simply-scroll .simply-scroll-clip {
    	width: 100%;
    	height: 120px;
    
    }
    	
    /* Explicitly set height/width of each list item */	
    .simply-scroll .simply-scroll-list li {
    	float: left; /* Horizontal scroll only */
    	width: 80px;
    	height: 120px;
    	
    }
    Please note the
    Code:
    &nbsp;
    were added as a way of getting the space and have been removed.

    Any ideas would be appreciated, I have tried padding, margin and margin-bottom with no success to all class' and ids.
    Thanks in advance.
    Rafiki

  • #2
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Add spacing to li img scroller with css-nopadding.jpgSorry here is the image.

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    anybody?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,450
    Thanks
    23
    Thanked 631 Times in 630 Posts
    Nothing in your supplied css causes the images to be horizontal and only one rule applies to them.
    FYI, '/>' is an end tag and </li> is an end tag. Use only one and </li> is the correct one so it should be
    <li><img class="scrollimg" src="img0.jpg" alt=""></li>
    The following css gives padding, horizontal layout, and removes the list bullet.
    <style type="text/css">
    img.scrollimg{
    height:150px;
    width:120px;
    padding-right: 30px;
    }
    li{
    display: inline;
    }
    ul{
    list-style: none;
    }
    </style>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    The images were all fine, horizontal, in place and scrolling, I just wanted to add a couple of pixels between them, which I figured out in the end.


  •  

    Posting Permissions

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