locked
Centering issue with CSS Friendly Adapter and Horizontal Menu RRS feed

  • Question

  • User-114806852 posted

    I'm have a tough time trying to get my Menu to be centered using the CSS Friendly Adapters and a menu set to Horizontal Orientation. Below is the CSS I'm using for my navigation menu.

    #nav
    {
    background: #008080;
    width:100%;
    height:45px;
    }
    Here is my <div> that encapsulates the Menu Control. 
    <div id="nav"">
    <asp:Menu ID="NavigationMenu" runat="server" Orientation="Horizontal" CssSelectorClass="CssAdapterMenu" DataSourceID="NavSiteMapDataSource" style="margin: auto; text-align: center">
    </asp:Menu>
    </div>
    I've tried numerious combinations of margins and padding, but the menu always aligns around 100 or so pixels from the left no matter what I try it never moves.
    Does anyone have any suggestions on how I can get it to align centered? 
    Friday, October 12, 2007 10:36 PM

Answers

  • User478895623 posted

    You can’t center it directly like this; you have to do it manually in your stylesheet. There might be a simpler way, but In my stylesheet I have:

    .CssAdapterMenu .AspNet-Menu-Horizontal
    {
      margin-left: auto;
      margin-right: auto;
      width: 722px;
    }
    
    .CssAdapterMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
    {
      width: 722px;
    }
    
    /* The above width values are used to center the menu. The values should be just wide enough to accommodate the menu items. This is a menu with 6 items, so the above widths will be approximately 6x the width below. */
    
    .CssAdapterMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
    {
      text-align: left;
      white-space: nowrap;
      width: 120px;
      background-color: #bbbbbb !important;
    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 13, 2007 4:36 AM

All replies

  • User478895623 posted

    You can’t center it directly like this; you have to do it manually in your stylesheet. There might be a simpler way, but In my stylesheet I have:

    .CssAdapterMenu .AspNet-Menu-Horizontal
    {
      margin-left: auto;
      margin-right: auto;
      width: 722px;
    }
    
    .CssAdapterMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
    {
      width: 722px;
    }
    
    /* The above width values are used to center the menu. The values should be just wide enough to accommodate the menu items. This is a menu with 6 items, so the above widths will be approximately 6x the width below. */
    
    .CssAdapterMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
    {
      text-align: left;
      white-space: nowrap;
      width: 120px;
      background-color: #bbbbbb !important;
    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 13, 2007 4:36 AM
  • User-114806852 posted

    Thanks.

    Saturday, October 13, 2007 10:02 PM