Home ›

ASP.NET Forums » General ASP.NET » Master Pages, Themes and Navigation Controls » Hyperlink colors conflict with menu control

Previous Next

Hyperlink colors conflict with menu control

Last post 07-18-2007 2:59 PM by mitfrog. 12 replies.

Sort Posts:

Hyperlink colors conflict with menu control

03-23-2007, 4:42 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

I would like to independently conrol the colors of the menu items and hyperlinks (via linkbuttons or hyperlink objects). However, I have only found one way to do it (I have tried various, such as CSS definitions in the masterpage, skins for the menu, to no avail).

What I do is define the menu text colors in the menu control, and put alink, link, and vlink statements in the body tag of the masterpage.

Naturally, this approach is marked as outdated, so I would like to find how to do this w/o using the alink, vlink, link in the body tag.

Again, tried skin for menu plus a:link, a:visited, a:hover and a:active definitions in the header section of the masterpage.

Tried same w/o skin.

Seems that only when used in body tag does the link definitions not override the menu definitions. Is there another way?

Thanks,

Filed under: menuu, link colors

Re: Hyperlink colors conflict with menu control

03-23-2007, 5:35 PM

Contact

Loading...
pixelsyndicate
Joined on 07-04-2003, 12:56 PM
W. MI transplant in N. TX
Posts 1,082

I had to come up with something because, like you, I was having trouble with styles overriding other styles. What I eventually settled on was creating a css class with the name of the individual controls.

/* using the #id will specifiy a class for only that element id */
#Menu1
{
    padding-right: 2px;
    background-position: left top;
    padding-left: 2px;
    background-image: url(../images/themes/layout/marquee_green_bg.gif);
    padding-bottom: 2px;
    margin: 0px;
    padding-top: 2px;
    background-repeat: repeat;
    text-decoration: none;
    text-transform: capitalize;
    color: black;
    cursor: hand;
    background-attachment: scroll;
    vertical-align: super;
    font-family: arial;
    border-top-width: 1px;
    border-left-width: 1px;
    border-left-color: black;
    border-bottom-width: 1px;
    border-bottom-color: black;
    border-top-color: black;
    border-right-width: 1px;
    border-right-color: black;
}
#Menu1 a:link
{
    color: sienna;
}
#Menu1 a:visited
{
    color: darkgreen;
}

I have yet to find anything that

"A common mistake that people make when trying to design something completely foolproof was to underestimate the ingenuity of complete fools." ~ Douglas Adams

http://pixelsyndicate.com/ps/

Filed under: CSS, menu

Re: Hyperlink colors conflict with menu control

03-25-2007, 3:08 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

You ended with "I have yet to find anything that..."

Please finish...

Re: Hyperlink colors conflict with menu control

03-29-2007, 3:30 PM

Contact

Answer

Loading...
pixelsyndicate
Joined on 07-04-2003, 12:56 PM
W. MI transplant in N. TX
Posts 1,082

mitfrog:

You ended with "I have yet to find anything that..."

Please finish...

... anything that 'will allow me to write a single class in CSS that would handle each possible control that might need the hyperlink color changes and not affect those that I dont want changed. This is why I propose the css style for a single page object.'

I noticed you still haven't marked an "answer" for this thread. If my proposed solution didn't work for you, perhaps we can look at some other possible examples. If it did work, please consider marking the "answer" post to close out this issue.'

Thanks!

"A common mistake that people make when trying to design something completely foolproof was to underestimate the ingenuity of complete fools." ~ Douglas Adams

http://pixelsyndicate.com/ps/

Re: Hyperlink colors conflict with menu control

03-29-2007, 4:12 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

NOw that I have the rest of the story, I will give it a try and see if it works...

Re: Hyperlink colors conflict with menu control

03-29-2007, 4:36 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

So far, no luck. I created this in my stylesheet:

/* try control of menu */
#menu1 a:link {color:#C3D6FEJ}
#menu1 a:visited {color:#C3D6FE}
#menu1 a:hover {color:#ffffff}
#menu1 a:active {color:#F9FE77}

I also set cssClass property of menu1 to #menu1, and then to menu1, but this code did not control the colors (I proved this by changing the a:active value to #000000 and reloaded the page).

I am confused about the # in the definition - what is that?

I am also confused about how to map link, visited, hover, and active to

menu1 ForeColor
DynamicHoverStyle ForeColor
StaticSelectedStyle ForeColor
StaticHoverStyle ForeColor
DynamicSelectedStyle ForeColor

I assume you cannot distinguish between dynamic and static? I assume selected = active? Hover is the only one that seems obvious - but again, there are two values in the menu definition - do they both map to a:hover?

What am I doing wrong?

Re: Hyperlink colors conflict with menu control

03-30-2007, 6:24 AM

Contact

Loading...
moredotnet
Joined on 11-24-2006, 12:07 PM
Millenium City
Posts 748

I came across this issue long back and here is how I solved it.

Inside the head tag of the master page (where I assume you have placed your menu control)... place this style tag...

....

style type="text/css">

a:link {color: #333399}

a:visited {color: #333399}

a:hover {color: #FF6600}

a:active {color: #0000FF}

.StaticMenuItem

{

cursor:hand;

background: url("C:\\tlorange.gif") 0 0% no-repeat;

padding:10px;

}

a:link.StaticMenuItem, a:visited.StaticMenuItem,

a:hover.StaticMenuItem,a:active.StaticMenuItem,

{

color: #000000;

}

</style>

and inside the Menu control..assign the following...

<asp:Menu id="someId" runat="server"

CssClass

="StaticMenuItem"

This way, the hyperlink property of the Menu control would behave differently from the rest of the hyperlinks in the page.

HTH

Cheers

moredotnet

(pls mark as answer if this reply helps)

Vishal Khanna

.NET Interviews & FAQs @ www.dotnetUncle.com

Click Mark as Answer if the reply helped you.

Re: Hyperlink colors conflict with menu control

03-30-2007, 5:50 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

what is tlorange.gif?

Re: Hyperlink colors conflict with menu control

03-30-2007, 5:57 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

Since I did not know what the gif file was, I did the following:

StaticMenuItem {cursor:hand}

a:link StaticMenuItem, a:visited StaticMenuItem a:hover StaticMenuItem a:active StaticMenuItem {color:green}

I put StatisMenuItem in the CssClass property for Menu1. No impact on the menu colors displayed.

What am I missing? Is there some magical property to specifying the gif file and background?

Re: Hyperlink colors conflict with menu control

04-02-2007, 1:25 AM

Contact

Answer

Loading...
moredotnet
Joined on 11-24-2006, 12:07 PM
Millenium City
Posts 748

There is no magic out here :). I think I myself missed the <staticmenuitemstyle> above. You may copy paste the code below in a new web form...and I'm sure it will work. See that the Menu Links would be black, and the rest of the Hyperlinks would be showing the alink vlink etc colors...

=============Simply Copy Paste====================================>

@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml" >

head runat="server">

<title>Moredotnet's Menu & Hyperlink colors</title>

a:link {color: #333399}

a:visited {color: #333399}

a:hover {color: #FF6600}

a:active {color: #0000FF}

.StaticMenuItem

{

cursor:hand;

padding:10px;

}

a:link.StaticMenuItem, a:visited.StaticMenuItem,

a:hover.StaticMenuItem,a:active.StaticMenuItem

{

color: #000000;

}

</style>

head>

body>

<div>

<asp:Menu ID="mn1" runat="server"

Orientation="Horizontal"

CssClass="StaticMenuItem" >

<Items>

<asp:MenuItem NavigateUrl="http://aspnetinfo.googlepages.com" Text="AspnetInfo"></asp:MenuItem>

<asp:MenuItem NavigateUrl="http://sqlconnect.googlepages.com" Text="SqlConnect"></asp:MenuItem>

</Items>

</asp:Menu>

<br />

<asp:HyperLink ID="hl1" runat="server" NavigateUrl="http://moredotnet.googlepages.com" Text="Moredotnet"></asp:HyperLink>

</div>

</form>

body>

html>

=============This should work!!!====================================>

Cheers

moredotnet

(pls mark as answer if reply helps)

Vishal Khanna

.NET Interviews & FAQs @ www.dotnetUncle.com

Click Mark as Answer if the reply helped you.

Re: Hyperlink colors conflict with menu control

04-03-2007, 12:57 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

OK, that works. BUT...

You have set staticmenuitem color. But what about dynamichoverstyle color, etc? I assume I just create a style for each of the various cases. I will try this, but assuming it works, it appears you have answered my question. Thanks!

Re: Hyperlink colors conflict with menu control

04-03-2007, 1:01 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

This works, and I assume I can specify a style for the other menubar colors, such as DynamicHoverStyle, StaticSelectedStyle, StaticHoverStyle, and DynamicSelectedStyle... and set each of the CssClass properties appropriately...

I will be trying this and if I have trouble, I will let you know.

Thanks,

Eric

Re: Hyperlink colors conflict with menu control

07-18-2007, 2:59 PM

Contact

Loading...
mitfrog
Joined on 03-22-2007, 2:57 PM
Posts 11

When I apply this to my more complex case - where it uses a site map, etc., it does NOT work. I have no idea why the simple example works, and the more elaborate one does not. Here is the code I use for the current menu that works (works in the sense that along with link color definitions in the <body> tag, this works correctly: I am trying to not use the body tag to set link colors, but as you may recall, the whole purpose of my question is to set the link colors in the stylesheet, and separately control the "links" in the menu):

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource" EnableTheming="False"
Font-Bold="True" Font-Names="Arial" Font-Size="Small" ForeColor="#C3D6FE" Height="22px"
MaximumDynamicDisplayLevels="1" Orientation="Horizontal"
StaticDisplayLevels="2" StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="0px" DynamicHorizontalOffset="5" DynamicVerticalOffset="3" ItemWrap="True">
<StaticMenuItemStyle HorizontalPadding="10px" />
<DynamicHoverStyle ForeColor="White" />
<StaticSelectedStyle ForeColor="#F9FE77" HorizontalPadding="10px" />
<DynamicMenuItemStyle BackColor="#48607D" Font-Size="Small" HorizontalPadding="5px" VerticalPadding="2px"
Width="150px" />
<StaticHoverStyle ForeColor="White" />
<DynamicSelectedStyle ForeColor="#F9FE77" />
</asp:Menu>

I started by adding in the cssClass definition but it did not change the colors of the menu - they were all the colors specified in the a: styles.. I went farther and added in font-size, font-family and font-weight definitions to the css class definition and removing the same definitions from the menu object. This also did not work. Any ideas? Sorry for the long delay - I was very busy on other items...

Page 1 of 1 (13 items)