Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horizontally scrolling list of images

Tags:

I'm trying to create a horizontally scrolling list. I'm going to replace this with a fancy version when Javascript is enabled, but I want the markup and css to look and work fine without Javascript on reasonably modern browsers (any suggestions that uses Javascript in any way is off).

My current markup/css works, but here's what I don't like about it:

  • The current markup specify a very wide ul (i.e. 10000px) and a container that scrolls on this. Is there a way to avoid this and instead have the width expands based on its content (i.e. the blue background shouldn't be there)?
  • There are two extraneous divs (those with id #extra1, #extra2) that is just for styling purpose. Is there a way to eliminate this extra div?
  • If there is not enough image to fill the page width, the scrollbar should collapse, but currently it does not because I have a very wide ul which cannot collapse.
  • The <a> tag are separated by the horizontal list, I preferably want to keep them together. Is there a way to have them close together and cleanly separate them in CSS?

Aside, do you know of any tutorials that discussed this sort of thing? I've seen several tutorials that demonstrated having the whole page to scroll, and I took some ideas from those, but I can't find any that demonstrated scrolling ul/ol element.

Extra info that might help:

  • The width of the page is static (i.e. it is not fluid/elastic layout).
  • The images in the page is dynamically generated from PHP, and the number of images can change.
  • The width of the thumbnails are well-defined.

Stripped down live example: http://dl.dropbox.com/u/17261360/horiz.html

like image 449
Lie Ryan Avatar asked Mar 05 '11 19:03

Lie Ryan


People also ask

How do I make a horizontal scrollable menu?

Approach: Scrollable Horizontal Menu is used to scroll the horizontal navbar using CSS “overflow:auto” and “white-space: nowrap”. These two attributes are used to scroll the horizontal menu. You have to add HTML. You have to add CSS to the code.

How do I create a horizontal scrolling container?

For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.

How do I make a horizontal scrolling image in HTML?

The scrolling images were acheived using the HTML <marquee> tag. Using this tag, you can give your images a horizontal scroll (from right to left, left to right) or a vertical scroll (top to bottom, or bottom to top). Note that the <marquee> tag isn't an offical HTML tag (but it is recognized by most modern browsers).

How do I make text scroll horizontally in HTML?

The HTML <marquee> tag defines a scrolling text area in the HTML document that moves across the page in a horizontal or vertical direction. By default, text found within the <marquee> tag will scroll from right to left.


1 Answers

Update (2018): The original solution based on display: inline is over 7 years old now. In today's world, I would recommend the flexbox approach, because it gives you full control over the gaps that appear between the images.


Using flexbox

Check browser compatibility first (you're probably fine), and add prefixes as needed.

ul.images {    margin: 0;    padding: 0;    display: flex;    flex-direction: row;    width: 900px;    overflow-x: auto;  }    ul.images li {    flex: 0 0 auto;    width: 150px;    height: 150px;  }
<ul class="images">    <!-- Inline styles added for demonstration purposes only. -->    <li style="background-color: #dff">...</li>    <li style="background-color: #fdf">...</li>    <li style="background-color: #ffd">...</li>  </ul>

Using display: inline

This works for me, tested in Firefox 4 beta 10, would be advisable to test it in IE as well:

ul.images {    margin: 0;    padding: 0;    white-space: nowrap;    width: 900px;    overflow-x: auto;  }    ul.images li {    display: inline;  }
<ul class="images">    <!-- Inline styles added for demonstration purposes only. -->    <li style="background-color: #dff">...</li>    <li style="background-color: #fdf">...</li>    <li style="background-color: #ffd">...</li>  </ul>

The trick in the CSS is to set the lis to display: inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done. You cannot specify a size on inline elements, but they will be stretched to fit the img elements inside them. The scrolling is then simply overflow-x: auto on the parent ul element.

Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.


Using display: inline-block

Similar to the previous approach, but allowing us to set a size on each individual image block:

ul.images {    margin: 0;    padding: 0;    white-space: nowrap;    width: 900px;    overflow-x: auto;  }    ul.images li {    display: inline-block;    width: 150px;    height: 150px;  }
<ul class="images">    <!-- Inline styles added for demonstration purposes only. -->    <li style="background-color: #dff">...</li>    <li style="background-color: #fdf">...</li>    <li style="background-color: #ffd">...</li>  </ul>
like image 141
Thomas Avatar answered Sep 21 '22 18:09

Thomas