Фатальная ошибка на стра...

[Romzez]

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

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

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

Код 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. И, наконец, как сделать так, чтобы эта разность ширин слов не повлияла на общий вид меню? Т.е. чтобы во всех ситуациях слова меню не прыгали и не съезжали?

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

[cher4543]

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

[Romzez]

Чтобы картинка была по высоте текста я обычно делаю ссылку блочным элементом и на нее вешаю бэкграунд. Соответственно, 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;/*к примеру*/
}

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

[oroom]

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