problem horizontaly centering a menu on webpage

  • Thread starter Thread starter Jeff
  • Start date Start date
J

Jeff

hi

asp.net 2.0

I wan thte menu to be horizontally centered on the webpage, but I want the
submenuitems to left aligned.
So I created a table cell with HorizontalAlign set to Center. With this
option set the menu was horizontaly centered as I wanted, except that also
submenuitems was centered too (not what I wanted). So then I tryed to add a
extra div around the menu (<div style="text-align:left; margin-left:auto;
margin-right:auto;">). But that didn't help either...

any suggestions?

Here is my markup:
<asp:TableCell BackColor="BlueViolet" ColumnSpan="2"
HorizontalAlign="Center">
<asp:LoginView ID="LoginView2" runat="server">
<AnonymousTemplate></AnonymousTemplate>
<RoleGroups>
<asp:RoleGroup Roles="Administrator">
<ContentTemplate>
<div style="text-align:left;
margin-left:auto; margin-right:auto;">
<asp:Menu ID="Menu1" runat="server"
SkinID="menu"
CssClass="menu"
DataSourceID="smdsAdministrator"
StaticDisplayLevels="2"
Orientation="Horizontal">
</asp:Menu></div>

skin:<asp:menu runat="server"
SkinId="menu"
BackColor="#f0f0f0"
ForeColor="#6B0808"
StaticMenuItemStyle-HorizontalPadding="5px"
DynamicHoverStyle-BackColor="#6B0808"
DynamicHoverStyle-ForeColor="#FFFFFF"
StaticSubMenuIndent="10px"
DynamicMenuItemStyle-HorizontalPadding="5px"></asp:menu>
 
I find it easiest to use the CSS Friendly adapters
(http://www.codeplex.com/cssfriendly) and use CSS to set up the different
elements. You have much more control.

You can use CSS with the standard controls, as well, but it is not as easy.

--
Gregory A. Beamer
MVP, MCP: +I, SE, SD, DBA

Subscribe to my blog
http://feeds.feedburner.com/GregoryBeamer#

or just read it:
http://feeds.feedburner.com/GregoryBeamer

********************************************
| Think outside the box! |
********************************************
 
when you set the alignment of a div, you are setting the aligmnent of its
content, not the div. you probably wanted to center the div, and leave its
content left aligned. to center a div you set its margins:

<div style="margin-left:auto;margin-right:auto;">

-- bruce (sqlwork.com)
 
Back
Top