CODEWITHSUNDEEP
c#asp.nethtml
Rajkumar
Rajkumar

Reputation: 19

How to change the color of the HyperLink in ASP.NET

i am doing mini ERP project., in that i have 3 frames. frame is used as Header where i have "Home" and "logout" image button when i click "Home" the frame3 goes to Home page and when i click "Logout" button, all the frames disappears and main window of "Login" screen comes. i have used "Home " and "Logout" button in image using Hyperlink control in ASP.NET the problem is due to Hyperlink the button gets blue border around it. i want to remove that border around the image button. can any one knows how to remove that border here my codes 

<asp:HyperLink ID="HomeButtonlink" 
    BorderWidth="0px" 
    Font-Overline = "False"
    ImageUrl="~/Images/Untitled-5.png" 
    runat="server"
    Height="100%" 
    Target ="frame3"
    NavigateUrl="~/About.aspx" 
    BorderStyle="None"></asp:HyperLink>

thanks in advances A.S.Rajkumar.Rajguru

Upvotes: 2

Views: 12387

Answers (2)

hunter
hunter

Reputation: 63522

I would create a new css class for this instead:

<asp:HyperLink ID="HomeButtonlink" CssClass="linkbutton"
    ImageUrl="~/Images/Untitled-5.png" 
    runat="server" Target="frame3" NavigateUrl="~/About.aspx"></asp:HyperLink>

and you can define your class like this:

a.linkbutton, a.linkbutton:visited, a.linkbutton img
{
    border: none;
    outline: none;
}

You gain very little by using the asp.net server control. You can do the same like this:

<a href="<%=ResolveUrl("~/about.aspx")%>" target="frame3" class="linkbutton">
    <img src="<%=ResolveUrl("~/images/untitled-5.png") %>" />
</a>

Upvotes: 8

Spudley
Spudley

Reputation: 168685

The border around images that are links is part of the default HTML stylesheet.

To get rid of it for all images, add a simple bit of CSS to your page as follows:

img {border:none;}

This is a common thing to want to do, as very few people actually want the default behaviour these days. You may want to look into adding a 'reset' stylesheet to your site to get rid of all the unwanted default behaviours. It will also make your page work more consistently between different browers.

Here's a link to a related question to help you find out more: https://stackoverflow.com/questions/116754/best-css-reset

If for some reason you don't want to affect all the image links on your site, you could also do a more specific stylesheet for it since you've given it an ID:

#HomeButtonlink {border:none;}

You could also add a CSS class to the object, and then reference that in your stylesheet if you wanted to apply it to a group of buttons.

...but frankly, I'd just go with the full reset if I were you.

Upvotes: 1

Related Questions