How to create advanced tabs as shown

Posted on 2009-02-15
Last Modified: 2013-12-25
I'm trying to implement tabs in html/css as shown in the attachment. Can anybody tell me the best way to accomplish this?
Question by:sweetac1
    LVL 15

    Accepted Solution

    Creating the tabs is pretty simple, here's some simple javascript for switching in between the tabs.

    The rest is just creating graphical buttons for the tabs, and setting the color of the tab content area using CSS.

    Author Closing Comment

    Thanks, I was out of town so didn't have a chance to reply. I was actually looking for an all-xhtml/css solution and I found one. Thank you for your reply, though.
    LVL 15

    Expert Comment

    If the tabs are for a commercial website, make sure that the CSS solution that you found works in IE6 as well, since IE6 has a lot of problems displaying CSS correctly, and quite a few people still use it.

    Featured Post

    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

    Join & Write a Comment

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    728 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