Хочу центрировать мою горизонтальную навигацию - PullRequest
Новая
       15

Хочу центрировать мою горизонтальную навигацию

0 голосов
/ 19 октября 2011

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

base_menu.html 

<ul id="toc">
        <li><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li>
        <li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li>
        <li><a href="{% url mmc.views.search_item %}"><span> Item Search</span></a></li>
        <li><a><span>Service orders</span></a><br/>
        <ul class="subnav">
                <li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a></li>
                <li><a href="{% url mmc.views.order_list_service 1 %}"><span>Delivery orders</span></a></li>
                <li><a href="{% url mmc.views.order_list_service 2 %}"><span>Collection orders</span></a></li>
        </ul>
        </li>
        <li><a><span>Collection/Delivery</span></a><br/>
        <ul class="subnav">
                <li><a href="{% url mmc.views.service_list 1 %}"><span>Delivery list</span></a></li>
                <li><a href="{% url mmc.views.service_list 2 %}"><span>Collection list</span></a></li>
        </ul>
        </li>
        <li><a><span>Admin Tools</span></a><br/>
        <ul class="subnav">
                <li><a href="{% url mmc.views.invoice_list %}"><span>Export for invoicing</span></a></li>
                <li><a href="{% url mmc.views.dbbackup %}"><span>Backup data</span></a></li>
        </ul>
        </li>
        <li><a href="{% url mmc.views.help_login %}" target="_blank" onclick="return showAddAnotherPopup(this);"><span>Help</span></a></li>
</ul>

base.css 

ul#toc {
    height: 2em;
    list-style: none;
    margin-left: 260px;
    padding: 0;
    position: relative;
    width: 100%;
}


ul#toc li{
    background:#ffffff url(../images/tab.png);
    float: left;
    margin: 0 1px 0 0;

}

ul#toc li#drop{
    background-color:#bce6c3;
    float: left;
    margin: 0 1px 0 0;

}
ul#toc span {
    background: url(../images/tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}

ul#toc a {
    color: #000000;
    height: 2em;
    float: left;
    text-decoration: none;
    padding-left: 10px;
}


ul#toc a:hover {
    background: url(../images/tab2.png);
    text-decoration: underline;
}

ul#toc a:hover  span{
    background: url(../images/tab2.png) 100% 0;

}

1 Ответ

1 голос
/ 19 октября 2011

Измените правило наценки для вашего ul в вашем css следующим образом: 

ul#toc{
     margin: 0 auto;}

Это позволяет браузеру автоматически выравнивать поля с любой стороны вашего элемента ul.задайте свой ul # toc фиксированную ширину, так как при ширине 100% он не может ничего центрировать, поскольку он соответствует всей ширине экрана.

...