Jump to content

Keeping items on a single line and hiding overflow


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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...