Tutorial: Displaying several images in a horizontal row.

1. Create a div with id scroll
2. Create an unordered list inside your div, and place your images in the list.
3. Add a span with class "clr" when you've closed your unordered list.
4. Preview of your html code
   
   Note: You might have noticed I've put the first image in a link. Well, that's something you may wish to remove, it won't affect the scroll in any way. I did it just in case you wish to later add links to your images.
5. Link your stylesheet and use the styles below.

   div#scroll
   {
   	width:650px;
   	height:120px;
   	background-color:#CCCCCC;
   	overflow-x:scroll;
   	overflow-y:hidden;
   	margin:15px auto;
   }
   
   div#scroll clr // to clear floating elements in the list
   {
   	clear:both;
   	font-size:1px;
   	line-height:1px;
   }
   
   #scroll ul
   {
   	width:1500px;
   	height:100px;
   }
   #scroll ul li
   {
   	display:block;
   	float:left;
   	margin-left:5px;
   }
   #scroll ul li a img
   {
   	border:none;
   }
       

6. Explanation : I'm using a fixed-width div container to store contents of a list that's more than its width. If you do not specify the width of your unordered list, the horizontal scroll-bar won't be working, simply because your list will inherit width of its container div. Dark areas: You'll need to modify the width of your list everytime you remove or add too many of its content images. Because if you remove some images, you'll get too much of scrolling in blank space. And if you add images, only contents upto taking upto 1500px total width will be displayed, the excess contents will be hidden by the "overflow-y:hidden" we used earlier. For dynamically resizing your list of images, you should be using javascript, unfortunately, I'm not good at that. Any tips are welcome though:-)
   
   Also when we use the css overflow attribute, our css won't be validated by w3c :-( Moreover, it doesn't work on opera

Go to top