Unable to make menu horizontal using css adapters

Reply

kiekar01

Member

16 Points

93 Posts

Unable to make menu horizontal using css adapters

May 21, 2008 08:23 PM|kiekar01|LINK

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


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

Reply

Schmakt

Member

180 Points

207 Posts

Re: Unable to make menu horizontal using css adapters

May 29, 2008 05:42 PM|Schmakt|LINK

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

Reply

dan9603

Member

1 Points

3 Posts

Re: Unable to make menu horizontal using css adapters

Aug 22, 2008 02:08 PM|dan9603|LINK

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

Reply

cnobles

Member

12 Points

60 Posts

Re: Unable to make menu horizontal using css adapters

Aug 22, 2008 04:22 PM|cnobles|LINK

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

Reply

lspence

Star

8235 Points

1697 Posts

Re: Unable to make menu horizontal using css adapters

Aug 22, 2008 05:23 PM|lspence|LINK

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;
}

My Blog
http://Lspence.blogspot.com

(Please MARK this post as ANSWERED, if you find it helpful)

Unable to make menu horizontal using css adapters RSS

4 replies

Shortcuts

Unable to make menu horizontal using css adapters

Re: Unable to make menu horizontal using css adapters

Re: Unable to make menu horizontal using css adapters

Re: Unable to make menu horizontal using css adapters

Re: Unable to make menu horizontal using css adapters