I'm having trouble with my css; can't seem to have the images appear on my buttons for my menu controls properly.
Say I want to have a row of buttons, horizontal menu.
And on each hover, the image will change.
If you are at the current page (selected), it will show the on-hover image.
It appears. But the alignment is not there and I can't seem to figure out which one's referring to which.
Please help!
My StyleSheet.CSS:
#menu { background-image: url(images/menu_bg.png); background-repeat: repeat-x; } .menu { margin: 0px; list-style: none; float: left; width: 90px; height: 50px; text-align: center; font-size: 14px; font-weight: bold; text-align: center; color: #FFF; outline: none; clear: both; background-image: url(images/menu_bg.png); background-repeat: repeat-x; } .menu_current { color: #FFF; background-image: url(images/menu_hover.gif); background-position: center; background-repeat: repeat-x; background-position: top; } .menu_hover { color: #FFF; background-image: url(images/menu_hover.gif); background-position: center; background-repeat: repeat-x; background-position: top; }
My MasterPage:
<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!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>Untitled Page</title> <link rel="stylesheet" href="StyleSheet.css" type="text/css" media="all" /> </head> <body> <form id="form1" runat="server"> <div id="container"> <div id="header_panel"> <div id="site_title"> Online Auction </div> </div> <div id="menu"> <asp:Menu ID="menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" MaximumDynamicDisplayLevels="5" StaticDisplayLevels="5"> <LevelMenuItemStyles> <asp:MenuItemStyle CssClass="menu" Font-Underline="False" HorizontalPadding="40px" /> <asp:MenuItemStyle Font-Underline="False" HorizontalPadding="40px" /> </LevelMenuItemStyles> <StaticSelectedStyle CssClass="menu_current" /> <StaticMenuItemStyle CssClass="menu" /> <StaticHoverStyle CssClass="menu_current" /> <StaticMenuStyle CssClass="menu" /> </asp:Menu> </div> <div id="top_panel"> <div class="top_panel_section"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div class="cleaner_h20"> </div> </div> <!-- CLOSE TOP PANEL --> <div id="footer"> Copyright © 2009 <a href="#"><strong>JayBern</strong></a> </div> <!-- CLOSE FOOTER --> </div> <!-- CLOSE PAGE --> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> </form> </body> </html>
My Web.SiteMap:
<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="home.aspx" title="Home" description=""> <siteMapNode url="about.aspx" title="About" description="" /> <siteMapNode url="account.aspx" title="Market" description="" /> <siteMapNode url="usercp.aspx" title="User CP" description="" /> <siteMapNode url="contactus.aspx" title="Contact" description="" /> </siteMapNode> </siteMap>