Geek Answers Handbook

How can I make the asp.net menu 100% wide

I am creating an asp.net site where I need a horizontal asp menu to be the width of the entire screen with 10 elements with a width of 10%.

Please suggest a solution, because when I set the menu width to 100% and li width to 10%, it is not included in the full width.

However, when I set the menu width to 1280 (my resolution) and li to 128 wide, it works fine. The problem with the approach is not all having the same resolution. The asp.net menu HTML code:

 <div> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableTheming="False" EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal" Width="1280px"> <Items> <asp:MenuItem Text="HOME" Value="ADD CITY" NavigateUrl="~/Content.aspx"></asp:MenuItem> <asp:MenuItem NavigateUrl="~/addcity.aspx" Text="NEW CITY" Value="ADD CITY"> </asp:MenuItem> <asp:MenuItem Text="NEW DATA" Value="SUBMIT DATA" NavigateUrl="~/adddata.aspx"></asp:MenuItem> <asp:MenuItem Text="SHOPING" Value="SHOPING"> </asp:MenuItem> <asp:MenuItem Text="OFFERS" Value="OFFERS"></asp:MenuItem> <asp:MenuItem Text="BUSINESS" Value="BUSINESS"></asp:MenuItem> <asp:MenuItem Text="CLASSIFIED" Value="CLASSIFIED"></asp:MenuItem> <asp:MenuItem Text="EDUCATION" Value="EDUCATION"></asp:MenuItem> <asp:MenuItem Text="ISSUES" Value="ISSUES"></asp:MenuItem> <asp:MenuItem Text="SERVICES" Value="SERVICES"></asp:MenuItem> </Items> </asp:Menu> </div>

I tried to make it well formatted. Now please help.

here is my css

  { div.menu { margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width:100%; } div.menu ul { margin:0px 0px 0px 0px; list-style: none; margin: 0px; padding: 0px; min-width:100%; } div.menu ul li a { background-color:Black; border: 0px Gray solid; color: White; display:table-cell; padding: 10px 10px; text-decoration:none; margin:0px 0px 0px 0px; } div.menu li { text-align:center; } div.menu ul li a:hover { background-color: #B5B5B5; color: Black; text-decoration: none; } div.menu ul li a:active { background-color: Gray; color: Black; text-decoration: none; } div.menu ul li .selected { background-color: #646464; color: Black; text-decoration: none; } }
+4
source share
2 answers

You can define a Css class as follows:

 .Menu { width:100%; } .Menu ul li { width:10%; }

After that, set the following menu control property for the CSS class name in aspx.

 CssClass="Menu"
+3
source

I know it's too late to answer this question, but maybe someone who wants to know the answer. my solution to this question is simple and works for a two-level menu:

  ul.level1 { width:100% !important; } .level1 li { width:10%; } ul.level2 { width:100% !important; } .level2 li { width:100%; }

note that !important used to override the inline CSS created in the menu

0
source

More articles:


All Articles