Help center align the menu div

**wrack** · Apr 22nd, 2011, 04:10 AM

Hi,

I am creating a simple project with ASP.NET 4 menu and I would like to middle align it within whatever container it is sitting. I have tried everything that I can think of with no joy.

I am allowed to use jQuery but I don't know much about it and not sure if it can be helpful or not.

Please see the sample project.

TA

**Nightwalker83** · Apr 22nd, 2011, 04:49 AM

Will you be keeping the menu like it is now, that is with two level 1 items or adding more top level items?

Edit:

I noticed that you are using a cascading style sheet in your project. Have you tried the align method as you would if you were creating a normal html website?

**wrack** · Apr 22nd, 2011, 04:56 AM

Thanks. No there will me more than 2 top level items. This was just an example.

I have tried everything I can with CSS.

**Nightwalker83** · Apr 22nd, 2011, 05:16 AM

Not sure if this would help? I disable the external css when testing so you may have to do the same. Although, you could place the style code in the css file. the external css seems override that of the css that is internal.

HTML Code:

<style>
.MainMenu
{
    position:relative;
    vertical-align:middle;
    }
</style>

"asp.net" Code:

<asp:Menu ID="mnuMain"  class="MainMenu" runat="server" Orientation="Horizontal"  IncludeStyleBlock="False">

**wrack** · Apr 22nd, 2011, 05:39 AM

Hey thanks Nightwalker. I tried that but no change! Could I be missing anything?

**gep13** · Apr 22nd, 2011, 06:45 AM

Originally Posted by wrack

Hey thanks Nightwalker. I tried that but no change! Could I be missing anything?

Hello,

When you say there is no change, did you first clear out your browsers cache? Browsers are notorious for keeps references to cached CSS and JS files etc, and as a result, changes that you have made on the server aren't pushed down to the client.

Try clearing your cache and try again.

Gary

**wrack** · Apr 22nd, 2011, 06:20 PM

Hi Gary, thanks for the pointer and yes I did clear the browser cache before testing.

I think Nightwalker fixed the middle alignment as in vertical-align: middle;

Apologies if the topic title caused confusion. I meant it to align center horizontally.

**avrail** · Apr 22nd, 2011, 06:34 PM

i tried your project,
i think there is something into your css it self,
i will see more
in the design mode it is center but not in the run mode :S

**avrail** · Apr 22nd, 2011, 07:03 PM

ok,
removing your css class named AdminMasterMenu from your <td>
and adding align="center" to your menu <td>

this sent your menu to the center
but i didn't actually know why text-align:center inside your css class is not working,
sure there is something else we are missing

**wrack** · Apr 22nd, 2011, 07:28 PM

Thanks

BTW this is ASP.NET menu control and looking through FireBug, or IE Developer Tools I noticed it adds a whole heap of inline styles itself! Could they be the culprits?

**Nightwalker83** · Apr 22nd, 2011, 07:43 PM

Originally Posted by wrack

I think Nightwalker fixed the middle alignment as in vertical-align: middle;

I am confused, this is what I did above:

HTML Code:

<&#37;@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
 
<style>
.MainMenu
{
    position:relative;
    vertical-align:middle;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <table style="width: 100%; height: 100%; min-width: 960px; min-height: 704px;" cellpadding="0"
        cellspacing="0">
        <tr class="AdminMasterRow">
            <td class="AdminMasterUser">
                <asp:Label ID="lblUserPrefix" runat="server" Text="Welcome back,&nbsp;" CssClass="UserPrefix"></asp:Label>
                <asp:HyperLink ID="hlUser" runat="server" CssClass="UserSuffix">HyperLink</asp:HyperLink>
            </td>
            <td class="AdminMasterMenu">
                <asp:Menu ID="mnuMain"  class="MainMenu" runat="server" Orientation="Horizontal"  IncludeStyleBlock="False">
                    <Items>
                        <asp:MenuItem Text="Level 1 Item 1" Value="Level 1 Item 1">
                            <asp:MenuItem Text="Level 2 Item 1" Value="Level 2 Item 1"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Level 1 Item 2" Value="Level 1 Item 2">
                            <asp:MenuItem Text="Level 2 Item 1" Value="Level 2 Item 1">
                                <asp:MenuItem Text="Level 3 Item 1" Value="Level 3 Item 1"></asp:MenuItem>
                                <asp:MenuItem Text="Level 3 Item 2" Value="Level 3 Item 2"></asp:MenuItem>
                            </asp:MenuItem>
                        </asp:MenuItem>
                    </Items>
                </asp:Menu>
            </td>
            <td class="AdminMasterLoginLogout">
                <asp:LoginStatus ID="lsMain" runat="server" CssClass="LoginLogout" LoginText="LOGIN"
                    LogoutText="LOGOUT" />
            </td>
        </tr>
        <tr>
            <td colspan="3" class="AdminMasterContent">
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

In Fire fox when I run that code it moves the menu horizontally to the center because that is how the div in aligned. Are you saying you want to have the div on the side of the page then the menu appear halfway down?

**wrack** · Apr 22nd, 2011, 08:55 PM

Thanks Nightwalker. Basically I want the menu (whatever ASP.NET renders the menu control to) aligned centrally within the TD.

I think I know what you are trying to do. But with all the other CSS I have, something gets screwed up! Also it is aligned in the middle when I remove the external css as you mentioned but then I need help with the CSS that may be causing this.

**Nightwalker83** · Apr 23rd, 2011, 03:15 AM

Originally Posted by wrack

I think I know what you are trying to do. But with all the other CSS I have, something gets screwed up! Also it is aligned in the middle when I remove the external css as you mentioned but then I need help with the CSS that may be causing this.

Try putting:

Code:

.MainMenu
{
    position:relative;
    vertical-align:middle;
    }

in the css file if you haven't already and see if that makes a difference. If you do that don't forget the asp.net code in post #4.

**wrack** · Apr 23rd, 2011, 06:30 PM

Sorry Nightwalker but I tried that with no joy. Can you post your solution please? I want to see the whole thing and find out what am I doing wrong.

EDIT:

I have decided to give this up for now as I have higher priority things to do. I will change the whole layout later to make things work better.

Thanks for all your help.

**Nightwalker83** · Apr 23rd, 2011, 08:23 PM

Originally Posted by wrack

Sorry Nightwalker but I tried that with no joy. Can you post your solution please? I want to see the whole thing and find out what am I doing wrong.

Sorry, I couldn't be of help! Maybe you could draw a picture of what you are trying to do and post it?

**wrack** · Apr 24th, 2011, 02:10 AM

No no, you have been of great help. I think my choice of using table as a basic layout is very bad. I am going to properly redesign the site with DIVs.

**gep13** · Apr 24th, 2011, 01:27 PM

Originally Posted by wrack

No no, you have been of great help. I think my choice of using table as a basic layout is very bad. I am going to properly redesign the site with DIVs.

That would certainly be my recommendation, yes.

I would start here:

http://htmldog.com/

Gary

Thread: Help center align the menu div

Thread Tools

Display

Help center align the menu div

Re: Help middle align the menu

Re: Help middle align the menu

Re: Help middle align the menu

Re: Help middle align the menu

Re: Help middle align the menu

Re: Help middle align the menu

Re: Help center align the menu div

Re: Help center align the menu div

Re: Help center align the menu div

Re: Help middle align the menu

Re: Help center align the menu div

Re: Help center align the menu div

Re: Help center align the menu div

Re: Help center align the menu div

Re: Help center align the menu div

Re: Help center align the menu div

Posting Permissions