locked
Center Horizontal Menu RRS feed

  • Question

  • User-934748391 posted

    Hi,

    I am using the SmallBusiness template from ASP.NET and developing a website, and I am using Css Adapter Menu try to get better control. But, for the bottom menu, no matter what I did, it just can not be centered.

    In the master page:

    <asp:Menu ID="FooterMenu" runat="server"
                                 DataSourceID="HeaderSiteMapDataSource"
                                 Orientation="Horizontal"
                                 MaximumDynamicDisplayLevels="0"
                                 CssSelectorClass="BottomMenu"  />

    In the CSS style sheet:

    .BottomMenu .AspNet-Menu-Horizontal ul
    {
     width:740px; 
     margin-left:auto;
     margin-right:auto;
     margin-top:1em;
     padding:.1em 0 2em 0;
     ;
     font-size:.8em;
     color:#999999;  
    }


    .BottomMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
    {
        display:inline;
        list-style:none; 
        padding:0 1em 0 0;
        background:none;
    }

    .BottomMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Leaf a:link,
    .BottomMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Leaf a:visited
    {
     text-decoration:underline;
     color:#999999;
    }

    .BottonMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
    {
     color:#666666;
     text-decoration:none;
    }

    I set the width, and set the margin to be auto according the information I found online, but it won't work. Please help, I have been trying for whole day, oh, I am using IE7.

    Thanks in advance.

    Madison

    2009.03.04

    Wednesday, March 4, 2009 10:59 AM

All replies

  • User1263371605 posted

    Hi,

    I am facing the same issue did u got any sol.


    Thanks

    Sarika 

    Sunday, March 21, 2010 7:02 PM
  • User1856559870 posted

    Hi Madison,

    This is the CSS I use for my footer (bottom) menu.

    .footer
    {
        clear: both;
        color: #a2a3a3;
        margin: 0;
        padding: 18px 0 0 0;
        text-align: center;
        vertical-align: middle;
        width: 100%;
    }


    I hope that helps!

    Monday, April 12, 2010 2:43 PM