I have a menu control and i want to use css to set a background image for each item.

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??

TheInternet:

I have a menu control and i want to use css to set a background image for each item.

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??

i have same problem , StaticMenuItem style is applied to both TD and text in TD.

what can i do?

Could you post your rendered HTML source that references this CSS class or a working example?

Hi there, The best solution to this is to use the css control adapter toolkit (see here)

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

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.

Hi Adam,

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".

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.

Hi, 

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":

    <div id="menu">
      <asp:Menu ID="Menu" runat="server" EnableTheming="True" StaticEnableDefaultPopOutImage="False" DataSourceID="SiteMapDataSource1" SkipLinkText="">
        <StaticMenuItemStyle CssClass="Item" />
        <StaticSelectedStyle CssClass="ItemSelected" />
        <StaticHoverStyle CssClass="ItemHover" />
      </asp:Menu>
    </div>

 

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

 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