Solved

Tabs in html

Posted on 2003-11-05
6
3,349 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

622 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