how to style current tab on navbar

[ggeoff]

Hi

I want to style a horizontal navigation bar so that the current tab, in this case linking to a different webpage is selected, highlighted. I thought that Focus would work but that only works for keyboard navigation. Update: found this, but not during my intial search but in the Similar Threads panel. "You can just add an id on the specified tab and change the properties." http://www.daniweb.com/web-development/web-design/html-and-css/threads/313442/1341020#post1341020

Can someone explain this in simpler English I am using an XHTML doctype.

thanks

Geoff

[ggeoff]

Hi

I want to style a horizontal navigation bar so that the current tab, in this case linking to a different webpage is selected, highlighted. I thought that Focus would work but that only works for keyboard navigation. Update: found this, but not during my intial search but in the Similar Threads panel. "You can just add an id on the specified tab and change the properties." http://www.daniweb.com/web-development/web-design/html-and-css/threads/313442/1341020#post1341020

Can someone explain this in simpler English I am using an XHTML doctype.

thanks

Geoff

I accidently marked this post as closed by clicking on underlined text that I thought was a hyperlink! It is not closed yet. I have alterd the doctype to HTML 4.01 Strict from the XHTML as I couldn't get my Form field to work and I understand that XHTML is not supported by IE web browsers. My Frontpage webs always worked :)

[godflea]

You have to use CSS.
Just create your style with css and call the class "a.current".
Then, in your link (depending where are you located), add the "a.current" class.

Example:
CSS

a.current { color: #ffde0f; }

HTML

<a href="#">Your normal link</a> <a href="#" class="current">Your location at the moment</a>

[ggeoff]

You have to use CSS.
Just create your style with css and call the class "a.current".
Then, in your link (depending where are you located), add the "a.current" class.

Example:
CSS

a.current { color: #ffde0f; }

HTML

<a href="#">Your normal link</a> <a href="#" class="current">Your location at the moment</a>

Thanks Godflea,

I am trying to get it to work but not so far. In my external CSS file I have:

/****************************************************************/
#outerWrapper #topNavigation ul{
 
padding:1em 0;
margin: 0px auto;
list-style-type: none;
background-color: #222;
color: #FFF;

width: 100%;
font: normal 130% arial, helvetica, sans-serif;

text-align: center;
}

li { 
display: inline;
margin:0 .2em;
text-decoration: none;
}
li a
{ 
padding: 3px 10px;
background-color: #999;
color: #222;
text-decoration: none;
}
a:link
{
color:red;
background-color:#999;
text-decoration: none;
}
a:focus
{
	color:#fff;
}
a.current {
	color:aqua;
}

/*li a:hover
{
color:red;
background-color:#999;
text-decoration:none;
}*/
li a:active
{
text-decoration: none;
background-color: #999; 
color: #fff;
}

/*  ==================================================================*/

Is the a.current in the right place?

Thanks

Geoff

[teedoff]

Here is a simple common way to do this.

[ggeoff]

Here is a simple common way to do this.

Thanks teedoff,

I also found this: http://www.mstudiostalk.com/2008/03/11/pure-css-to-display-the-active-page-in-the-navigation/

It is also apparent that since I am using a php include to add my navbar code that the body id method is better.

Geoff