VPF::Подскажите правильность вёрстки меню

virus3003

Дата 14.6.2014, 13:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 22.2.2013

Репутация: нет
Всего: нет

Подскажите как правильнее должен смотреться код меню с использованием графических кнопок.

C точки зрения всех ГОСТОВ вёрсти кокой вариан правильнее, или есть более правильный чем эти?

Цитата

Вариант 1

HTML пример позиционирования для 1 кнопки k1-K6
<div id="menu">
    <a href="/" class="k1">
    </a><a href="uslugi.html" class="k2">
    </a><a href="article.html" class="k3">
    </a><a href="otzyv.html" class="k4">
    </a><a href="down.html" class="k5">
    </a><a href="contacts.php" class="k6">
    </a>
</div>

Css
div#menu {
     width: 100%;
  text-align:center;
  white-space: normal;
}

div#menu a {
     display: inline-block;
     width: 162px;
     height: 44px;
     background-image:url("img/menu.png");
}

a.k1 {
     background-position:0 0;
}
    a.k1:hover {
     background-position:162px 0;
}

Вариант 2

<ul id="menu">
    <li><a href="/" class="k1"></a></li>
    <li><a href="uslugi.html" class="k2"></a></li>
              <li><a href="article.html" class="k3"></a></li>
    <li><a href="otzyv.html" class="k4"></a></li>
    <li><a href="down.html" class="k5"></a></li>
    <li><a href="contacts.php" class="k6"></a></li>
</ul>

css

ul#menu {
    margin: 0;
    padding: 0;
    line-height: 0;
}
#menu li {
    list-style: none;
                display: inline;
    margin-right: -4px;
}
#menu a {
     display: inline-block;
     width: 162px;
     height: 44px;
     background-image:url("img/menu.png");
}

a.k1 {
  background-position:0 0;
}
    a.k1:hover {
               background-position:162px 0;
}

картинка http://s019.radikal.ru/i605/1406/e7/59900da0096b.png

s1lver

Дата 19.6.2014, 13:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Полагаю, что сейчас актуально использовать такую структуру (для простого меню)

Код


<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>

--------------------

Я собрался жить вечно - пока все идет нормально!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »