среда, 2 марта 2011 г.

Центрирование резинового горизонтального списка

Как отцентрировать горизонтальный “плавающий” список
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Centered navigation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    html, body {
        margin: 0; padding: 0;
        font-family:Tahoma, Arial, Helvetica, sans-serif;
        background-color: #fff;
    }
  
    .navi {
        width: 775px;
        position: relative;
        overflow: hidden;
        font-size: .8em;
        border: 1px dotted red;
        text-align: center;
        margin: 5px auto;
    }

    .navicontainer {
        float: left;
        left: 50%;
        position: relative;
        text-align: center;      
        border: 1px dotted green;
    }

    .wrpr {
        position: relative;
        left: -50%;
        float: left;
        list-style: none;
        margin: 0; padding: 0;
        border: 1px dotted blue;
    }

    .navi a, .navi li {
        float: left;
        padding: 10px; margin: 0;
        color: #3B6783;
        font-weight: bold;
        text-decoration: none;
    }

    .navi li {padding: 0; margin: 0;}

    .navi a:hover {
        text-decoration:none;
        background: lightblue url(navirobg.gif) repeat-x 0 0;
    }

    .navi li a:hover {
        background: lightblue url(navirobg.gif) repeat-x 0 0;
    }
    </style>
</head>
<body>
    <div class="navi">
        <div class="navicontainer">
            <div class="wrpr">
                <a href="#">Item # 1</a>
                <a href="#">Next item (# 2)</a>
                <a href="#">Do you have another item?</a>
                <a href="#">#4</a>
                <a href="#">What about more</a>
                <a href="#">Done</a>
            </div>
        </div>
    </div>
    <div class="navi">
        <div class="navicontainer">
            <ul class="wrpr">
                <li><a href="#">Item # 1</a></li>
                <li><a href="#">Next item (# 2)</a></li>
                <li><a href="#">Do you have another item?</a></li>
                <li><a href="#">#4</a></li>
                <li><a href="#">What about more</a></li>
                <li><a href="#">Done</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

* This source code was highlighted with Source Code Highlighter.

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)