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

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

Новые темы	Объявления	Свободное общение
14:13 Profit Pixels - In-House Форекс, Крипто, Трейдинг CPA Офферы \| Еженедельные Выплаты \| CPA до $950 10:09 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 21:07 Взрывной рост роботности в Метрике 18:33 Trafee.com – эффективная монетизация вашего дейтинг трафика 15:41 Adtrafico - Правильная партнёрская сеть под бурж трафик 22:12 Stixi.ru. и stixi.com 20:30 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options	14:51 Мощные прокси для вашего бизнеса! 12:17 Продам дешёвые домены (1$/штука) 10:58 BIGPROXY.SHOP - Резидентные Ротационные Backconnect Proxy USA EUROPA MIX [Безлимитный трафик] 10:17 Размещу ссылки/статьи на ваш сайт \| Рост ИКС \| XRumer 23.0.4 StrongAI 22:12 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 18:06 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 05:50 LunaProxy дешевый глобальный резидентный прокси $0,77/ГБ Ротирующийся прокси\|Собственный IP\|Безлимитный план	17:56 Точные прогнозы на футбол 20:09 Сколько сейчас стоит наполнение ИМ? 12:43 Куплю проигрышные букмекерские аккаунты 04:33 Половина скидок на распродажах — фейк 07:53 НейроБабушка наказывает мошенников 19:59 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 19:57 Пятница 13-ое: VK принял радикальное решение и закрыл доступ к порно контенту