Trouble with Sliding door Tab Navagation

[milo3169]

Hello,

I am trying to create a Tabbed Navigation using the sliding door technique with pictures. What I want to do is when the tab is active has a different color other than the others. I am able to get it working with one color, but when I try to use the second color (picture) I can't get it to work. Only the left tab picture works, but the right side tab is not showing up. I can't seem to figure out how to call the UL in the list when it is active. Can someone help?

<style type="text/css">

	ul{
	  margin: 0;
	  padding: 0;
	  list-style: none;
	  width: 720px;
	  float: left;
	}

	ul li {
	  float: left;
	  background: url(righttab_tan.gif) no-repeat top right;
	  margin-right: 0;
	}


	li a{
	  display: block;
	  padding: 0 1em;
	  line-height: 2.5em;
	  background: url(lefttab_tan.gif) no-repeat top left;
	  color: #333333;
	  float: left;
	  font-family: tahoma;
	  font-size: 10pt;
	  font-weight: normal;
	  border-bottom: 1px solid #CC0000;
	}

	ul a:active{
	  float: left;
	  background: url(righttab_grn.gif) no-repeat top right;
	  margin-right: 0;
	}

	li a:active{
	  display: block;
	  padding: 0 1em;
	  line-height: 2.5em;
	  background: url(lefttab_grn.gif) no-repeat top left;
	  color: #333333;
	  float: left;
	  font-family: tahoma;
	  font-size: 10pt;
	  font-weight: normal;
	  border-bottom: 1px solid #CC0000;
	}

	ul a:hover{
	  color: #CC0000;
	}
</style>

HTML Code

	<ul>
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
	<li><a href="#">Tab4</a></li>
	<li><a href="#">Tab 5</a></li>
	<li><a href="#">Tab 6</a></li>
	</ul>

Thank You in advance

 

[ChrisHunt]

You've got two problems.

One is that [tt]:active[/tt] doesn't mean what I bet you think it means. It doesn't mean a link pointing to the currently active page (how useful that would be!), it means a link that the user is currently clicking on. So if your "active" code is intended to highlight the current tab, it isn't going to work.

The other is that you're applying two bits of CSS to the same element:

    ul a:active{
      ...
      background: url(righttab_grn.gif) no-repeat top right;
      ...
    }

    li a:active{
      ...
      background: url(lefttab_grn.gif) no-repeat top left;
      ...
   }

Both those rules apply to the same <a> element, so the background (and other properties) you set in the first is overwritten by the second. If you look, the "normal" tab properties are allocated to the <li> and the <a>.

What you need to do is assign a class to the current tab, then you can do this:

    ul li.current{
      background: url(righttab_grn.gif) no-repeat top right;
    }

    li.current a{
      background: url(lefttab_grn.gif) no-repeat top left;
   }

Note that I've only specified the background properties there. The font and the margins and so forth will be carried over from the normal rules, there's no need to specify them all again.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[milo3169]

That was it! Thanks Chris. Also thanks for the pointers. That was a lot of help.