Jump to content

Keeping items on a single line and hiding overflow


wjw

Recommended Posts

I'm trying to create scrolling tabs. That is, if the width of all the tabs is too wide for the area you can click < and > navigation buttons to scroll the tabs over. The Javascript is not a problem, but I'm having trouble with the CSS/HTML keeping everything on the same line.An rough example of how the hidden/nowrap should work is:Example pageThe nav buttons on that page don't work but when you click the "do something" link it scrolls the tabs to the left. The problem with this page is in the way the tabs are constructed. I need to more flexible with the graphics and font sizes.Starting with tabs from explodingboy.com, I've gotten this far:Example with better constructed tabsThe tabs here are created within a UL which is cleaner, but doing it this way I haven't been able to keep the tabs from wrapping onto another line. I've used "whitespace: nowrap" and "overflow: hidden" in every way I could think of and still haven't had any luck.Any help is greatly appreciated.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...