Выровнять меню по центру страницы - PullRequest
2 голосов
/ 20 сентября 2010

Учитывая следующую структуру меню:

<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>

Все кнопки меню выглядят великолепно, но они выровнены по левому краю контейнера. Я не могу понять, как расположить их по центру в строке меню, чтобы независимо от ширины окна браузера они всегда были посередине.

Соответствующий CSS:

.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);
}

Ответы [ 4 ]

2 голосов
/ 20 сентября 2010

Вот, пожалуйста, теперь прекратите использовать таблицы для разметки. Эта техника принадлежит мусорному ведру истории. Иди обучай себя на почему ты действительно не должен использовать таблицы здесь. Теперь о том, как это отцентрировать. Посмотрите на это jsfiddle: http://jsfiddle.net/ezsZb/

Техника в основном то, что описано здесь: http://www.tightcss.com/centering/center_variable_width.htm. Ничего особенного, это довольно распространенная техника.


Код плагина ужасен, поэтому вместо этого мы просто поиграем с CSS и HTML. Предполагая эту структуру HTML:

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

Использование этой конфигурации:

mainmenuid: "wrapper", //menu DIV id

И обмен стилей CSS вокруг:

#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%;
}

Вы получите нужный вам результат. Смотри: http://jsbin.com/anaho/.

PS: с учетом использования другого плагина. Качество кода для этого кода очень плохое, и оно не очень гибкое.

1 голос
/ 01 февраля 2012

открыть ddsmoothmenu.js и найти zIndex и изменить

zIndex: 100-i

до

zIndex: 9999-i

также, откройте ddsmoothmenu.ccs и добавьте z-index:9999; к первым двум элементам.

1 голос
/ 20 сентября 2010

маржа налево: авто;Поля справа: авто;

см .: http://www.maxdesign.com.au/articles/center/

0 голосов
/ 20 сентября 2010

Ужасно, но работает:

<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>
...