how to keep a link coloured when you are on that page

hey guys check out my website Canadian Business, im trying to get the top navigation, where it says "Home", "About" and "Archive", to have the page that is being visited = colored (red), not just when it is being hovered (as it is now). right now i have the following in my stylesheet.css:

#menu a:hover {
background-color: #D3230B;
color: #FFFFFF;

i want to get the active link's background colored to #D3230B as well.. don't know how to do it, please help.. hope i made myself clear.. thanks in advance

 

This can be achieved with 2 methods subject to how your site works.

If the site isnt templated then you can simply apply a style to the revelant link and keep everything static.

if your site is templated then you can only do this with some form of scripting, either client side with Javascript or serverside with .Net/ PHP/ JSP etc

 

Well, first off you need to understand how styling works - when you declare just a, it also styles all psuedoclasses active, :visited, :hover, :focus, :link)... since styles override by source order, just put the desired effect after the current one.

As such, your top anchor declaration has a unneccesary style visited), and your #menu declaration has a unneccessary override applied (the second color declaration)

I would also HIGHLY suggest adding :active and :focus states to have the red background...

As to making the 'current' page have a highlight, the easiest way would be to add to the current page's anchor 'class="current"' and then style that class.

CSS:

#menu a {
  padding: 5px 15px;
  text-decoration: none;
  color: #FFF;
}

#menu a:active,
#menu a:focus,
#menu a:hover,
#menu .current a {
  background-color: #D3230B;
}

Code (markup):

HTML:

<div id="menu">
  <ul>
    <li class="page_item current"><a href="http://www.canadian-business.info">Home</a></li>
    <li class="page_item"><a href="http://www.canadian-business.info/about/" title="About">About</a></li>
    <li class="page_item"><a href="http://www.canadian-business.info/archives/" title="Archives">Archives</a></li>
  </ul>
</div>

Code (markup):

of course, looking at the CSS I'm trying to figure out why you have that extra DIV since you could just apply that straight to the UL from the looks of things... Lemme guess, somebody told you that certain stylings could only be applied to DIV's, right? (I figure out who's preaching that there's gonna be a manhunt)

Though I'm not entirely certain how much control turdpress gives you over that.

 

hey thanks alot deathshadow, it really helped. but i cant seem to figure out how to add "to the current page's anchor 'class="current"' and then style that class.", im new to css, sorry. but from what it seems, a huge drawback to this method is that an addition of a page to the site will all need to be done manually eh?