Здравствуйте, люди добрые!
Помгите пожалуйста :)
Предположим есть меню. Я его делаю очень стандартно:Код 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. И, наконец, как сделать так, чтобы эта разность ширин слов не повлияла на общий вид меню? Т.е. чтобы во всех ситуациях слова меню не прыгали и не съезжали?
Всем спасибо огромное за помощь! :)
- 31.10.2012 21:48
- 31.10.2012 21:58
сделайте макет что нужно, дабы увидеть задумку на примере и сказать по верстке
- 01.11.2012 10:57
Чтобы картинка была по высоте текста я обычно делаю ссылку блочным элементом и на нее вешаю бэкграунд. Соответственно, 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;/*к примеру*/ }
« Пару вопросов. | Спам в Dle »
Похожие темы
Темы | Раздел | Ответов | Последний пост |
---|---|---|---|
Проблема с модулем с отоб ражение на главной | Joomla | 10 | 29.08.2012 12:48 |
Помощь с модулем. | Joomla | 1 | 16.06.2012 14:19 |
Помощь с модулем SEO PRO v.4.0 | DLE | 5 | 02.06.2012 01:55 |
Проблемы с модулем dude Smart Leech | DLE | 0 | 21.05.2012 03:13 |