Menu Aligner au centre de la page

Question

Compte tenu de la structure du menu suivant:

<div id="smoothmenu1" class="ddsmoothmenu"> 
    <ul> 
     <li><a href="Default.aspx">Home</a></li> 
     <li><a href="About.aspx">About Us</a></li> 
     <li> 
      <a href="#">Automotives</a> 
      <ul> 
       <li><a href="#">Masking Film</a></li> 
       <li><a href="#">Promo Items</a></li> 
       <li><a href="#">Accessories</a></li> 
       <li><a href="#">External Protection</a></li> 
       <li><a href="#">Internal Protection</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Packaging</a> 
      <ul> 
       <li> 
        <a href="#">Cardboard boxes</a> 
        <ul> 
         <li><a href="#">Big Boxes</a></li> 
         <li><a href="#">Small Boxes</a></li> 
         <li><a href="#">Medium Boxes</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Paper bags</a></li> 
       <li><a href="#">Polythene bags</a></li> 
       <li><a href="#">Polythene layflat tubing</a></li> 
       <li><a href="#">Postall bags & packaging</a></li> 
       <li><a href="#">Protective Packaging</a></li> 
       <li><a href="#">Refuse sacks</a></li> 
       <li><a href="#">Retail</a></li> 
       <li><a href="#">Strapping</a></li> 
       <li><a href="#">Tapes</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Eco Friendly</a> 
      <ul> 
       <li><a href="#">Recycled bags</a></li> 
       <li><a href="#">Degradable bags</a></li> 
       <li><a href="#">Random bags</a></li> 
       <li><a href="#">Cotton bags</a></li> 
       <li><a href="#">Compostable bags</a></li> 
      </ul> 
     </li> 
     <li><a href="Design.aspx">Design Service</a></li> 
     <li><a href="Contact.aspx">Contact Us</a></li> 
     <li><a href="Offers.aspx">Offers</a></li> 
    </ul> 
    <br style="clear: left" /> 
</div> 

Tous les boutons de menu fière allure, mais ils sont aligné à gauche dans le récipient. Je ne peux pas savoir comment les centrer dans la barre de menu afin que, quelle que soit la largeur de la fenêtre du navigateur, ils sont toujours au milieu.

CSS pertinente est:

.ddsmoothmenu { 
    font: bold 12px Verdana; 
    background: #2773A0; 
    /*background of menu bar (default state)*/ 
    width: 100%; 
    background-image: url(../images/menuBG.jpg); 
    z-index: 9999; 
} 

.ddsmoothmenu ul { 
    z-index: 9999; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

/*Top level list items*/ 
.ddsmoothmenu ul li { 
    position: relative; 
    display: inline; 
    float: left; 
    z-index: 9999; 
} 

/*Top level menu link items style*/ 
.ddsmoothmenu ul li a { 
    display: block; 
    color: white; 
    padding: 8px 10px; 
    border-right: 1px solid #ffffff; 
    color: #2d2b2b; 
    text-decoration: none; 
    padding: 10px 30px 10px 30px; 
    font-size: 18px; 
    font-family: Arial; 
    font-weight: normal; 
    z-index: 9999; 
} 

* html .ddsmoothmenu ul li a { 
    /*IE6 hack to get sub menu links to behave correctly*/ 
    display: inline-block; 
    z-index: 9999; 
} 

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited { 
    color: white; 
} 

.ddsmoothmenu ul li a.selected { 
    /*CSS class that's dynamically added to the currently active menu items' LI A element*/ 
    background: #2773A0; 
    color: white; 
    z-index: 9999; 
} 

.ddsmoothmenu ul li a:hover { 
    background: #4FA2D2; 
    /*background of menu items during onmouseover (hover state)*/; 
} 

    /*1st sub level menu*/ 
.ddsmoothmenu ul li ul { 
    position: absolute; 
    left: 0; 
    display: none; 
    /*collapse all sub menus to begin with*/ 
    visibility: hidden; 
    z-index: 9999; 
} 

/*Sub level menu list items (undo style from Top level List Items)*/ 
.ddsmoothmenu ul li ul li { 
    display: list-item; 
    float: none; 
    background: #2773A0; 
    /*background of menu items (default state)*/ 
    z-index: 9999; 
    border-right: 0px; 
} 

/*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
.ddsmoothmenu ul li ul li ul { 
    top: 0; 
    border-right: 0px; 
    z-index: 9999; 
} 

/* Sub level menu links style */ 
.ddsmoothmenu ul li ul li a { 
    font: normal 13px Verdana; 
    width: 200px; 
    /*width of sub menus*/ 
    padding: 10px; 
    margin: 0; 
    border-right: 0px; 
} 

    /* Holly Hack for IE \*/ 
* html .ddsmoothmenu { 
    height: 1%; 
} /*Holly Hack for IE7 and below*/ 


/* ######### CSS classes applied to down and right arrow images ######### */ 

.downarrowclass { 
    position: absolute; 
    top: 17px; 
    right: 7px; 
} 

.rightarrowclass { 
    position: absolute; 
    top: 14px; 
    right: 5px; 
} 

/* ######### CSS for shadow added to sub menus ######### */ 

.ddshadow { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 0; 
    height: 0; 
    background: silver; 
    z-index: 89; 
} 

.toplevelshadow { 
    /*shadow opacity. Doesn't work in IE*/ 
    opacity: 0.8; 
    z-index:89; 
    filter:alpha(opacity=80); 
} 

Answer 1

Ici, vous allez, arrêtez maintenant à l'aide des tables pour la mise en page. Cette technique appartient à la poubelle de l'histoire. Goeducateyourselfonwhy vous vraiment ne devrait pas utiliser les tables ici. Maintenant sur comment centrer cela. Jetez un oeil à cette jsfiddle: http://jsfiddle.net/ezsZb/

La technique est fondamentalement ce qui est décrit ici: http://www.tightcss.com/centering/center_variable_width.htm. Rien de bien, c'est une technique assez courante. Le code du plugin est horrible, donc nous allons simplement jouer avec CSS et HTML ici à la place. En supposant que cette structure HTML:

<div id="smoothmenu1"> 
    <div id="wrapper"> 
     <ul id="innerul"> 
     ... 
     </ul> 
    </div> 
    <br style="clear: left" /> 
</div> 

En utilisant cette configuration:

mainmenuid: "wrapper", //menu DIV id 

Et échangeant les styles CSS autour de:

#smoothmenu1 { /* This used to be .ddsmoothmenu */ 
    font: bold 12px Verdana; 
    background: #414141; /*background of menu bar (default state)*/ 
    width: 100%; 
} 

#wrapper { 
    position: relative; 
    float: left; 
    left: 50%; 
} 

#innerul { 
    position: relative; 
    left: -50%; 
} 

Vous obtiendrez le résultat dont vous avez besoin. Voir: http://jsbin.com/anaho/.

PS: Envisager d'utiliser un autre plugin. La qualité du code pour celui-ci est très mauvais, et ce n'est pas très flexible.

Answer 2

margin-left: auto; marge droite: auto;

se rapportent à: http://www.maxdesign.com.au/articles/center/

Answer 3

laid, mais il fonctionne:

<table width="100%" align="center" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td> 
     <table width="0%" align="center" cellpadding="0" cellspacing="0"> 
      <tr> 
       <td align="center"> 
        <div id="smoothmenu1" class="ddsmoothmenu"> 
         <ul> 
          <li><a href="Default.aspx">Home</a></li> 
          <li><a href="About.aspx">About Us</a></li> 
          <asp:Literal runat="server" ID="topNav"></asp:Literal> 
         </ul> 
         <br style="clear: left" /> 
        </div> 
       </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
</table> 

Answer 4

ouvert ddsmoothmenu.js et recherche zIndex et changer

zIndex: 100-i 

à

zIndex: 9999-i 

aussi, ouvert ddsmoothmenu.ccs et ajouter z-index:9999; deux premiers éléments.