The css class appears to be applied to the text within the item and the item itself separately (i.e. my item and the text both have the image as the background). Is there any way to prevent this behaviour??
The css class appears to be applied to the text within the item and the item itself separately (i.e. my item and the text both have the image as the background). Is there any way to prevent this behaviour??
i have same problem , StaticMenuItem style is applied to both TD and text in TD.
Sorry my previous post was directed towards mfarshadmehr.
While the CSS control adapter toolkit may work, there are many alternatives that may be better or even simpler - touting it as "The best solution" is highly subjective.
I agree. That is a bit subjective. My reasoning is as follows: This solution is easy to implement (all the hard work has been done for you), it renders less HTML, the HTML is easier to read, it adheres to w3c standards, provides much more flexibility and control
over the output to the browser, is easier to style, provides more control over the styling and maintains hover styles trough dynamic menus.
Due to the way the HTML is rendered and the styling is applied by the standard menu control, any other solution to the specific issue detailed above would involve altering that rendered HTML. If you are going to do this yourself you may as well use the css
control toolkit as that is really all it does (and very well).
P.S. HTH stands for "Hope That Helps".
"If you can keep you head while all around you have lost theirs, you clearly haven't understood the seriousness of the situation."
I do recommend and endorse the CSS control toolkit. However; the "best solution" may be to take the conservative approach to software maintenance by working through the pre-existing CSS and ASP.NET controls, rather than adopting a new approach.
the CSS class you specify for MenuItemStyle and HoverStyle is applied to both a TD, and the link inside the TD, resulting in the graphic being displayed twice. Here's my solution.
Write a DIV tag around your menu, let's give it the ID "menu":
#menu .Item
{ /* CSS class for non-selected Menu Item */
background: url(your image here) no-repeat;
}
#menu .ItemSelected, #menu .ItemHover
{ /* CSS class for hovering and selected Menu Item
... which can be split up, of course! */
background: url(your image here) no-repeat;
}
/* CSS classes for standard Links, only valid inside the #menu DIV */
#menu a, #menu a:visited
{
background: transparent ! important;
display: block;
}
The trick is: you set the background image in the .Item, .ItemSelected and .Item classes. And then you override those exact pictures in the a classes, using the !important marker. Works great for me!
I have a static menu with each items having different image and different background image when I tried this with menu control I was unable to change the menu image on hover also I want to change the image if one menu is selected. Following is the code
used for the navigation,
TheInternet
Member
119 Points
46 Posts
css background-image and menu control
Dec 07, 2006 11:24 AM|LINK
e.g I have a css class like this...
.MenuItemStatic { height:36px; width:81px; background-image:url("Images/MenuStatic.gif")}and a menu control like this... The css class appears to be applied to the text within the item and the item itself separately (i.e. my item and the text both have the image as the background). Is there any way to prevent this behaviour??CSS menu Theme MasterPage "Cascading Style Sheets (CSS)" menuControl
mfarshadmehr
Member
279 Points
151 Posts
Re: css background-image and menu control
Jan 03, 2007 11:17 AM|LINK
i have same problem , StaticMenuItem style is applied to both TD and text in TD.
what can i do?
Adam.Kahtava
Contributor
4775 Points
927 Posts
Re: css background-image and menu control
Jan 03, 2007 12:30 PM|LINK
TheInternet
Member
119 Points
46 Posts
Re: css background-image and menu control
Jan 04, 2007 10:02 AM|LINK
This works very well. You may also want to add a HTTP Handler to eliminate a 'flicker' issue.
I would post an image of my output however, when i try to add an attachment to this post i get a message saying i do not have permissions. Sorry
hth
Adam.Kahtava
Contributor
4775 Points
927 Posts
Re: css background-image and menu control
Jan 04, 2007 04:10 PM|LINK
hth,
Sorry my previous post was directed towards mfarshadmehr.
While the CSS control adapter toolkit may work, there are many alternatives that may be better or even simpler - touting it as "The best solution" is highly subjective.
TheInternet
Member
119 Points
46 Posts
Re: css background-image and menu control
Jan 05, 2007 09:53 AM|LINK
I agree. That is a bit subjective. My reasoning is as follows: This solution is easy to implement (all the hard work has been done for you), it renders less HTML, the HTML is easier to read, it adheres to w3c standards, provides much more flexibility and control over the output to the browser, is easier to style, provides more control over the styling and maintains hover styles trough dynamic menus.
Due to the way the HTML is rendered and the styling is applied by the standard menu control, any other solution to the specific issue detailed above would involve altering that rendered HTML. If you are going to do this yourself you may as well use the css control toolkit as that is really all it does (and very well).
P.S. HTH stands for "Hope That Helps".
Adam.Kahtava
Contributor
4775 Points
927 Posts
Re: css background-image and menu control
Jan 05, 2007 12:29 PM|LINK
hth :),
I do recommend and endorse the CSS control toolkit. However; the "best solution" may be to take the conservative approach to software maintenance by working through the pre-existing CSS and ASP.NET controls, rather than adopting a new approach.
softwareserv...
Member
54 Points
24 Posts
Re: css background-image and menu control
Feb 15, 2007 02:04 PM|LINK
the CSS class you specify for MenuItemStyle and HoverStyle is applied to both a TD, and the link inside the TD, resulting in the graphic being displayed twice.
Here's my solution.
Write a DIV tag around your menu, let's give it the ID "menu":
Now, in your CSS, define as follows:
#menu{ /* nothing in here right now */
}
#menu .Item
{
/* CSS class for non-selected Menu Item */
background: url(your image here) no-repeat;
}
#menu .ItemSelected, #menu .ItemHover
{
/* CSS class for hovering and selected Menu Item
... which can be split up, of course! */
background: url(your image here) no-repeat;
}
/* CSS classes for standard Links, only valid inside the #menu DIV */
#menu a, #menu a:visited
{
background: transparent ! important;
display: block;
}
#menu a:hover, #menu a:active, #menu a:focus
{
background: transparent ! important;
display: block;
}
The trick is: you set the background image in the .Item, .ItemSelected and .Item classes. And then you override those exact pictures in the a classes, using the !important marker. Works great for me!
Bye
Alexander
sudheshna
Member
3 Points
3 Posts
Re: css background-image and menu control
Nov 05, 2007 04:37 AM|LINK
Hi,
I have a static menu with each items having different image and different background image when I tried this with menu control I was unable to change the menu image on hover also I want to change the image if one menu is selected. Following is the code used for the navigation,
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
<Items>
<asp:MenuItem ImageUrl="~/images/link_home.gif" ToolTip="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/images/link_aboutus.gif"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/images/link_people.gif"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/images/link_expertise.gif">
<asp:MenuItem Text="Employ" Value="Employ"></asp:MenuItem>
<asp:MenuItem Text="Navigation 2" Value="Navigation 2"></asp:MenuItem>
<asp:MenuItem Text="Nav3" Value="Nav3"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem ImageUrl="~/images/link_people.gif"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/images/link_people.gif"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/images/link_aboutus.gif"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/images/link_contactus.gif" NavigateUrl="~/ContactUs.aspx"></asp:MenuItem>
</Items>
<LevelMenuItemStyles>
<asp:MenuItemStyle Font-Underline="False" HorizontalPadding="0px" ItemSpacing="0px"
VerticalPadding="0px" />
</LevelMenuItemStyles>
<StaticSelectedStyle BorderStyle="Outset" />
</asp:Menu>
Please could you help me to find a solution?
Thanks
Sudheshna
lunow180
Member
2 Points
5 Posts
Re: css background-image and menu control
Feb 13, 2009 05:39 PM|LINK
Thank you softwareservice!
This was the exact solution to the problem that I was having! Excellent diagnosis and solution. Wish all my searches for posts were this exact.
-lunow180