HELP with centering a menu in c#

.NET
1

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

2

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

3

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>

4

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.

5

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.

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



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Alignment.Default" Theme="Default" %>
<!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></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>



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"));
        }
    }
}
6

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!

7

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?

8

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.

9

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:

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

to:

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.

10

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

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

You misunderestimate me, sir. :wink:

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