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:
div
s (those with id #extra1
, #extra2
) that is just for styling purpose. Is there a way to eliminate this extra div? <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:
Stripped down live example: http://dl.dropbox.com/u/17261360/horiz.html
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.
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.
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).
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.
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.
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>
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 li
s 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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With