HELP with centering a menu in c#

**maverb** · Dec 11, 2011 23:42

I am working on a website that has a menu that is coming from a sitemap source. I can not get the menu to center for the life of me. It keeps floating left. It seems like any CSS i write does not affect it. Does anyone have any idea how to center a C# menu control?

This is really frustrating I have been trying to center this for hours.

If anyone has any suggestions please let me know!"

Thanks

**Serenarules** · Dec 12, 2011 00:39

Can you show us the relavent CSS? And the HTML that uses it? You'll get a much quicker, more accurate response thusly.

**maverb** · Dec 12, 2011 00:51

Hey not a problem, the CSS is..

div.hideSkiplink
{
background-color: #452f1a;
width:960px;
height:68px;
margin:0 auto;
float:right;
}

div.undNav
{
background-image: url('../Images/Roots.jpg');
width: 960px;
height: 69px;
}

div.menu
{
padding: 4px 0px 4px 8px;
text-align:center !important;
margin:0 auto !important;
width:960px;
}

div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: inherit;
text-align:center !important;
}

div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

and the html is...

<div class="clear hideSkiplink" >
<div id="Navigation" style="text-align:-moz-center;">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="1"
Font-Names="Tahoma" Font-Size="20px" ForeColor="#FFFFFF" StaticSubMenuIndent="10px"
Style="display: inline; margin: 0 auto;" CssClass="Navigation" EnableTheming="True"
Orientation="Horizontal" DynamicMenuStyle-CssClass="Navigation">
<DynamicMenuItemStyle VerticalPadding="10px" BackColor="#452f1a" CssClass="Navigation" />
<StaticMenuItemStyle HorizontalPadding="15px" VerticalPadding="15px" CssClass="Navigation" />
</asp:Menu>
</div>
</div>

**Serenarules** · Dec 12, 2011 00:59

Ah, a typical UL as a horizontal menu thing. I had this issue a while back. I don't typically do much complex css, but I solved it by just getting it to look right, then containing the whole thing in a div with a specified width, and left-right auto margins. Depending on the rest of your layout this might also work for you. This is, however, completely a css issue. It has nothing to do with the asp:Menu control, as it renders as straight html. If my solution doesn't work for you, try posting this in the Web Page Design forum, where people more attuned to CSS and layout can help. Here in the .NET forum, we tend to be more code-heads than presentation.

**Serenarules** · Dec 12, 2011 01:18

Just mocked it up, and here's the css, and the test file I used. It worked fine. Try that as a test. If it still isn't working, you might have an odd doctype or compatability mode is on, or some other such oddness.

Code CSS:

html
{
    color: #000000;   
}
div.hideSkiplink
 {
 background-color: #452f1a;
 width:960px;
 height:68px;
 margin:0px auto 0px auto;
 }
 
div.undNav
 {
 background-image: url('../Images/Roots.jpg');
 width: 960px;
 height: 69px;
 }
 
div.menu
 {
 padding: 4px 0px 4px 8px;
 text-align:center !important;
 margin:0 auto !important;
 width:960px;
 }
 
div.menu ul
 {
 list-style: none;
 margin: 0px;
 padding: 0px;
 width: inherit;
 text-align:center !important;
 }
 
div.menu ul li a, div.menu ul li a:visited
 {
 background-color: #465c71;
 border: 1px #4e667d solid;
 color: #dde4ec;
 display: block;
 line-height: 1.35em;
 padding: 4px 20px;
 text-decoration: none;
 white-space: nowrap;
 }
 
div.menu ul li a:hover
 {
 background-color: #bfcbd6;
 color: #465c71;
 text-decoration: none;
 }
 
div.menu ul li a:active
 {
 background-color: #465c71;
 color: #cfdbe6;
 text-decoration: none;
 }

Code HTML4Strict:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Alignment.Default" Theme="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
<div class="clear hideSkiplink" >
    <div id="Navigation" style="text-align:-moz-center;">
        <asp:Menu ID="Menu1" runat="server" DynamicHorizontalOffset="1"
        Font-Names="Tahoma" Font-Size="20px" ForeColor="#FFFFFF" StaticSubMenuIndent="10px"
        Style="display: inline; margin: 0 auto;" CssClass="Navigation" EnableTheming="True"
        Orientation="Horizontal" DynamicMenuStyle-CssClass="Navigation">
        <DynamicMenuItemStyle VerticalPadding="10px" BackColor="#452f1a" CssClass="Navigation" />
        <StaticMenuItemStyle HorizontalPadding="15px" VerticalPadding="15px" CssClass="Navigation" />
        </asp:Menu>
    </div>
 </div> 
 
    </div>
    </form>
</body>
</html>

Code Csharp:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Alignment
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Menu1.Items.Add(new MenuItem("Home"));
            Menu1.Items.Add(new MenuItem("This"));
            Menu1.Items.Add(new MenuItem("That"));
            Menu1.Items.Add(new MenuItem("About"));
        }
    }
}

**maverb** · Dec 12, 2011 01:25

Hey, I really appreciate your help but still! no dice!....it just doesn't want to center?

What is compatibly mode and how do i change it?

Thanks!

**Serenarules** · Dec 12, 2011 01:32

Compatability mode is something you'll see in recent versions of IE. If you're using FireFox, you probably won't see it (or need it for that matter). In IE, it's a little icon to the left of the refresh button that looks like a piece of torn paper. It's either blue if on, and grey if off.

As to why it isn't working, the only thing I can think of that might be interfering is something in the rest of your page html (especially something declared prior to this bit) and it's related css. Remember, css cascades (hence the name). If this menu is being nested within something else, you need to look at that css as well.

Did you try a fresh aspx page, using exactly the code I posted?

**imaginekitty** · Dec 12, 2011 12:11

To center a UL with floated list items add display: table; and margin: auto; to the UL.

What's with all the !important declarations?

I'm on my phone or I'd give a more detailed answer. Be back in the office in a few hours.

**Serenarules** · Dec 12, 2011 12:28

Most likely an attempt on his part to see if he could force an alignment.

Considering this UL is nested within two outer divs, the outermost having a specific width, he's probably going to want to apply the effect to the outermost div, rather than the UL directly. I get the impression that he is considering the entire block as the 'menu'. All I did to get it to work was change his container css from:

Code CSS:

div.hideSkiplink
 {
 background-color: #452f1a;
 width:960px;
 height:68px;
 margin:0 auto;
float: right;
 }

to:

Code CSS:

div.hideSkiplink
 {
 background-color: #452f1a;
 width:960px;
 height:68px;
 margin:0px auto 0px auto;
}

I would probably hesitate to use the display:table attribute as older browsers do not support it. But this is up to him.

**imaginekitty** · Dec 12, 2011 14:08

I'm back in the office. I can have a look now.

Originally Posted by maverb

... and the html is...

<div class="clear hideSkiplink" >
<div id="Navigation" style="text-align:-moz-center;">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="1"
Font-Names="Tahoma" Font-Size="20px" ForeColor="#FFFFFF" StaticSubMenuIndent="10px"
Style="display: inline; margin: 0 auto;" CssClass="Navigation" EnableTheming="True"
Orientation="Horizontal" DynamicMenuStyle-CssClass="Navigation">
<DynamicMenuItemStyle VerticalPadding="10px" BackColor="#452f1a" CssClass="Navigation" />
<StaticMenuItemStyle HorizontalPadding="15px" VerticalPadding="15px" CssClass="Navigation" />
</asp:Menu>
</div>
</div>

The ASP.NET code doesn't help. I'd need to see the rendered markup. A link to a live page would be best.

Originally Posted by Serenarules

... Here in the .NET forum, we tend to be more code-heads than presentation.

You misunderestimate me, sir.

@maverb: if you have the choice don't use those junky <asp:menu> elements. It's better to use an <asp:listview> or even an <asp:repeater> so that you can control the markup and avoid the stupid inline styling. This will also eliminate the need for !important.

User Tag List

Thread: HELP with centering a menu in c#

Thread Tools

Display

HELP with centering a menu in c#

Bookmarks

Bookmarks

Posting Permissions