How To Keep the Tab Turned "On"

[Mfho1]

Hi,

I have some horizontal navigational tabs that were generated by the following CSS:

#tabs2 {
      font: bold 11px/1.5em Verdana;
      float:left;
      width:100%;
      background:#CECBBD;
      font-size:93%;
      line-height:normal;
	  margin-top: -5px;
	  border-bottom: #186118 solid 1px;
	  }
    #tabs2 ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
      }
    #tabs2 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs2 a {
      float:left;
      background:url("tabs/tableft2.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs2 a span {
      float:left;
      display:block;
      background:url("tabs/tabright2.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      /*color:#84776B;  original */
	  color:#292018;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs2 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs2 a:hover span {
      color:#74675B;
      }
    #tabs2 a:hover {
      background-position:0% -42px;
      }*
    #tabs2 a:hover span  {
      background-position:100% -42px;
      }

Here's the list of the navigation:

<div id="tabs2"> 
<ul> 
	<li><a href="[URL unfurl="true"]http://www.msn.com"[/URL] title="Home"><span>Home</span></a></li>
	<li><a href="[URL unfurl="true"]http://www.usatoday.com"[/URL] title="About"><span>About</span></a></li> 
	<li><a href="[URL unfurl="true"]http://www.yahoo.com"[/URL] title="Services"><span>Services</span></a></li> 
	<li><a href="[URL unfurl="true"]http://www.newyorktimes.com"[/URL] title="FAQ"><span>FAQ</span></a></li> 
	<li><a href="[URL unfurl="true"]http://www.foxnews.com"[/URL] title="Pricing"><span>Pricing</span></a></li> 
	<li><a href="[URL unfurl="true"]http://www.dell.com"[/URL] title="Contact Us"><span>Contact Us</span></a></li>
	<li><a href="[URL unfurl="true"]http://www.cnn.com"[/URL] title="News"><span>News</span></a></li>
</ul> 
</div>

My navigation works great, and then hovering is great and all of that. Here's what I need to find out.

If I'm on the "Home" page, I want my Home navigator tab to remain "on". In other words I want to give it the same effect as if it was always on or being hovered over.

I've tried a few things like trying to assign an id to <li>, but no luck.

The two images I have sit on top of one another - I'm presuming to make navigation easier.

Thanks in advanced for any help you can provide.

Mfho1

 

[vacunita]

You;ll need some way to determine what page you are on, and assign a class that will set the image to the selected one.

HTML and CSS over no such method. so you will need to use some type of programming language to do it.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[ChrisHunt]

There is a way to do it, but you'll need to change the HTML on each of your pages to show which tab is the current one. The most obvious way to do so is something like this:

<div id="tabs2"> 
<ul> 
    <li [red]id="current"[/red]><a href="[URL unfurl="true"]http://www.msn.com"[/URL] title="Home"><span>Home</span></a></li>
    <li><a href="[URL unfurl="true"]http://www.usatoday.com"[/URL] title="About"><span>About</span></a></li> 
    <li><a href="[URL unfurl="true"]http://www.yahoo.com"[/URL] title="Services"><span>Services</span></a></li> 
    <li><a href="[URL unfurl="true"]http://www.newyorktimes.com"[/URL] title="FAQ"><span>FAQ</span></a></li> 
    <li><a href="[URL unfurl="true"]http://www.foxnews.com"[/URL] title="Pricing"><span>Pricing</span></a></li> 
    <li><a href="[URL unfurl="true"]http://www.dell.com"[/URL] title="Contact Us"><span>Contact Us</span></a></li>
    <li><a href="[URL unfurl="true"]http://www.cnn.com"[/URL] title="News"><span>News</span></a></li>
</ul> 
</div>

However, that means having unique HTML in every page's menu which makes it more fiddly to maintain (unless you're generating the pages dynamically via a programming language - which maybe what vacunita's driving at).

Another way is to give each tab a unique id:

<div id="tabs2"> 
<ul> 
    <li [red]id="tabHome"[/red]><a href="[URL unfurl="true"]http://www.msn.com"[/URL] title="Home"><span>Home</span></a></li>
    <li [red]id="tabAbout"[/red]><a href="[URL unfurl="true"]http://www.usatoday.com"[/URL] title="About"><span>About</span></a></li> 
  ... etc ...

Then you give the [tt]<body>[/tt] element a different id on each page. For example, on your home page you could have

<body id="pageHome">

The result of all this is to make it possible to identify the current tab in CSS, and thus to style it:

    #tabs2 a:hover,
[red]    #tabs2 #current a, /* method 1 */
    #pageHome #tabHome a, /* method 2 */
    #pageAbout #tabAbout a /* , etc... */[/red]
    {
      background-position:0% -42px;
      }*
    #tabs2 a:hover span,
[red]    #tabs2 #current a span,
    #pageHome #tabHome a span,
    #pageAbout #tabAbout a span[/red]

     {
      background-position:100% -42px;
      }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mfho1]

Hi vacunita and Chris for your responses.

Chris,

I tried out your suggestion, and decided to simply change the id=current on each page depending on which page I'm on. I like this idea.

I pared down the CSS code to the following, and it worked like a charm.

#tabs2 #current a,   
{      background-position:0% -42px;      }   

#tabs2 #current a span,    
{      background-position:100% -42px;      }

<div id="tabs2"> 
<ul>     
<li id="current"><a href="[URL unfurl="true"]http://www.msn.com"[/URL] title="Home"><span>Home</span></a></li>    
<li><a href="[URL unfurl="true"]http://www.usatoday.com"[/URL] title="About"><span>About</span></a></li>     
<li><a href="[URL unfurl="true"]http://www.yahoo.com"[/URL] title="Services"><span>Services</span></a></li>     
<li><a href="[URL unfurl="true"]http://www.newyorktimes.com"[/URL] title="FAQ"><span>FAQ</span></a></li>     
<li><a href="[URL unfurl="true"]http://www.foxnews.com"[/URL] title="Pricing"><span>Pricing</span></a></li>     
<li><a href="[URL unfurl="true"]http://www.dell.com"[/URL] title="Contact Us"><span>Contact Us</span></a></li>    
<li><a href="[URL unfurl="true"]http://www.cnn.com"[/URL] title="News"><span>News</span></a></li>
</ul> 
</div>

Thanks for all of your help. I appreciate it.

mfho1