Подскажите как правильнее должен смотреться код меню с использованием графических кнопок.
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 |