wjw Posted January 24, 2008 Share Posted January 24, 2008 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 More sharing options...
wjw Posted January 24, 2008 Author Share Posted January 24, 2008 I found a dirty workaround. I set the width on the ul to 10000px and set the width on "tabsJ" to 640px with overflow:hidden. That will work for now but I'd prefer something that wasn't a hack. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.