How to set width of menuitem

  • Thread starter Thread starter Julia B
  • Start date Start date
J

Julia B

Hi

I've got an menu control on a webpage which I've managed to work out how to
populate with menuitems dynamically through code depending on user rights.
However I can't seem to be able to set the menuitems widths. The menu control
width is set to 100%, but the items are not horizontally equidistant, so look
pretty rubbish.

Any way of sorting this out? My code is as follows:

<asp:Menu ID="MenuApplication" runat="server" EnableViewState="true"
BackColor="#bbb7b5"
DynamicHorizontalOffset="0" Font-Names="Verdana"
Font-Size="0.8em" ForeColor="#d2481b"
Orientation="Horizontal" StaticSubMenuIndent="10px"
Width="100%">
<StaticMenuItemStyle Font-Bold="True" Font-Names="Verdana"
Font-Size="Small" HorizontalPadding="0px"
VerticalPadding="2px" />
<StaticSelectedStyle BackColor="#bbb7b5" />
<DynamicHoverStyle BackColor="#65605c" ForeColor="White" />
<DynamicMenuStyle BackColor="#bbb7b5" BorderStyle="Solid"
BorderColor="#D7451A" BorderWidth="1px" />
<DynamicSelectedStyle BackColor="#65605c" />
<DynamicMenuItemStyle HorizontalPadding="0px"
Font-Names="Verdana" Font-Size="Small"
VerticalPadding="2px" />
<StaticHoverStyle BackColor="#bbb7b5" ForeColor="White" />
<Items >
</Items>
</asp:Menu>

Dim parentItem As MenuItem
Dim childItem As MenuItem
'parent home
parentItem = New MenuItem("Home", "Home", "", "~/Home.aspx")
Me.MenuApplication.Items.Add(parentItem)
'parent help
parentItem = New MenuItem("Help", "Help", "", "~/Help.aspx")
Me.MenuApplication.Items.Add(parentItem)
'parent create requests
parentItem = New MenuItem("Create Requests", "Create
Requests", "", "")
Me.MenuApplication.Items.Add(parentItem)
childItem = New MenuItem("New Person", "New Person", "",
"~/xxxx.aspx")
Me.MenuApplication.FindItem("Create
Requests").ChildItems.Add(childItem)
childItem = New MenuItem("Change", "Change", "",
"~/xxxx.aspx")
Me.MenuApplication.FindItem("Create
Requests").ChildItems.Add(childItem)
childItem = New MenuItem("Termination", "Termination", "",
"~/xxxx.aspx")
Me.MenuApplication.FindItem("Create
Requests").ChildItems.Add(childItem)
'parent admin
If Session("CurrentUserRole") = "4" Then
parentItem = New MenuItem("Admin", "Admin", "", "")
Me.MenuApplication.Items.Add(parentItem)
childItem = New MenuItem("Users", "Users", "",
"~/xxxx.aspx")

Me.MenuApplication.FindItem("Admin").ChildItems.Add(childItem)
childItem = New MenuItem("Accounts", "Accounts", "",
"~/xxxx.aspx")

Me.MenuApplication.FindItem("Admin").ChildItems.Add(childItem)
End If

Thanks in advance
Julia
 
Set a style for the control itself to set { table-layout:fixed; } this
should do the trick.
 
Thanks very much for your response. Could you be a bit more specific please,
I don't really know anything much about styles?

Julia
 
You need to lookup CSS ( Cascading style sheets and learn a little about
them ) but in a nutshell.

Elements can be assigned styles which can be set to be selected either in an
external style sheet or in the page itself, optionally style can be added to
the element themselves.

styling an element IE inline

<myElement style="width:20px;" >

Either on the sheet or externally

<myElement class="myStyle"


Your menu properties will allow you to set the class name for the menu
control or various elements within it. So the broad brush steps are these.

1.) Add a style sheet in to your page and add a style like this to the style
sheet.

.MyMenuClass { table-layout:fixed; }


2.) Set the menu properties

cssclass = MyMenuClass.


HTH
 
Back
Top