problems to keep the buttons color changed once active

hi,
i am trying to make a website where the buttons should turn from white to blue on hover and when they are active to remain blue.
so here is my problem:
i did it and it works fine a s long as my hyperlink are defined as "#"
when i give the links the addresses, the buttons turn back to white when they are active.

here is the html, when it works :

<tr>
<td height="89" colspan="2"><div align="center"><img src="images/logo.jpg" width="235" height="89"></div></td>
<td><div id="container"><a href="#" class="btn">Picture Gallery</a></div></td>
<td><div id="container2"><a href="#" class="btn2">Customed Cards</a></div></td>
<td><div id="container3"><a href="#" class="btn3">Archive</a></div></td>
<td><div id="container4"><a href="#" class="btn4">Session Details</a></div></td>
<td><div id="container5"><a href="#" class="btn5">Contact</a></div></td>
<td>&nbsp;</td>
</tr>

and the css codes:

#container {
height:53px;
width:137px;
text-align:center;
margin:0,auto;
}

a.btn {
display: block;
background:url("../images/picture_gallery.jpg");
height:53px;
width:137px;
text-indent: -9999px;
}
a.btn:hover, a.btn:focus {
background:url("../images/picture_gallery_blue.jpg");
}

a.btn.active {
background:url("../images/picture_gallery_blue.jpg");
}

#container2 {
height:53px;
width:150px;
text-align:center;
margin:0,auto;
}
a.btn2 {
display: block;
background:url("../images/customed_cards.jpg");
height:53px;
width:150px;
text-indent: -9999px;
}
a.btn2:hover, a.btn2:focus {
background:url("../images/customed_cards_blue.jpg");
}

a.btn2.active {
background:url("../images/customed_cards_blue.jpg");
}

#container3 {
height:53px;
width:91px;
text-align:center;
margin:0,auto;
}
a.btn3 {
display: block;
background:url("../images/archive.jpg");
height:53px;
width:91px;
text-indent: -9999px;
}
a.btn3:hover, a.btn3:focus {
background:url("../images/archive_blue.jpg");
}

a.btn3.active {
background:url("../images/archive_blue.jpg");
}

#container4 {
height:53px;
width:151px;
text-align:center;
margin:0,auto;
}
a.btn4 {
display: block;
background:url("../images/session_details.jpg");
height:53px;
width:151px;
text-indent: -9999px;
}
a.btn4:hover, a.btn4:focus {
background:url("../images/session_details_blue.jpg");
}

a.btn4.active {
background:url("../images/session_details_blue.jpg");
}

#container5 {
height:53px;
width:102px;
text-align:center;
margin:0,auto;
}
a.btn5 {
display: block;
background:url("../images/contact.jpg");
height:53px;
width:102px;
text-indent: -9999px;
}
a.btn5:hover, a.btn5:focus {
background:url("../images/contact_blue.jpg");
}

a.btn5.active {
background:url("../images/contact_blue.jpg");
}

but when i give the hyperlinks the addresses it dose not work anymore:

<tr>
<td height="89" colspan="2"><div align="center"><img src="images/logo.jpg" width="235" height="89"></div></td>
<td><div id="container"><a href="Templates/picture_gallery.htm" class="btn">Picture Gallery</a></div></td>
<td><div id="container2"><a href="Templates/customed_cards.htm" class="btn2">Customed Cards</a></div></td>
<td><div id="container3"><a href="Templates/archive.htm" class="btn3">Archive</a></div></td>
<td><div id="container4"><a href="Templates/session_details.htm" class="btn4">Session Details</a></div></td>
<td><div id="container5"><a href="Templates/contact.htm" class="btn5">Contact</a></div></td>
<td>&nbsp;</td>
</tr>

can anyone tell me what did i do wrong and why that happened :confused:
any advice...

thanks in advance
here is the website i am working on http://kindersurf.com

I am suprised the active is working at all... the pseudo class for active is exacltly like hover

:active


you have it as .active
I could be wrong but from my understanding of active is that you actually will not really see it- by the time it processes you would have never seen it (ie the active state resolves before it is rendered in most circumstances) *but I could have the wrong understanding of :active- I have stepped pretty far from client side code as of late

thanks.

i changed it but still not working :(

For something to be active it either needs the mouse cursor hovered over it with a mouse button depressed or for it to have the keyboard focus with the enter key depressed.

As soon as the button or key is released it is no longer active and will return to the hover or focus appearance.

If you are trying to style references to the current page differently then the easiest way to do that is to add class="currnet" to that element and then apply the style to .current in the CSS. It will be confusing if you call it active as active means that a button or key is depressed.

it is actually my first website so i am new in all this stuff. I found a tutorial saying that what i want can be done that way... can you please give me an example to pull this thru how to add the class "currnet" and what should i apply to it in css.
i would really appreciate it.
thanks

what felgall is saying is in line with what I was saying (or at least confirms my thoughts) the active pseudo class

:active

is really only visible for a microsecond (in most cases)... I think what you want is :visited which will change the link you just clicked... if you are trying to do something more fancy like.... remember what link you clicked and then have that link highlighted in a nav bar for example- you will need to have js or serverside script... you cannot do that with CSS alone unless you make a new nav bar for each page....

in short though without knowing "what" it is you are trying to achieve it is very difficult to advise
Can you describe what you are trying to accomplish in more detail?

http://www.kindersurf.com/new.html# (http://kindersurf.com/new.html)
this the initial page, with out hyperlink addresses

ok, so now what are you trying to do on that page with all this "active" stuff?

i want to do a simple menu, and when you are for example on "picture gallery" i would like it to turn blue, to be different from the other, and so on with the other menu button

http://kindersurf.com when you press the menu button they turn back to white, when i want the one that i am on to be blue

You need to set a class on the one that you want to be different so that you can style that class.

With static pages just add class="current" to the one that needs to be different. If the pages are generated using a server side language then use that language to add the class to the appropriate entry.

Then add the styles you need to .current in the stylesheet.

:active has no more o do with what you want to do than :hover does since :active is the subset of hover while a mouse button is depressed and has nothing to do with which page is current.

ok- there are two ways to handle the changing of the nav bar colors-
A) javascript
B) serverside script

to handle changing the others to black while you are actively clicking a link (ie holding the mouse button down) you can use the :active pseudo class (ref (http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes) - see point 5.11.3)

what you can do is set so that when link id "demo1" is active, "demo2" is black and vise versa

<a href="#" id="demo1"> Demo One </a>
<a href="#" id="demo2"> Demo Two </a>


CSS

a {color:white;}
#demo1:active #demo2{color:black;}
#demo2:active #demo1{color:black;}