Solved

Tabs in html

Posted on 2003-11-05
6
3,310 Views
Last Modified: 2010-08-05

I would like to build an html page that has tabs. In order to be very clear what I mean by tabs, I mean the GUI analog of the labeled tabs used with paper files. When you click on that tab, you "go" to that page but the tabs are still visible. It is a fairly common web control, examples which can be seen on the www.experts-exchange.com homepage (Home,Career,Storage,...) are shaped more like buttons than tabs. But the functionality is the same.

My colleague has written a few pages with tabs a while back, and created the tab image with rounded corner gifs and everything. The code works but is ugly, and I would like to know if this community has an elegant way to draw them.

Thanks,

Rich
0
Comment
Question by:RichardFox
6 Comments
 
LVL 11

Assisted Solution

by:Zontar
Zontar earned 25 total points
ID: 9691479
CSS 3 will include a way to round the corners of things, but until the browser vendors implement that (a couple of years, at least, seeing that CSS 3 hasn't even yet been formally adopted), you're pretty much stuck with using images. Sorry.

There is a way you can do this in Mozilla (and maybe Netscape 6+), but that's the only browser that supports anything like this at the moment, and this syntax is guaranteed to change eventually. Read about it here: http://www.blooberry.com/indexdot/css/properties/extensions/nsextensions.htm

0
 
LVL 1

Expert Comment

by:Compmouse
ID: 9691511
Zontar is right, however, in some cases if you're lucky enough to have all the tabs being the same size, you could get away with creating a graphic of a full tab and use it as a background to a bunch of (border-less) table cells, and use css to keep the background image from being repeated.
0
 
LVL 17

Accepted Solution

by:
dorward earned 100 total points
ID: 9692487
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 11

Expert Comment

by:Zontar
ID: 9692677
Nice stuff -- thanks for the links.
0
 

Expert Comment

by:JimmySolo
ID: 9698737
Zontar,

The best menu navigation system I've come across is by Thomas Brattli.

Check out http://www.dhtmlcentral.com/projects/coolmenus/

Regards,

Jimmy
0
 

Author Comment

by:RichardFox
ID: 9722630
Thanks for the great links and information. Just what the doctor ordered.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now