[RESOLVED]ASP Menu control and centering on page

Hello,

I know this has been discussed before. I have tried multiple threads and ideas to get my menu control to center on the screen but nothing is working.

I know of margin: 0 auto and addign a width but no matter where I place it, nothing happens.

Here is my master page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="PageWrapper">
                <header></header>
                <nav>
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DataSourceID="dsSiteMap" CssClass="MainMenu" />
                    <asp:SiteMapDataSource runat="server" ID="dsSiteMap" ShowStartingNode="false" />
                </nav>
                <section id="MainContent">
                    <asp:ContentPlaceHolder id="cpMainContent" runat="server"></asp:ContentPlaceHolder>
                </section>
                <footer></footer>
            </div>
        </form>
    </body>
</html>

My CSS page

body
{
    margin: 0;
    background-color: gray;
}

#PageWrapper
{
    width: 1366px;
    background-color: white;
    margin: auto;
}

nav
{
    width: 1366px;
    height: 36px;
    padding-top: 7px;
    padding-left: 17px;
    background-color: seagreen;
}

nav a
{
    color: #fff;
}

.MainMenu
{
    border: 1px solid #999999;
    width: 1348px;
    height: 19px;
    background-color: #555555;
}

.MainMenu ul 
{
    width: 300px;
    margin: 0 auto;
    display: block;
    padding: 0;
}

My sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/">
        <siteMapNode url="~/Default.aspx" title="Home"  description="Go to the homepage" />
        <siteMapNode url="~/NewTicket.aspx" title="New Ticket"  description="Create a new ticket" />
        <siteMapNode url="~/Search.aspx" title="Search" description="Search tickets" />
    </siteMapNode>
</siteMap>

This is what I have so far. I have weird color combos just to see the different elements at work.

So yeah, wondering what I’m missing.

I was able to get labels I created to center in a panel using the margin: 0 auto and width: auto. But still nothing I try gets my asp:menu control to center in the page.

HaleStorm87

nav
{
    width: 1366px;
    height: 36px;
    padding-top: 7px;
    padding-left: 17px;
    background-color: seagreen;
}

Add text-aligncenter; here. That would do it.

nav
{
    width: 1366px;
    height: 36px;
    padding-top: 7px;
    padding-left: 17px;
    background-color: seagreen;
    text-align: center; 
}

No change. 

I also have tried the following changes. Still no go.

body
{
    margin: 0;
    background-color: gray;
}

#LogoPanel
{
    float: left;
    width: 683px;
    height: 95px
}

#Logo
{
    padding-top: 5px;
}

#HeaderTextPanel
{
    float: right;
    width: 683px;
    height: 95px;
}

#HeaderText
{
    display: block;
    width: auto;
    text-align: center;
    padding-top: 5%;
    padding-left: 40%;
    margin: 0 auto;
    font-family: 'Century Gothic', Arial;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    color: #ad1010;
}

#PageWrapper
{
    clear: both;
    width: 1366px;
    background-color: white;
    margin: 0 auto;
}

nav
{
    clear: both;
    width: 1366px;
    background-color: seagreen;
    text-align: center;
}

nav a
{
    color: #fff;
}

.MainMenu
{
    float: none;
    border: 1px solid #999999;
    background-color: #555555;
    display:inline-block;
    margin: 0 auto;
}

I have other controls that are working and that is what doesn’t make sense to me. Like: 

.TableHeaderLabel
{
    display: block;
    width: auto;
    text-align: center;
    margin: 0 auto;
}

That goes right in the center in my panel I have.

Hi HaleStorm87,

Thanks for posting to asp.net forum.

According to your description and code, I see that you want to set the menu item in the center position.

As we know that the menu control will generate a style block by default like below.

<style type="text/css">
	/* <![CDATA[ */
	#Menu1 img.icon { border-style:none;vertical-align:middle; }
	#Menu1 img.separator { border-style:none;display:block; }
	#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
	#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
	#Menu1 ul.dynamic { z-index:1; }
	#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
	#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
	#Menu1 a.popout { background-image:url("/WebResource.axd?d=YAYach_zykzn7tRotFpEUhmpY5jFguTb7_Uyi2QJF1l1x_oQ_EqXH_EfDwsBfJ1i6cF4wOKdwC5dLUpBwOweLs5rtvZkrE7sJcO6q67rUwQ1&t=635091197160068157");background-repeat:no-repeat;background-position:right center;padding-right:14px; }
	/* ]]> */
</style>

It will affect your custom css style. Please set the property "IncludeStyleBlock" of menu control as "false". Then set your custom css style.

If any doubt, feel free to back. Thanks.

 

Best Regards!

hi, you can use like this,

<nav>
      <div style="width:100%; margin:0 auto 0 auto;">
              <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DataSourceID="dsSiteMap" CssCla               ss="MainMenu" />
              <asp:SiteMapDataSource runat="server" ID="dsSiteMap" ShowStartingNode="false" />
      </div>
</nav>

Thank you everyone. 

I finally was able to figure it out. 

I edited the styling to my nav parent element:

nav
{
    clear: both;
    text-align: center;
    display: table;
    margin: 0 auto;
}

So instead of having it displayed as a block I set it as a table. Funny thing is it is still rendered as a list.
I have it to clear because I have elements before it that was floated to the left.
I definitely learned a lot more about CSS with this issue. 

Kind of crazy for so much trouble just for one styling. Surprised 

Leave a Reply