MouseOver effects when using asp:menu and asp:menuItem in masterpages

Last post 01-30-2007 10:35 AM by Kafil Jairajpuri. 2 replies.

Sort Posts:

  • MouseOver effects when using asp:menu and asp:menuItem in masterpages

    01-19-2007, 12:34 PM
    • Loading...
    • leoforio
    • Joined on 01-19-2007, 4:26 PM
    • Posts 4

    Hi i'm new here

    I have a menu, built using asp:menu and asp:menuitem, which is located on a master page. The interface of the menu is built using .gif images set using the css background-image property

    E.G

    <asp:menu id="menu1" runat="server" Orientation="Horizontal">
        <Items>
            <asp:MenuItem  NavigateUrl="~/Information.aspx" text="information" value="information"/>
        </Items>
        <StaticHoverStyle CssClass="menuHoverStyle">
        <StaticSelectedStyle CssClass="menuSelectedStyle"> 

    </asp:menu>

    It is is the style sheet that the images are changed.

    Heres my problem; only a portion of the background image is being displayed. This is because the image is bigger than the text in the link.

    Is there a way in which I can increase the size of each <asp:menuitem> in the menu to be the size of the image. Also what is the property to remove to blank space between each menu item when the orientation of the menu is horizontal.

    Reagards

    Leoforio 

  • Re: MouseOver effects when using asp:menu and asp:menuItem in masterpages

    01-25-2007, 7:42 AM
    • Loading...
    • camera
    • Joined on 07-27-2006, 5:05 PM
    • Austin
    • Posts 44
    you can specify a standard width for list items with this CSS syntax: #menu1 li { width: 50px; } I would need to see the generated XHTML to know how to remove the blank spaces for certain, but this might help: #menu1 li { padding-left:0; padding-right:0; margin-left:0; margin-right:0; }
    Vine Type: Content Management with Standards in Mind. http://vinetype.com
    Filed under:
  • Re: MouseOver effects when using asp:menu and asp:menuItem in masterpages

    01-30-2007, 10:35 AM
    To remove blank space between each menu item, try

    ItemSpacing

    ="0px"

    hope this helps. 

     

Page 1 of 1 (3 items)
Microsoft Communities
Page view counter