Remove From My Forums

Unable to make menu horizontal using css adapters

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

0

Sign in to vote

User-2109111975 posted

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

Thursday, May 29, 2008 5:42 PM
0

Sign in to vote

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

Asked by:

Unable to make menu horizontal using css adapters

Question

All replies