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

Сообщений: 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	Подскажите конструктор форм для сайта

Новые темы	Объявления	Свободное общение
11:07 01.02. Апдейт 31.01 // Chrome готовит "чёрную метку" для ИИ? 06:34 Гугл пухнет от кеша, а нам - крошки. Разбор $114 млрд: Адсенс в минусе, Ютуб на подписках 01:09 Yahoo Scout: Нейро-привет из склепа. Реальный шанс на траф или мимо? 17:33 AntiBot Cloud - бесплатный скрипт и сервис защиты сайтов 15:14 Апдейт Яндекса 7 февраля. Пока серп трясет, некоторые по ботам плачут 15:10 Google Discover Core Update: Дискавер отделяют от поиска? 11:30 ЕС душит ТикТок: прощай бесконечная лента и RPM? Что с монетизацией?	10:22 Swapwatch.org — Мониторинг криптовалютных обменников 10:19 SwapPix.io - быстрый и безопасный обменник криптовалют. 15:12 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 12:38 Bankomat001 - Сервис обмена электронных валют 10:42 Рассылки СМС/SMS, Вайбер/Viber, Ватсап/Whatsapp, Телеграм/Telegram любой тематики по всему миру 09:36 Мониторинг обменников Сrypto-scout.io 05:29 Продам обменник криптовалюты, а также новый обменник под ключ с обучением. Скидки на скрипты обменника	11:10 Moltbook: Соцсеть для ботов, где людям закрыли рот. Началось? 11:02 Гильотина для классиков: Клод доедает физические книги 06:04 Кулеры и БП станут золотыми? Медь по 13 штук, олово в космосе 05:09 Точные прогнозы на футбол 23:45 Ставки на супер тренды в спорте 22:31 [AI] Бот за $600к советовал есть сыр с крысами. Нью-Йорк его (наконец-то) снес 13:38 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко