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

Сообщений: 26 Регистрация: Окт 2010

14 Июня 2014 14:59

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

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

[quote]

Вариант 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;
}

[/quote]

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

Валентин

Сообщений: 621 Регистрация: Май 2010

14 Июня 2014 16:04

второй вариант правильный

инвестиции

Dexter

Сообщений: 395 Регистрация: Дек 2013

14 Июня 2014 16:26

Второй вариант, это более правильно с точки зрения семантики.Только не:
#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" smile;)

;
}
а

#menu li {
list-style: none;
float:left;
}

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

;
}

Изменено: Dexter - 14 Июня 2014 16:30

Мои услуги: Создание и разработка сайтов на Wordpress/фреймворках, создание шаблонов на WP, любая верстка по макету и без, разработка функционала. skype: sonicks12, email: spklkr@yandex.ru

virus_ostr

Сообщений: 26 Регистрация: Окт 2010

14 Июня 2014 17:43

Dexter, спасибо всё понял)))
Вот ещё из книги цитата, про решётку# не пойму пишут, что не нужна ставить если ид, но так не работает. И самое интересное в примере решётка есть, без неё не работает, косяк в книге выходит, или я чтот непонимаю. или опечатка гдего.
Синтаксис применения идентификатора следующий.
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
При описании идентификатора вначале указывается символ решетки (#), затем идет имя
идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ
дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В
отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде
документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в качестве атрибута тега
используется id, значением которого выступает имя идентификатора (пример 1.33). Символ решетки
при этом уже не указывается.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Идентификаторы</title>
<style type="text/css">
#help {
position: absolute; /* Абсолютное позиционирование */
right: 20px; /* Положение от правого края */
top: 50px; /* Положение от верхнего края */
width: 225px; /* Ширина блока */
padding: 5px; /* Поля вокруг текста */
background: #f0f0f0; /* Цвет фона */
display: none; /* Скрыть */
}
</style>
</head>
<body>
<p><a href="#"
onclick="document.getElementById('help').style.display='block'">
Справка</a></p>
<div id="help">
Эта справка помогает в случае, когда вы находитесь в осознании того
факта, что совершенно не понимаете, кто и как вам может помочь. Именно
в этот момент мы и подсказываем, что помочь вам никто не сможет.
</div>
</body>
</html>

Изменено: virus_ostr - 14 Июня 2014 17:49

Dexter

Сообщений: 395 Регистрация: Дек 2013

14 Июня 2014 18:49

Что Вам сказать: юзайте jQuery smile:)

Валентин

Сообщений: 621 Регистрация: Май 2010

14 Июня 2014 20:30

вообще-то правильно вот так:

Код

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

а на ховер подгружать только красную рамочку

10.10.2023 23:35	Подскажите шаблоны сайтов
05.10.2023 15:17	Подскажите ТОП 5-10 ИМ с современным дизайном?
28.02.2021 23:08	Подскажите нужно ли открытие каталога на сайте по наведению или лучше сделать по клику?
13.10.2019 17:18	Подскажите cms вопрос-ответ или подобное.
08.06.2019 01:41	Подскажите конструктор форм для сайта

Новые темы	Объявления	Свободное общение
16:00 РСЯ и тормоза сайта: Яндекс начал штрафовать за плохой PageSpeed? 15:56 SEO под нейро 15:53 Трафик пробил дно? Худший январь за 10 лет и внезапный рост продаж с Bing 15:50 Яндекс туда же: "Нейро" отжал 50% первого экрана. Органический трафик падает 15:49 Плагин ответа 15:44 01.02. Апдейт 31.01 // Chrome готовит "чёрную метку" для ИИ? 09:49 Исходящие ссылки из файлов .swf	18:39 SellBuycoin.io - надежный проводник в мир обмена криптовалют на фиат и наличные по РФ! 17:25 SMS.PRO - площадка для продажи твоих номеров 16:14 Все услуги в Телеграм 14:16 Nexulume.com Обменник без AML и KYC 13:43 Anonflare - Приватные IPv4 прокси от 0.39 USD 10:52 Mixmasters - Exchange without AML and KYC 10:29 Admaker.tech - Конструктор ботов \| Магазин \| Подписки \| Обратная связь	16:35 [AI] Бот за $600к советовал есть сыр с крысами. Нью-Йорк его (наконец-то) снес 15:38 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 09:05 Точные прогнозы на футбол 05:31 Ставки на супер тренды в спорте 17:02 Gartner обещал смерть SEO к 2026 году. Открываем метрику и проверяем 08:25 Отвратительное поведение 11:00 Кто может дать инвайт на WebMasters?