CODEWITHSUNDEEP
asp.netvisual-studio-2008htmlalignmentaspmenu
Wodzu
Wodzu

Reputation: 6979

How to align asp:Menu in DIV tag?

My CSS looks like this:

#menu 
{
 width: 1024px;
 height: 25px;
 margin: 0 auto;
 text-align: right;
 background-color: Red;
}

My asp page looks like this, (in fragment):

        <asp:Menu ID="mnuMainMenu" runat="server" BackColor="#F7F6F3" 
            DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Medium" 
            ForeColor="#7C6F57"  
            Orientation="Horizontal" StaticSubMenuIndent="10px" Font-Bold="True">
            <StaticSelectedStyle BackColor="#5D7B9D" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
            <DynamicMenuStyle BackColor="#F7F6F3" />
            <DynamicSelectedStyle BackColor="#5D7B9D" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
            <Items>
                <asp:MenuItem Text="Projekty" Value="Projekty"></asp:MenuItem>
                <asp:MenuItem Text="Licencje" Value="Licencje"></asp:MenuItem>
                <asp:MenuItem Text="Kontrahenci" Value="Kontrahenci"></asp:MenuItem>
            </Items>
        </asp:Menu>

I want to have menu aligned to the right side of my div tag. Aligment must be done automaticaly, if I add more menu items menu should realign itself. This works as expected under split view in VS 2008, however in IE and FireFox the menu is aligned to the left. How to fix this problem?

Thanks for your time.

Upvotes: 1

Views: 17103

Answers (3)

chip
chip

Reputation: 1

This is an old thread, but the current way of doing this is in the "Properties" of the Menu itself, just put in StaticMenuStyle-CssClass="menu" and use the same css style as above.

Upvotes: 0

Roger
Roger

Reputation: 1082

I have copied / paste your code into a new webform. Maybe this will work for you: (I have added a class to the div around your menu and floated it to the right)

<head runat="server">
<title></title>
<style type="text/css"">
#menu 
{
 width: 1024px;
 height: 25px;
 margin: 0 auto;
 text-align: right;
 background-color: Red;
}

#menuContainer{float: right;}

</style></head>

<body><form id="form1" runat="server">
<div id="menuContainer">

<asp:Menu ID="mnuMainMenu" runat="server"  BackColor="#F7F6F3" 
        DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Medium" 
        ForeColor="#7C6F57"  
        Orientation="Horizontal" StaticSubMenuIndent="10px" Font-Bold="True">
        <StaticSelectedStyle BackColor="#5D7B9D" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
        <DynamicMenuStyle BackColor="#F7F6F3" />
        <DynamicSelectedStyle BackColor="#5D7B9D" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />

        <Items>
            <asp:MenuItem Text="Projekty" Value="Projekty"></asp:MenuItem>
            <asp:MenuItem Text="Licencje" Value="Licencje"></asp:MenuItem>
            <asp:MenuItem Text="Kontrahenci" Value="Kontrahenci"></asp:MenuItem>
        </Items>
    </asp:Menu>
</div>
</form>

Upvotes: 1

Joakim
Joakim

Reputation: 2217

You can wrap the menu in a div tag and set it to float right, this however makes it that certain html tags may float to its side as well.

Upvotes: 3

Related Questions