PDA

View Full Version : How can I highlight The Current asp:HyperLink link in my web site.



asifakhtar
Mar 1st, 2010, 06:34 PM
I am using MasterPages in my web site and I have the above asp:HyperLink links on my MasterPages.

How can I highlight The Current asp:HyperLink link in my web site.


<table cellspacing="10">

<tr>

<td><asp:HyperLink ID="hlUser" runat="server" NavigateUrl="~/Admin/Users.aspx">Users</asp:HyperLink></td>

<td><asp:HyperLink ID="hyPriority" runat="server" NavigateUrl="~/Admin/Priorities.aspx">Priorities</asp:HyperLink></td>

<td><asp:HyperLink ID="hyStatus" runat="server" NavigateUrl="~/Admin/Status.aspx">Status</asp:HyperLink></td>

<td><asp:HyperLink ID="HyperLink13" runat="server" NavigateUrl="~/Admin/Property.aspx">Properties</asp:HyperLink></td>

<td><asp:HyperLink ID="hyRole" runat="server" NavigateUrl="~/Admin/Roles.aspx">Roles</asp:HyperLink></td>

<td><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Admin/AdminTickets.aspx">Issues</asp:HyperLink></td>

</tr>

</table>


Thanks

SSCR9
Mar 2nd, 2010, 07:38 AM
That depends. I could easily drop some code if I knew what you wanted. Do you want the link to highlight on mouse-over or something? Or just when you click on it? Or do you want it to show which one is active? Like on a navigation menu. Please be more specific.

abduraooft
Mar 2nd, 2010, 09:06 AM
You could do it with CSS. Take a look at http://www.codingforums.com/showpost.php?p=605564&postcount=3

asifakhtar
Mar 2nd, 2010, 03:31 PM
That depends. I could easily drop some code if I knew what you wanted. Do you want the link to highlight on mouse-over or something? Or just when you click on it? Or do you want it to show which one is active? Like on a navigation menu. Please be more specific.

Thank you very much for your reply. When a user clicks it should be highlighted just to let the user know that this where the user is right now.

I did something like this in my css but it is not highlighting it:

A:link
{
color: white;
font-weight: bold;
text-decoration: none;
}

A:visited
{
color: white;
font-weight: bold;
text-decoration: none;
}

A:active
{
color: white;
font-weight: bold;
text-decoration: underline;
}

A:hover
{
font-weight: bold;
color: #ffff33;
text-decoration: underline;
}


Please see attached sample.

abduraooft
Mar 2nd, 2010, 03:40 PM
I did something like this in my css but it is not highlighting it:The effect of :active pseudo won't be there on the element after a page refresh/reload.

asifakhtar
Mar 2nd, 2010, 05:52 PM
The effect of :active pseudo won't be there on the element after a page refresh/reload.

So how can I fix it?

Excavator
Mar 2nd, 2010, 06:36 PM
Hello asifakhtar,
ab has already shown you a very good method for indicating which page your on. Here's another demo of that - http://nopeople.com/CSS/h_ul_menu-with_images/index.html
You're halfway there since your links already have id's.

You could try adding a:focus on your links. That would keep whatever styling, the same as your hover?, until the mouse was clicked somewhere else.

When ordering your anchor styling it should always go Link/Visited/Hover/Active. A good way to remember that is LoVeHA.