locked
Unable to make menu horizontal using css adapters RRS feed

  • Question

  • User1302700350 posted

    Hello,

     I'm trying to create a simple three tab horizontal menu using a sitemap and css adapters with no success.

    Each time I run the website the menu displays vertically. I can't figure this one out. Any help would be much

    appreciated.

    MasterPage

    <%@ Master Language="C#" AutoEventWireup="true" 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 href="CSS/Import.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="wrapper">
            <div id="header">
                <asp:Menu ID="MainHeaderMenu" runat="server" 
                    Orientation="Horizontal" DataSourceID="SiteMapDataSource1" CssSelectorClass="HeaderMenu"  
                    MaximumDynamicDisplayLevels="1" StaticDisplayLevels="2">
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
            </div>
            <div id="contentarea">
                <div id="maincontent">Main content goes here...
                    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                    </asp:contentplaceholder>
                </div>
                <div id="rightbar">Right side....</div>
            </div>
        </div>
        <div id="footer">
            Footer goes here...
        </div>
        </form>
    </body>
    </html>

     HeaderMenu.css

    .HeaderMenu .AspNet-Menu-Horizontal 
    {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    .HeaderMenu ul.AspNet-Menu li 
    {
        background: #FF0000;
        width: 100px;
    } 

     Web.sitemap

    <?xml version="1.0" encoding="utf-8" ?>
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
        <siteMapNode url="~/Default.aspx" title="Home"  description="">
            <siteMapNode url="~/Services.aspx" title="Services"  description="" />
            <siteMapNode url="~/ContactUs.aspx" title="Contact us"  description="" />
        </siteMapNode>
    </siteMap>
     
    Wednesday, May 21, 2008 8:23 PM

All replies

  • User-2109111975 posted

     have you tried specifying a width?  Total shot in the dark...

    Thursday, May 29, 2008 5:42 PM
  • User-558454797 posted

    I have this exact issue.  Did you ever resolve it?  If so, what did you do?  Thanks!!!

    Friday, August 22, 2008 2:08 PM
  • User1598028445 posted

    Here's the info for my horizontal menu:

    /* All link and span elements */
    .TopMenu ul.AspNet-Menu a,
    .TopMenu ul.AspNet-Menu span
    {
        white-space: nowrap;
    }
    
    /* All first level link and span elements */
    .TopMenu ul.AspNet-Menu > li > a,
    .TopMenu ul.AspNet-Menu > li > span
    {
        color: White;
    	font-family: Verdana, Arial, sans-serif;
        font-weight: bold;
        font-size: 10px;
        padding: 5px 7px;
    }
    
    /* All first level link and span elements hovered */
    .TopMenu ul.AspNet-Menu > li > a:hover,
    .TopMenu ul.AspNet-Menu > li > span:hover,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-Hover > a:hover,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-Hover > span:hover
    {
        text-decoration: underline;
    }
    
    /* All first level link and span elements when the element or one of its children is selected */
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-Selected > a,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-Selected > span,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-ChildSelected > a,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-ChildSelected > span
    {
    	background-color: #D8D8D8;
    	background-image: url(images/top.jpg);
    	background-repeat: repeat-x;
    	color: #186086;
    	border-top: 1px solid #A2ABB0;
    	border-left: 1px solid #A2ABB0;
    	border-right: 1px solid #A2ABB0;
    	padding: 4px 8px 5px;
    }
      
    <asp:Menu ID="TopMenu" runat="server" CssSelectorClass="TopMenu"
        Orientation="Horizontal" MaximumDynamicDisplayLevels="0" />
     
    Friday, August 22, 2008 4:22 PM
  • User-114806852 posted

    Try the following:

    .HeaderMenu .AspNet-Menu-Horizontal
    {
    position: relative;
    top: 10px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    width: 400px;
    z-index: auto;
    }
      
    Friday, August 22, 2008 5:23 PM