Menu elements same width

How can i get the following menu items to be the same width? i.e. each item to be 20% width?


<asp:Menu ID="Menu2" runat="server" BackColor="#960000" DynamicHorizontalOffset="2" Font-Bold="False"
                        Font-Names="Century Gothic" Font-Size="0.8em" ForeColor="White" Orientation="Horizontal"
                        StaticSubMenuIndent="10px" Width="100%" BorderColor="White" BorderStyle="Solid" BorderWidth="1px" CssClass="Writing">
                        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <DynamicHoverStyle BackColor="#0A3B9F" ForeColor="White" />
                        <DynamicMenuStyle BackColor="#0A3B9F" />
                        <StaticSelectedStyle BackColor="#0A3B9F" />
                        <DynamicSelectedStyle BackColor="#0A3B9F" />
                        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <Items>
                            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/products.aspx" Text="Products" Value="Product Info">
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/marketplace.aspx" Text="Marketplace" Value="Designs"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/startdesigning.aspx" Text="Start Designing" Value="Designer"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/prices.aspx" Text="Prices" Value="Prices"></asp:MenuItem>
                        </Items>
                        <StaticHoverStyle BackColor="#0A3B9F" ForeColor="White" />
                    </asp:Menu>

The Asp menu control renders to HTML when it is sent to a client’s browser.
For example, here is the code I get when I run it.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Untitled Page
</title><style type="text/css">
	.Menu2_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
	.Menu2_1 { color:White;font-family:Century Gothic;font-size:0.8em;font-weight:normal;text-decoration:none; }
	.Menu2_2 { width:100&#37;;font-weight:normal;font-size:0.8em;font-family:Century Gothic;color:White;border-width:1px;border-style:Solid;border-color:White;background-color:#960000; }
	.Menu2_3 {  }
	.Menu2_4 { padding:2px 5px 2px 5px; }
	.Menu2_5 {  }
	.Menu2_6 { padding:2px 5px 2px 5px; }
	.Menu2_7 { background-color:#0A3B9F; }
	.Menu2_8 {  }
	.Menu2_9 { background-color:#0A3B9F; }
	.Menu2_10 {  }
	.Menu2_11 { background-color:#0A3B9F; }
	.Menu2_12 { color:White; }
	.Menu2_13 { color:White;background-color:#0A3B9F; }
	.Menu2_14 { color:White; }
	.Menu2_15 { color:White;background-color:#0A3B9F; }

</style></head>
<body>
    <form name="form1" method="post" action="Default2.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwOTg4OTMyODVkZGGmJqsXPJRK745JZrq1l/0WN8Ln" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>


<script src="/sbox/WebResource.axd?d=gNuZ3XPQ4Bk26vJKXjlg_A2&amp;t=633080869352763358" type="text/javascript"></script>


<script src="/sbox/WebResource.axd?d=AjrZO9ux8yK_cBrkSbKz0A2&amp;t=633080869352763358" type="text/javascript"></script>
    <div>
    <a href="#Menu2_SkipLink"><img alt="Skip Navigation Links" src="/sbox/WebResource.axd?d=Ijh1ehOxjvFHBMVABEYfqQ2&amp;t=633080869352763358" width="0" height="0" style="border-width:0px;" /></a><table id="Menu2" class="Writing Menu2_2" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n0"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="Default.aspx">Home</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n1"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="products.aspx">Products</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n2"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="marketplace.aspx">Marketplace</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n3"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="startdesigning.aspx">Start Designing</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n4"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="prices.aspx">Prices</a></td>
			</tr>
		</table></td>
	</tr>
</table><a id="Menu2_SkipLink"></a>
    </div>
    

<script type="text/javascript">
<!--
var Menu2_Data = new Object();
Menu2_Data.disappearAfter = 500;
Menu2_Data.horizontalOffset = 2;
Menu2_Data.verticalOffset = 0;
Menu2_Data.hoverClass = 'Menu2_15';
Menu2_Data.hoverHyperLinkClass = 'Menu2_14';
Menu2_Data.staticHoverClass = 'Menu2_13';
Menu2_Data.staticHoverHyperLinkClass = 'Menu2_12';
// -->
</script>
</form>
</body>
</html>

Put widths in your menuitems, as so:

    <asp:Menu ID="Menu2" runat="server" BackColor="#960000" DynamicHorizontalOffset="2" Font-Bold="False"
                            Font-Names="Century Gothic" Font-Size="0.8em" ForeColor="White" Orientation="Horizontal"
                            StaticSubMenuIndent="10px" Width="100%" BorderColor="White" BorderStyle="Solid" BorderWidth="1px" CssClass="Writing">
                            <DynamicHoverStyle Width="20%" BackColor="#0A3B9F" ForeColor="White" />
                            <DynamicMenuStyle Width="20%" BackColor="#0A3B9F" />
                            <DynamicSelectedStyle Width="20%" BackColor="#0A3B9F" />
                            <DynamicMenuItemStyle Width="20%" HorizontalPadding="5px" VerticalPadding="2px" />
                            <Items>
                                <asp:MenuItem  NavigateUrl="~/Default.aspx" Text="Home" Value="Home"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/products.aspx" Text="Products" Value="Product Info">
                                </asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/marketplace.aspx" Text="Marketplace" Value="Designs"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/startdesigning.aspx" Text="Start Designing" Value="Designer"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/prices.aspx" Text="Prices" Value="Prices"></asp:MenuItem>
                            </Items>
                            <StaticHoverStyle BackColor="#0A3B9F" ForeColor="White" />
    </asp:Menu>

and you will notice that your HTML looks like this:

    <div>
    <a href="#Menu2_SkipLink"><img alt="Skip Navigation Links" src="/sbox/WebResource.axd?d=Ijh1ehOxjvFHBMVABEYfqQ2&amp;t=633080869352763358" width="0" height="0" style="border-width:0px;" /></a><table id="Menu2" class="Writing Menu2_2" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n0"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1" href="Default.aspx">Home</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n1"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1" href="products.aspx">Products</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n2"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1" href="marketplace.aspx">Marketplace</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n3"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1" href="startdesigning.aspx">Start Designing</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu2n4"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1" href="prices.aspx">Prices</a></td>
			</tr>
		</table></td>
	</tr>
</table><a id="Menu2_SkipLink"></a>
    </div>

You will notice that the menu items do not look like they are 20% of the width of your menu in a browser. This is because in the HTML above, the width 20% is specified in CSS, but the items are little tables nested in another table.

A designer would probably not be happy with this markup. The menu, as you have it now is static, and adding the overhead of a control is rather unnecessary, unless you are attaching your menu to a datasource. (I would rather use a repeater in this case)

This is just the way the control is. You can get CSS friendly versions, but these are 3rd party tools, or you must write them yourself.

At this point you may decide to just go with a CSS and HTML menu (Since all of your items are static), or use a repeater and create divs styled with css (if you’re doing a dynamic or datasourced menu).

But, if you want to use this control to learn more about it, here is some code to get you started.
This is asp code to replace the menu cod you posted:

    <asp:Menu ID="Menu2" runat="server" BackColor="#960000" DynamicHorizontalOffset="2" Orientation="Horizontal" CssClass="Writing">

                            <StaticMenuStyle CssClass="menu"  />
                            <StaticSelectedStyle CssClass="hover"  />
                            <StaticMenuItemStyle CssClass="normal"/>
                            <StaticHoverStyle CssClass="hover" />
                            <Items>
                                <asp:MenuItem  NavigateUrl="~/Default.aspx" Text="Home" Value="Home"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/products.aspx" Text="Products" Value="Product Info">
                                </asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/marketplace.aspx" Text="Marketplace" Value="Designs"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/startdesigning.aspx" Text="Start Designing" Value="Designer"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/prices.aspx" Text="Prices" Value="Prices"></asp:MenuItem>
                            </Items>

    </asp:Menu>

Notice that I replaced many of the control propertied with the cssclass property. This means you need to specify some css code.

Here is some CSS code that I wrote, totally ignoring your color scheme, and a lot of CSS best practices to get the point across quickly ;):

    <style type="text/css">
    .normal{
            position: relative;
            top:0;
            left:0;        
            width:150px;
            background-color:#0A3B9F;
            color:white;
            text-align:center;
    }
    menu{
            background-color:#0A3B9F;
            color:white;
            position: absolute;
            display:block;
            text-align:center;
    }
    .hover{
            align:center;
            position: relative;
            width:150px;
            color:white;
            background-color:blue;
            text-align:center;
    }
    .Writing{
            position:absolute;
            font-family:Century Gothic, sans-serif ;
            font-size:.8em; 
            color:White;
            width:100%;
    }
    </style>

That goes in the head of your asp page, or can be placed in your external css file and called in an import statement.

There you go. The items are now the same width (150px). You can go ahead and play with the css and see what changes to it do to your menu.

And if you feel limited by the tables, and want to know about 3rd party css controls, here’s a google result that looks promising http://www.asp.net/CSSAdapters/Default.aspx

Awesome explanation. One minor caveat: get the CSS Adapters from their new home @ http://www.codeplex.com/cssfriendly/ . Main advantage is that version is considerably easier to integrate with a site.

much appreciated fortunette, amazing explination