By desm0n on

Ok tabs (the navigation you see at the top of the drupal.org page). Has anyone ever managed to get a fully on state tab navigation system running in drupal ?

by on state i mean that the tab of the page you are currently browsing has a different theme to the others, showing the user where they are on site.

I've got tabs working perfectly well but for some strange reason i can't seem to get on state tabs to work.

I've got two css classes. One is for the actual tabs (and works perfectly) and the other for the on state of the currently active tab.

I've tried both solutions in the handbook and they simply refuse to work

http://drupal.org/node/46020

Anyone any ideas ?

⋅ Categories: Drupal 4.7.x

Comments

zirafa’s picture

zirafa commented

class="active" is applied to active or on state tabs.

desm0n’s picture

desm0n commented

Yes i saw that but no matter what i do i couldn't change the state of the tabs.

The theme works like this :-

<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>

The navlist state is the tabs and i can get them working with that. But the active tab has me baffled

CSS to go with it is

#navlist
{
  margin-top:1px;
  margin-bottom:0px;
  text-align:center;
  padding: 5px 0;
  margin-left: 0;
  border-bottom: 1px solid #0F3974;
  font: bold 14px Verdana, sans-serif;
}

#navlist li
{
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a
{
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x;
  text-decoration: none;
}

#navlist li a:link { color: #F1F6FE; }
#navlist li a:visited { color: #F1F6FE; }

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li a#current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

So i tried changing the id="current" to id="active" both hardcoded and in template.php using a combination of code to no avail.

This is likely lack of CSS knowledge on my part so any help is appreciated.