Quick Question on CSS formating a Link - need help pls :)

Hi all - thank you for reading this post.

On my site finicity.com you will see four links on the left.
My boss wants it so that if you are on a page the link is highlighted orange so you know you are on that page.

So for example, if you click on the products link - you goto the products page and on the left nav the products link will be highlighted in orange while the others remain grey.

I cant find any CSS rule that does that -- is it a java script function that can do this? If there is a CSS/html code for this please advise.

Thank you all!

 

You need to give the highlighted one a class. On each html page, whichever one you want highlighted has to have that class. Then set the highlights with css.

Examplt (didn't look at your site sorry; this rule goes for everyone)
On Home page:

<ul>
<li class="current"><a href="blah">Home</a></li>
<li><a href="blah">About</a></li>
<li><a href="blah">Contact</a></li>
</ul>

Code (markup):

For the About page:

<ul>
<li><a href="blah">Home</a></li>
<li class="current"><a href="blah">About</a></li>
<li><a href="blah">Contact</a></li>
</ul>

Code (markup):

For the Contact page:

<ul>
<li><a href="blah">Home</a></li>
<li><a href="blah">About</a></li>
<li class="current"><a href="blah">Contact</a></li>
</ul>

Code (markup):

Then in CSS,
li.current {
whatever hilite stuffs
}

tada, except if you're using a template instead of hard-coding each page. Then I dunno, cause I dunno php etc.

 

let me give that a try - thank you!!

 

actually what do you mean by
Then in CSS,
li.current {
whatever hilite stuffs
}

what did you mean by "whatevre highlights stuff?

thanks

 

and can I do this without using a list? i.e. no LI?

 

Oh sorry, I thought you knew CSS. That line meant "put your css code here" : )

Whatever CSS code you are using on your site to make a selection highlighted (probably the same code used for the :hover part of your css) is probably what you want for li.current. I generally just say stuff in the code section because if I put real code and someone wants a different colour or something... I was getting across an idea.

If your navigation is a list (which it generally should be), then yes, keep it. It wouldn't get any easier to take your menu out of a list.

Hope this helps.

*Edit ooooooooooooooh you mean you're using a table.

In that case, I assume you're doing the highlighting with the a instead. Okay, then take my code and add the classes (in the HTML) to the a (<a href="blah" class="current">Blah</a>)
instead.
Then CSS is
a.current {
highlighting code
}

 

Thank you so much for your suggestions -- struggling with getting it to work but here is what i have with my current code (if i can i would like to avoid the lists) - i know some CSS but not an expert

:visited {
color: #666666;

}

a:active {
color: #FAA61A;

}

a:hover {
color: #FAA61A;

}

a {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 14px;
font-weight: bold;
text-decoration: none;

}

my html link
<img src="file:///C|/Documents and Settings/rnelson/Desktop/Projects/Finicity/HTML/files/graphics/orangesquare.gif" width="12" height="12" />&nbsp; <span class="navtext"><a href="http://www.finicity.com">About Finicity<br />

any suggestions ?

 

CSS - 2 options if you do just 'a' it will do it for all


a.nav {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

a.nav:active {color: #FAA61A;}
a.nav:hover {color: #FAA61A;}
a.nav:visited {color:#666666;}

Or you can do it the way you have with just the A, but this will format all links with same. The way I wrote it will format just those with name tag = "nav"

With the way I wrote above do your href this way:
<img src="file:///C|/Documents and Settings/rnelson/Desktop/Projects/Finicity/HTML/files/graphics/orangesquare.gif" width="12" height="12" />&nbsp; <a class="nav" href="http://www.finicity.com">About Finicity</a>

Side Note: You will need to change your image source as it's pointing to a file on your hard drive. And if my coding is a little off sorry tried to write this up quickly.

 

Well, the code there with "nav" seems to be his default. For whichever one is currently highlighted, that one will not have the same link, visited, hover, active properties as the rest.

What RiderC means though is maybe you only want to style your navigation links and not any other links, which is a good idea. But instead of giving them a class, I'd normally have them sitting in a <ul> (or any other element) and say
#nameofelement a {
blah
}

But with tables,I dunno how you do that.

a.current:link, a.current:visited {
color:#whatever highlight colour you want;
background-color: #some awesome colour behind the link words for the highlight;
}
a.current:hover, a.current:active {
color:#whatever hover and clicking colours you want for the highlighted one;
}