Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Tabs in html

Posted on 2003-11-05
6
Medium Priority
?
3,352 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 100 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 400 total points
ID: 9692487
0
Independent Software Vendors: 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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

719 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