CSS problem

[sha,eera]

Hi Every one
Please help me to solve this

Iam new with CSS

in the page

<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td valign="middle" align="left" width="8%">
<div align="center">
<a class="buttons" href="viewtkts.aspx">menuitem0</a> </div>
</td>
<td valign="middle" align="left" width="8%">
<div align="center">
<a class="buttons" href="viewtkts.aspx">menu item1</a> </div>
</td>

<td valign="middle" align="left" width="8%">
<div align="center">
<a class="buttons" href="viewtkts.aspx">menu item2l</a> </div>
</td>

</tr>
</table>

In Css file


.buttons {
font-family: Tahoma, Verdana, Arial;
font-size: 8.5pt;
font-weight: bold;
color: #45606d;
text-decoration: none;
}
.buttons:hover {
font-family: Tahoma, Verdana, Arial;
font-size: 8.5pt;
font-weight: bold;
color: orange;
text-decoration: none;
}

Now I want to change the color of the item in the menu so that we can know in which page we are

i tried with
buttons:visited {
font-family: Tahoma, Verdana, Arial;
font-size: 8.5pt;
font-weight: bold;
color: orange;
text-decoration: none;
}
but it doent satisfy my requirement
please help me out
this is so urgent

[allahverdi]

buttons:visited is not solving...

[boogyman]

There are really two issues here. This first one may be a typo, however the line
buttons:visited { is missing a dot at the beginning to denote that the term buttons is a class.

The second is that this won't actually solve your problem. In order to style (make the appearance different) the page that the user is presently on, you need to assign a separate id to the current link that is being used. This can be done dynamically depending on the page, depending on the page being developed, but I am going to assume that you are creating a separate entire page for each "template" page.

First we need to create that unique identifier to let the computer know this is the page we are on, so this link needs to appear differently.


<a href="" id="current" class="buttons">LINK</a>

notice that i kept the buttons class in there still. I did this because we still want to apply the same generic look to of this anchor tag (link) as the rest of the navigation. We simply want to enhance this "current" tag because its the one we are presently on.

so now we assign this "current" link some decorative


a.buttons {
font-family: Tahoma, Verdana, Arial;
font-size: 8.5pt;
font-weight: bold;
color: #45606d;
text-decoration: none;
}

a#current {
color: #ff3300; /* orange */
}


Notice how i put the "current" link styles below the generic "button" styles? That is because the very last assignment of styles is the one that appears on the screen. Meaning that if i put the "current" style above those "button" styles the button styles would overwrite what i have for the "current" styles, and make me really frustrated in the process.

Also notice that in my "current" styles I am only changing the color. By default, all tags take the values (set of rules) from any previous assignment. Meaning that the "buttons" styles I wrote initially will tell the link how I want it to be displayed, but when the link is the current page all I want to change is the color.