How to limit the width of an asp.net menu

My menu stretches across the entire page.

How can I set the width properties. ?

See images:

Menu is too wide.
Nedd this appearance
Thanks,
DovbermanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

DovbermanAuthor Commented:
This is the current code:

            <asp:Menu ID="Menu2" runat="server"
                        Width="100px"
            Orientation ="Horizontal"
            CssClass ="MYMenuClass"
            BackColor= "Aqua"
            RenderingMode="Table"
            DynamicMenuItemStyle-ItemSpacing="2px"
            DynamicMenuStyle-BackColor="White"
            DynamicHorizontalOffset="8"
            DynamicMenuItemStyle-BackColor="Yellow"
            DynamicMenuItemStyle-VerticalPadding="1px"
            DynamicMenuStyle-BorderStyle="Solid"
            DynamicMenuStyle-HorizontalPadding="1px"
            DynamicMenuStyle-VerticalPadding="1px"
            DynamicSelectedStyle-BackColor="Lime"
            DynamicVerticalOffset="1"  
            IncludeStyleBlock="False"
            MaximumDynamicDisplayLevels="3"
            DisappearAfter="-1"
            Height="16px"
            StaticMenuItemStyle-ItemSpacing="8px"
            Font-Bold="True"  
            Font-Size="14pt"
            ForeColor="Black"
            StaticMenuItemStyle-BorderStyle  ="Solid"
            StaticMenuItemStyle-BorderWidth ="1px" Font-Names="Calibri"
            StaticMenuItemStyle-HorizontalPadding="8px"
            StaticHoverStyle-BackColor ="White"
            DynamicHoverStyle-BackColor ="White"
            StaticHorizontalOffset="1" StaticMenuStyle-Width="10%" StaticMenuItemStyle-Width="12px">

 
                       <Items>
                            <asp:MenuItem NavigateUrl="#" Text="Basics" Value="mnuBasics">
                                <asp:MenuItem
                                    NavigateUrl="Default.aspx" Text="Home" Value="mnuHome" >
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="ContactUs.aspx" Text="Contact Us" Value="mnuContactUs">
                                </asp:MenuItem>

                            </asp:MenuItem>
0
Lokesh B RDeveloperCommented:
Hi,

Its working fine.

can you post the full code.
Capture.PNG
0
DovbermanAuthor Commented:
It worked when I created the menu in a simple web page.

The same code did not work in a site.master page.

<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <style type="text/css">
        .auto-style1 {
            width: 600px;
        }
    </style>

    <style type="text/css">
        .MYMenuClass {
            color: Green;
            background-color: #00FFFF;
        }

            .MYMenuClass ul {
                background: #00FFFF;
                border: 1px solid #648ABD;
            }

                .MYMenuClass ul li {
                    background: #00FFFF none no-repeat;
                    text-align: center; /* set width if needed.*/
                    width: 200px;
                    border: 1px solid #648ABD;
                }

                    .MYMenuClass ul li a {
                        color: black;
                        padding: 4px 2px 4px;
                        padding-left: 8px !important;
                        border: 1px solid #648ABD;
                        border-bottom: 0;
                    }

                        .MYMenuClass ul li a:hover {
                            background-image: none;
                        }

                        .MYMenuClass ul li a:hover {
                            color: White;
                        }
    </style>

    </head>

       </asp:ScriptManager>
   
            <asp:Menu ID="Menu2" runat="server"
             Orientation ="Horizontal"
            CssClass ="MYMenuClass"
            BackColor= "Aqua"
            RenderingMode="Table"
            DynamicMenuItemStyle-ItemSpacing="2px"
            DynamicMenuStyle-BackColor="White"
            DynamicHorizontalOffset="8"
            DynamicMenuItemStyle-BackColor="Yellow"
            DynamicMenuItemStyle-VerticalPadding="1px"
            DynamicMenuStyle-BorderStyle="Solid"
            DynamicMenuStyle-HorizontalPadding="1px"
            DynamicMenuStyle-VerticalPadding="1px"
            DynamicSelectedStyle-BackColor="Lime"
            DynamicVerticalOffset="1"  
            IncludeStyleBlock="False"
            MaximumDynamicDisplayLevels="2"
            DisappearAfter="-1"
            Height="16px" Width="100px"
            StaticMenuItemStyle-ItemSpacing="8px"
            Font-Bold="True"  
            Font-Size="14pt"
            ForeColor="Black"
            StaticMenuItemStyle-BorderStyle  ="Solid"
            StaticMenuItemStyle-BorderWidth ="1px" Font-Names="Calibri"
            StaticMenuItemStyle-HorizontalPadding="8px"
            StaticHoverStyle-BackColor ="White"
            DynamicHoverStyle-BackColor ="White" >
                       
           
<DynamicHoverStyle BackColor="White"></DynamicHoverStyle>

<DynamicMenuItemStyle ItemSpacing="2px" VerticalPadding="1px" BackColor="Yellow"></DynamicMenuItemStyle>

<DynamicMenuStyle HorizontalPadding="1px" VerticalPadding="1px" BackColor="White" BorderStyle="Solid"></DynamicMenuStyle>

<DynamicSelectedStyle BackColor="Lime"></DynamicSelectedStyle>
                       
           
                       <Items>
                            <asp:MenuItem NavigateUrl="#" Text="Basics" Value="mnuBasics">
                                <asp:MenuItem
                                    NavigateUrl="Default.aspx" Text="Home" Value="mnuHome" >
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="ContactUs.aspx" Text="Contact Us" Value="mnuContactUs">
                                </asp:MenuItem>

                            </asp:MenuItem>
                   
                            <asp:MenuItem NavigateUrl="#" Text="Features" Value="mnuFeatures">
                                <asp:MenuItem
                                    NavigateUrl="BestPicks.aspx" Text="Best Picks(Registered Users)" Value="mnuBestPicks">
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="FinanceTermsDefn.aspx" Text="Finance Terms" Value="mnuFinanceTerms">
                                </asp:MenuItem>
                             </asp:MenuItem>
               
                           <asp:MenuItem NavigateUrl="#" Text="Registration" Value="mnuRegistration">
                   
                                <asp:MenuItem
                                    NavigateUrl="RenewSubscription.aspx" Text="Renew Subscription" Value="mnuRenew">
                                </asp:MenuItem>

                                <asp:MenuItem
                                    NavigateUrl="RegisterFree.aspx" Text="Free Trial" Value="mnuFreeTrial">
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="ReplacePassword.aspx" Text="Replace Password" Value="mnuReplacePassword">
                                </asp:MenuItem>

                                <asp:MenuItem
                                    NavigateUrl="ChangePassword.aspx" Text="Change Password" Value="mnuChangePassword">
                                </asp:MenuItem>
                            </asp:MenuItem>
               
                            <asp:MenuItem NavigateUrl="#" Text="Site Usage Help" Value="mnuSiteHelp">
                                <asp:MenuItem
                                    NavigateUrl="ChangePasswordInstructions.aspx" Text="Password Change Help" Value="mnuChangePasswordHelp">
                                </asp:MenuItem>
                            </asp:MenuItem>

                    <asp:MenuItem NavigateUrl="#" Text="Admin Only" Value="mnuAdminOnly">
                        <asp:MenuItem
                        NavigateUrl="Admin/AdminMenu.aspx" Text="Admin Menu" Value="mnuAdminMenu">
                        </asp:MenuItem>

 
              </asp:MenuItem>
 
             </Items>

            <StaticHoverStyle BackColor="White"></StaticHoverStyle>

            <StaticMenuItemStyle HorizontalPadding="8px" ItemSpacing="8px" BorderWidth="1px" BorderStyle="Solid" Width="12px"></StaticMenuItemStyle>

            <StaticMenuStyle HorizontalPadding="1px" VerticalPadding="1px" Height="12px" Width="5px" BackColor="Aqua" BorderColor="Black" BorderStyle="Solid" BorderWidth="3px" CssClass="MYMenuClass"></StaticMenuStyle>
      </asp:Menu>
     
-----
Rendering is different.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Lokesh B RDeveloperCommented:
Hi,

It works everywhere. Check the below code with master Page.

Master page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.Site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    <style type="text/css">
        .MYMenuClass {
            color: Green;
            background-color: #00FFFF;
        }

            .MYMenuClass ul {
                background: #00FFFF;
                border: 1px solid #648ABD;
            }

                .MYMenuClass ul li {
                    background: #00FFFF none no-repeat;
                    text-align: center; /* set width if needed.*/
                    width: 200px;
                    border: 1px solid #648ABD;
                }

                    .MYMenuClass ul li a {
                        color: black;
                        padding: 4px 2px 4px;
                        padding-left: 8px !important;
                        border: 1px solid #648ABD;
                        border-bottom: 0;
                    }

                        .MYMenuClass ul li a:hover {
                            background-image: none;
                        }

                        .MYMenuClass ul li a:hover {
                            color: White;
                        }
    </style>
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Menu ID="Menu2" runat="server"
            Orientation="Horizontal"
            CssClass="MYMenuClass"
            BackColor="Aqua"
            RenderingMode="Table"
            DynamicMenuItemStyle-ItemSpacing="2px"
            DynamicMenuStyle-BackColor="White"
            DynamicHorizontalOffset="8"
            DynamicMenuItemStyle-BackColor="Yellow"
            DynamicMenuItemStyle-VerticalPadding="1px"
            DynamicMenuStyle-BorderStyle="Solid"
            DynamicMenuStyle-HorizontalPadding="1px"
            DynamicMenuStyle-VerticalPadding="1px"
            DynamicSelectedStyle-BackColor="Lime"
            DynamicVerticalOffset="1"
            IncludeStyleBlock="False"
            MaximumDynamicDisplayLevels="2"
            DisappearAfter="-1"
            Height="16px" Width="100px"
            StaticMenuItemStyle-ItemSpacing="8px"
            Font-Bold="True"
            Font-Size="14pt"
            ForeColor="Black"
            StaticMenuItemStyle-BorderStyle="Solid"
            StaticMenuItemStyle-BorderWidth="1px" Font-Names="Calibri"
            StaticMenuItemStyle-HorizontalPadding="8px"
            StaticHoverStyle-BackColor="White"
            DynamicHoverStyle-BackColor="White">


            <DynamicHoverStyle BackColor="White"></DynamicHoverStyle>

            <DynamicMenuItemStyle ItemSpacing="2px" VerticalPadding="1px" BackColor="Yellow"></DynamicMenuItemStyle>

            <DynamicMenuStyle HorizontalPadding="1px" VerticalPadding="1px" BackColor="White" BorderStyle="Solid"></DynamicMenuStyle>

            <DynamicSelectedStyle BackColor="Lime"></DynamicSelectedStyle>


            <Items>
                <asp:MenuItem NavigateUrl="#" Text="Basics" Value="mnuBasics">
                    <asp:MenuItem
                        NavigateUrl="Default.aspx" Text="Home" Value="mnuHome"></asp:MenuItem>

                    <asp:MenuItem
                        NavigateUrl="ContactUs.aspx" Text="Contact Us" Value="mnuContactUs"></asp:MenuItem>

                </asp:MenuItem>

                <asp:MenuItem NavigateUrl="#" Text="Features" Value="mnuFeatures">
                    <asp:MenuItem
                        NavigateUrl="BestPicks.aspx" Text="Best Picks(Registered Users)" Value="mnuBestPicks"></asp:MenuItem>

                    <asp:MenuItem
                        NavigateUrl="FinanceTermsDefn.aspx" Text="Finance Terms" Value="mnuFinanceTerms"></asp:MenuItem>
                </asp:MenuItem>

                <asp:MenuItem NavigateUrl="#" Text="Registration" Value="mnuRegistration">

                    <asp:MenuItem
                        NavigateUrl="RenewSubscription.aspx" Text="Renew Subscription" Value="mnuRenew"></asp:MenuItem>

                    <asp:MenuItem
                        NavigateUrl="RegisterFree.aspx" Text="Free Trial" Value="mnuFreeTrial"></asp:MenuItem>

                    <asp:MenuItem
                        NavigateUrl="ReplacePassword.aspx" Text="Replace Password" Value="mnuReplacePassword"></asp:MenuItem>

                    <asp:MenuItem
                        NavigateUrl="ChangePassword.aspx" Text="Change Password" Value="mnuChangePassword"></asp:MenuItem>
                </asp:MenuItem>

                <asp:MenuItem NavigateUrl="#" Text="Site Usage Help" Value="mnuSiteHelp">
                    <asp:MenuItem
                        NavigateUrl="ChangePasswordInstructions.aspx" Text="Password Change Help" Value="mnuChangePasswordHelp"></asp:MenuItem>
                </asp:MenuItem>

                <asp:MenuItem NavigateUrl="#" Text="Admin Only" Value="mnuAdminOnly">
                    <asp:MenuItem
                        NavigateUrl="Admin/AdminMenu.aspx" Text="Admin Menu" Value="mnuAdminMenu"></asp:MenuItem>


                </asp:MenuItem>

            </Items>

            <StaticHoverStyle BackColor="White"></StaticHoverStyle>

            <StaticMenuItemStyle HorizontalPadding="8px" ItemSpacing="8px" BorderWidth="1px" BorderStyle="Solid" Width="12px"></StaticMenuItemStyle>

            <StaticMenuStyle HorizontalPadding="1px" VerticalPadding="1px" Height="12px" Width="5px" BackColor="Aqua" BorderColor="Black" BorderStyle="Solid" BorderWidth="3px" CssClass="MYMenuClass"></StaticMenuStyle>
        </asp:Menu>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Open in new window



Content Page

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm9.aspx.cs" Inherits="WebApplication1.WebForm9" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Hello World..!!</h1>
</asp:Content>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DovbermanAuthor Commented:
I will investigate further.  Perhaps another variable on my master page is interfering.

Will give you feedback in 4 hours.  I have a dental appointment.

Thanks,

Dovberman
0
DovbermanAuthor Commented:
I found the code in site.master that was interfering.  I simply commented out the line.
Everything works now.

Thanks,

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs"
    Inherits="StockPickerMax.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %>- My ASP.NET Application</title>

  <%-- Find out if this is really needed. Prevents proper rendering of the menu.
    <webopt:BundleReference runat="server" Path="~/Content/css" />
  --%>

    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

   
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <style type="text/css">
        .auto-style1 {
            width: 600px;
        }
    </style>

    <style type="text/css">
        .MYMenuClass {
            color: Green;
            background-color: #00FFFF;
        }
0
DovbermanAuthor Commented:
Excellent and timely support.

Thanks,
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.