Секрет тИЦ. От А до Я.

[narolskay]

Здравствуйте, люди добрые!

Помгите пожалуйста :)

Предположим есть меню. Я его делаю очень стандартно:

Код HTML:

<ul class="menu"> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> </ul>

Код HTML:

ul {list-style-type: none;}
ul.menu li {float: left;}

Это если базово. Ну там маргины ещё, цвет шрифта и тому подобное я тут опускаю, ибо не суть...

На это меню нужно по наведению мышки навешать картинку и изменить цвет шрифта. Вроде всё понятно, но возникают вопросы:

1. Событие hover вешать на саму ссылку или на LI?
2. Как добиться того, чтобы картинка была не по высоте текста, а по высоте блока меню?
3. Известно, что в меню слова могут быть разной длины. Как сделать так, чтобы картинка заполняла по ширине всё пространство? Т.е. не была фиксированной по ширине, а подстраивалась бы под слова меню?
4. И, наконец, как сделать так, чтобы эта разность ширин слов не повлияла на общий вид меню? Т.е. чтобы во всех ситуациях слова меню не прыгали и не съезжали?

Всем спасибо огромное за помощь! :)

[rawebmaster]

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

[Tairesh]

Чтобы картинка была по высоте текста я обычно делаю ссылку блочным элементом и на нее вешаю бэкграунд. Соответственно, hover делаю на ссылку. Чтобы картинка заняла по ширине все пространство надо делать ее повторяющейся: repeat-x.

Код:

li{
float:left;
padding:0;
margin:0;
}
a {
display:block;
background:url(bg.png) repeat-x left top;
height:20px; 
line-height:20px;/*Чтобы текст был посередине высоты*/
padding:0 10px;/*к примеру*/
}

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

[dancer28]

webguru,
1 hover вешай на ссылку.
2 Про текст ответил пингвин
3 используй rerpat
4 Не совсем потятно, но если ты о переносе слов на следующую строку из за того что оно не вмещается в блок то сократи длину или уменьшай шрифт

[Viktoria Zlata]

Ну вот смотрите, что по вёрстке получается:

Во-первых есть css:

Код HTML:

.menu {
    width: 984px;
    height: 65px;
    background-image: url('menu_bg.png');
}

.menu ul {
    list-style-type: none;
    width: 700px;
    margin: 0 auto;
}

.menu ul li { 
    float: left;
    margin-right: 54px;
    text-transform: uppercase;
    font-family: Arial;
    font-size: 12px;
    margin-top: 15px;

}

.menu ul li a {
    color: #974a10;


}

.menu ul li a:hover {
    color: #fff;
    background-image: url('menu_hover.png');
    background-repeat: repeat-x;
    height: 45px; 
    padding:20px 5px 15px 5px;

}

И есть HTML:

Код HTML:

 <div class="menu"> <ul> <li><a href="/">главная</a></li> <li><a href="/about/">о компании</a></li> <li><a href="/clients/">клиенты</a></li> <li><a href="/service_zone/">зона обслуживания</a></li> <li><a href="/contacts/">контакты</a></li> </ul> </div>

Вот такая очень простая вёрстка. Как бы она достаточно устойчивая, но что мне здесь не нравится:

1. При наведении на элемент меню, другие элементы, стоящие справа от того, на который наводим, смещаются вправо на несколько пикселей. Получается не очень хорошо.

2. На пункт "зона обслуживания" - ваще... каким-то удивительным образом выпадает из бэкграунда половина буквы "н" и полностью буква "и" в слове "обслуживания". Сразу скажу, что разместить данный пункт в две строки - не вариант, не по макету будет... надо как-то из указанной ситуации выходить.

Буду благодарен за объективные замечания по вёрстке и за помощь в ситуации.

[maz2003]

Конечно, вы же при наведении добавляете отступы.

Код:

.menu ul li a {
    color: #974a10;
    height: 45px; 
    padding:20px 5px 15px 5px;
display:block;

}

.menu ul li a:hover {
    color: #fff;
    background-image: url('menu_hover.png');
    background-repeat: repeat-x;

}

[Tropic]

А если их не добавлять, то картинка будет точно повторять контуры текста, мне так не надо. Нужно чтобы она на всю высоту была. И пару пикселей лишних в ширину.

[SocialproYt]

В общем, вот сайт-пациент, посмотрите пожалуйста...

[KVV]

http://pastebin.com/iVHfxPHz

лайн- хейджем регулируем относительное положение ссылок.

---------- Сообщение добавлено 10:40 ---------- Предыдущее 09:36 ----------

что-бы выполнить последний пункт № 4 нужно сделать так:
http://pastebin.com/BZ4a9m1V
из кода будет все понятно. :)

[iamemery]

Данный мануал работает в 2016 или уже все поменялось?