Нарыл в коде ну очень интересную для меня штуку, обьясните плз

[BogusUA]

в коде одного дизайна (ставили чюжой сайт на движок), нарыли менюху, css ниже

/* -navigation- */
#navcontainer{
 width: 700px;
 height: 22px;
 position: relative;
/* text-align: center;*/
 background: url(menu-bg-ru.jpg) no-repeat;
/* margin-top: 10px; */
 margin-bottom: 20px;
 clear: both;
/* background-color: #fff;*/
}
#langmenu{
 position:absolute;
 top:10px;
 right:20px;
}
ul#nav{
 width: 400px;
 margin-left: 0;
 padding-left: 0;
}
ul#nav li{
 width: 70px;
 margin-left: 0;
 list-style: none none;
 display: inline;
 text-indent: -9999px;
}

#nav a {
 float:left;
 width: 70px;
 height: 22px;
 display: block;
 background: url(menu-bg-ru.jpg) no-repeat 0px 0px;
 text-align: center;
} 
#nav a:hover { 
 text-decoration: none;
/* background-position: center -20px; */
}
/*
#nav #nav-top a:hover,#sect-default #nav #nav-top a,#sect-archives #nav #nav-top a {
 background-position: 0px -45px;
}
*/
#nav #nav-home a {
 background-position: 0px 0px; 
}

#nav #nav-home a:hover,#sect-home #nav #nav-home a {
 background-position: 0px -21px; 
}

#nav #nav-library a {
 background-position: -70px 0px; 
}

#nav #nav-library a:hover,#sect-library #nav #nav-library a {
 background-position: -70px -21px; 
}

#nav #nav-gallery a {
 background-position: -140px 0px; 
}

#nav #nav-gallery a:hover,#sect-gallery #nav #nav-gallery a {
 background-position: -140px -21px; 
}

#nav #nav-order a {
 background-position: -210px 0px; 
}

#nav #nav-order a:hover,#sect-order #nav #nav-order a {
 background-position: -210px -21px; 
}

#nav #nav-contacts a {
 background-position: -280px 0px; 
}

#nav #nav-contacts a:hover,#sect-contacts #nav #nav-contacts a {
 background-position: -280px -21px; 
}

/* -navigation end- */

в странице код менюхи выглядит так

<div id="navcontainer">
 <ul id="nav">
 <li id="nav-home"><a href="/" title="На главную страницу - Кузня Свана ? изготовление доспехов и средневекового оружия.">Home</a></li>
 <li id="nav-library"><a href="library.html" title="Библиотека - Книги исторической тематики, мифы и легенды, истории о подвигах великих воинов и рыцарей, информация об изготовлении доспехов, оружия и прочего снаряжения.">Library</a></li>
 <li id="nav-gallery"><a href="gallery.html" title="Галерея - Примеры мастерских изделий, материал, качество">Gallery</a></li>
 <li id="nav-order"><a href="order.html" title="Заказать - Заказать изделие и методы доставки">Order</a></li>
 <li id="nav-contacts"><a href="contacts.html" title="Контакты">Contacts</a></li>
 </ul>
 </div>

при этом все меню сайта сделано одним рисунком , типа таким >>>НАЖМИ ЗДЕСЬ<<<

в итоге, менюха активная, подсвечивается =) и все без всяких событий =)

впринципе что просисходит я понимаю, но вот как это оно ХЗ, обьясните

всю страницу можно просмотреть тут

[Azadi]

Все просто. Есть картинка - http://www.fortochki.kiev.ua/cool_css/style/menu-bg-ru.jpg

Она кладется фоном для каждого пункта меню и просто сдвигается на определенное число пикселей по горизонтали при помощи свойства background-position. Для эффекта выделения эта же картинка сдвигается по вертикали на 21px.

Преимуществом такого способа создания меню является то, что используется всего одна картинка и не нужен JavaScript.

Недостатком считаю то, что данное меню является негибким и немасштабируемым, а при отключенных картинках его вообще не видно...

[BogusUA]

хи хи я так понимаю что на случай отключеных картинок там и написано что типа этого

Home

а то что оно не маштабируется так для меню впринципе не проблема, если оно небольшое =)

В общем я хотел собсно понять как почему при наведении на пункт меню поднимается только отмаштабированый кусок картинки а не вся нижняя часть ?

[Victor Ananiev]

Неа, там ваще ниче не написано, только текст и ссылка на английскую версию.

[Azadi]

В общем я хотел собсно понять как почему при наведении на пункт меню поднимается только отмаштабированый кусок картинки а не вся нижняя часть ?

Потому что в пункте меню создателями выделено столько места, сколько нужно именно под эту часть общей картинки

#nav a {
	width: 70px;
	height: 22px;

далее

хи хи я так понимаю что на случай отключеных картинок там и написано что типа этого

Home

а то что оно не маштабируется так для меню впринципе не проблема, если оно небольшое smile

Вот лично мне кажется, что шрифт слишком маленький. У мен плохое зрение и я знаю комбинацию клавишь Ctrl+"+" в FF. А увеличить шрифт не могу, т.к. картинка... Что я обычно делаю в такой ситуации? Правильно, закрываю к черту такую страничку.

А в случае отключенных картинок меню там все равно не видно. По крайней мере у меня

[Fu-tai]

Жуть а не меню