?
Solved

Display Active Tab State Using CSS

Posted on 2005-02-24
6
Medium Priority
?
757 Views
Last Modified: 2006-11-17
Hello,
I am new to the php and css world and I need a lending hand.  I have 4 pages that I want to link to and display on the same page with the same menu header, just different detail when a link is clicked. I have figured most of it out and took the easy way out by placing my tabbed menu at the top of each page.  

How can I set the second, third, and fourth tabs to be highlighted, basically looking like the tab is in an active
state. Right now the first tab is always 'white' or 'active' when I go to the second, third or fourth page.  So all I need is to be able to change the default color of the tab from green to white for the second tab for the second link and make the first tab 'green' or 'inactive' looking.  I know this has to be easy, i just don't get the whole css thing yet forgive my ignorance but I'm learning :)

Here is the code that is on the top of all of my pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- CSS Tabs is licensed under Creative Commons Attribution 2.0 - http://creativecommons.org/licenses/by/2.0/ -->

<style type="text/css">

body {
font: 50% verdana, arial, sans-serif;
background-color: #fff;
margin: 50px;
}

ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #6c6;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
border-bottom: 1px solid #fff;
background-color: #fff;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
color: #000;
}

#tabnav a {
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}

#tabnav a:hover {
background: #fff;
}

</style>
</head>
<body id="tab1">

<h1>NovaSys Health - Customer Service Dashboard</h1><BR>

<ul id="tabnav">
      <li class="tab1"><a href="csbraina.php">Member</a></li>
      <li class="tab2"><a href="group.php">Group</a></li>
      <li class="tab3"><a href="TPACensusReportsb.php">Claims</a></li>
      <li class="tab4"><a href="Docs.php">Documentation</a></li>
</ul>
<BR>
<BR>

That's It!
Thanks,
JK



0
Comment
Question by:kochsqlserv
[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
  • 3
  • 2
6 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13401576
First of all, it doesn't look like you need 4 classes. tab1 and tab2 seem to be enough.

What I would have done is to just let the first page be like this:

<ul id="tabnav">
     <li class="tab1"><a href="csbraina.php">Member</a></li>
     <li class="tab2"><a href="group.php">Group</a></li>
     <li class="tab2"><a href="TPACensusReportsb.php">Claims</a></li>
     <li class="tab2"><a href="Docs.php">Documentation</a></li>
</ul>

The second one like this

<ul id="tabnav">
     <li class="tab2"><a href="csbraina.php">Member</a></li>
     <li class="tab1"><a href="group.php">Group</a></li>
     <li class="tab2"><a href="TPACensusReportsb.php">Claims</a></li>
     <li class="tab2"><a href="Docs.php">Documentation</a></li>
</ul>

And so on, and so on.

Batalf
0
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 1000 total points
ID: 13401601
Using php, you need to mark your current tag by using a special class.

e.g.:  When the tab 2 is selected, you should end up with something like this:
<ul id="tabnav">
     <li><a href="csbraina.php">Member</a></li>
     <li class="selected"><a href="group.php">Group</a></li>
     <li><a href="TPACensusReportsb.php">Claims</a></li>
     <li><a href="Docs.php">Documentation</a></li>
</ul>

Then you can use this CSS:
ul.tabnav li {
  border-bottom: 1px solid #fff;
  background-color: #fff;
}
ul.tabnav li.secected {
  background-color: #00f;
}
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 1000 total points
ID: 13401615
Sorry batalf, cross-post.
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!

 

Author Comment

by:kochsqlserv
ID: 13403942
Thank you very much that did it.  Can you explain to me why the first class shows active so I can get a better grasp of it.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13405948
BTW, the class should have been "selected" with an "l" and the selectors should have been "ul#tabnav li" and "ul#tabnav li.selected"

What is your question exactly?  If you want general information about CSS, i you can start here:  http://www.htmlhelp.com/reference/css/
0
 

Author Comment

by:kochsqlserv
ID: 13407474
I figured it out thanks for the help! Good link also!
0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month13 days, 11 hours left to enroll

800 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