CSS Menu Question

[Cheng]

Hi Everybody.

I have a question about links in a CSS menu.
I thought that when I change the font color for active link, then the active link color is that after clicked on that link the new page opens and then the link that just was clicked shows a different color as it is active in this moment.
But thats not the case.
It just shows the active link color for a brief moment like on mousedown.
Is there a way that the link that was clicked after the new page is there that this link shows a different color?
Sorry but I don' know how to explain it better than this, because of my limited english.

Thanks in advance.

[BLiZZaRD]

a:visited is what you need.

you can set up your CSS like:



a:, a:visited{ color:#FF0000}


For example, and the active state (when being pressed), and the visited state (after being pressed) will be red.

[Cheng]

Hi BLIZZaRD.

Thanks a lot for the reply.
I think that's it what I'm looking for and will apply it right now.

Thanks again very much.

[Cheng]

Hi BLiZZaRD.

One more thing.
Now it is working but when I click another link then I have two links with this color and so on.
Is it possible that just the link that was last clicked shows in a different color and not all of them that has been clicked before that?
Below the CSS for the menu I'm using.

Thanks again.
Cheng

CSS:
#menu {

}
#menu ul {
list-style-type: none;
padding: 0;
margin-left: 0;
}
#menu li {
color : #000066;
background-color: #000000;
background-repeat: no-repeat;
background-position: left center;
}
#menu li a {
color : #FFCC00;
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
text-align : left;
width : 130px;
height : 30px;
text-indent : 40px;
display : block;
line-height: 30px;
background-color: #000000;
background-image: url(../Images/Buttons/1.png);
background-repeat: no-repeat;
background-position: left center;
font-weight: bold;
}
#menu li a:hover {
color : #FFFF00;
font-size : 11px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-align: left;
display: block;
background-color: #000000;
text-indent: 40px;
font-weight: bold;
background-image: url(../Images/Buttons/3.png);
line-height: 30px;
}
#menu li a:active {
color: #00FFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
background-color: #000000;
}
#menu li a:visited {
color: #FF0099;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
background-color: #000000;
}

[BLiZZaRD]

Not that way, no. At least not that I know of. That is the design of the "visited" color/image change... if the visitor has visited that link they get a visual representation of it. It is stored in cache, or cookies, or however else.

There may be a script work around for that, but I don't know.

[Cheng]

.......alright thanks.
I will try to get a workaround javascript if possible.
Thanks again.......

[BLiZZaRD]

I am researching some indepth CSS stuff currently, if I come accross an CSS option I will post here for you.

[dog]

Hi Cheng,

I can suggest a work around but I'm not sure it's what you're looking for.

Why don't you give the link a new class on the page that it links to?

For example, if you have a menu like this:



<ul id="menu">
<li><a href="page1.html">Page 1</a>
<li><a href="page2.html">Page 2</a>
<li><a href="page3.html">Page 3</a>
</ul>


On Page 1 you could give the link to Page 1 a class, let's say, 'selected'.


<ul id="menu">
<li><a href="page1.html" class="selected">Page 1</a>
<li><a href="page2.html">Page 2</a>
<li><a href="page3.html">Page 3</a>
</ul>


And then on Page 2...


<ul id="menu">
<li><a href="page1.html">Page 1</a>
<li><a href="page2.html" class="selected">Page 2</a>
<li><a href="page3.html">Page 3</a>
</ul>


The colour of the selected link could then be defined in the CSS like this:



#menu a.selected {
color: red;
}


I hope this helps.

dog