Форум Сайтостроение Веб-строительство

Резиновое меню

AS
На сайте с 10.07.2012
Offline
22
anton_simf
858

Добрый день!

Подскажите пожалуйста как сделать резиновые кнопки в момент hover(наведения),

Вот код меню:

<ul class="menu">
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Меню</span></a></li>
<li><a href="#"><span>Карта сайта</span></a></li>
<li><a href="#"><span>Главный контент сайта</span></a></li>
</ul>

Вот резиновые кнопки:

ul.menu, li{
margin:0px;
padding:0px;
list-style:none;
}
ul.menu{
display:block;
text-align:center;
}
li, a, span{
display:inline-block;
line-height:30px;
}
li{
padding-left:6px;
background:url(!/lb.png) no-repeat left top;
}
a{
padding-right:7px;
background:url(!/rb.png) no-repeat right top;
}
span{
background:url(!/cb.png);
}

Как необходимо продолжить код для того чтобы при наведении у меня менялась картинка на другую, заготовка картинок тоже есть. настрочил типа такого кода:

li:hover{
padding-left:6px;
background:url(!/lb.png) no-repeat left bottom;
} 
a:hover{
padding-right:7px;
background:url(!/rb.png) no-repeat right bottom;

} 
span:hover{
background:url(!/cb.png) bottom;
}

Только фигня вот в чем, при наведении на li отображается только её картинка, при наведении на a отображается картинка и li и a, а при наведении на span все отлично, как можно совместить все три картинки чтобы при наведении отображались все картинки как при наведении на span. О замудрил, надеюсь не сильно и все понятно!))

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#1

В адресах картинок восклицательный знак что значит?))

ИЕ насколько я знаю, только для тега "a" поддерживает hover, лучше в данном случае обратиться к верстальщику)))

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
Geers
На сайте с 12.04.2011
Offline
487
Geers
#2

Так, не?


li a:hover {}

span a:hover {}

и т.д.

Desesperada
На сайте с 11.10.2010
Offline
77
Desesperada
#3

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

Создание/наполнение сайтов ICQ 7860919 Принимаю предзаказы на сателлиты/гс в индексе
AS
На сайте с 10.07.2012
Offline
22
anton_simf
#4

дани мапов : Восклицательный знак это название папки где хранятся картинки, а псевдокласс hover можно использовать к любому тегу.

---------- Добавлено 22.05.2014 в 10:48 ----------

Geers:
Так, не?

li a:hover {}

span a:hover {}


и т.д.

Не так не катит!

---------- Добавлено 22.05.2014 в 10:49 ----------

Desesperada:
на рабочих исходниках выложите, подскажу.

Весь код я выложил, вы имеете ввиду три картинки?

Здесь на searche можно выложить?

Google Image Search не Google запустил три нововведения Google объяснил, что понимается
maldivec
На сайте с 04.11.2008
Offline
160
maldivec
#5

Во первых подход к css у вас ужасен.

Хотя бы каскадом пользуйтесь! Иначе задолбаетесь переопределять стили для тех же "a", "span", "li"...

А по теме - ховер для li задавайте, а остальные элементы через каскад и наследование - http://codepen.io/bazhenov/pen/HGkxq

li:hover {}

li:hover a{}

li:hover span{}

PS. И еще про спрайты в css погуглите, иначе такие штуки плохо работают - с задержкой на загрузку картинок для ховера. Да и вообще, меньше запросов к серверу.

PPS. Да и вообще, таких меню в интернете и статей про их верстку миллион. Вы хоть пробовали посмотреть? ))

Яндекс позволил управлять дизайном Пять веских причин сделать В Одноклассниках появилось распознавание
AS
На сайте с 10.07.2012
Offline
22
anton_simf
#6
maldivec:

PS. И еще про спрайты в css погуглите, иначе такие штуки плохо работают - с задержкой на загрузку картинок для ховера. Да и вообще, меньше запросов к серверу.

PPS. Да и вообще, таких меню в интернете и статей про их верстку миллион. Вы хоть пробовали посмотреть? ))

Благодарю за помощь и конечно же за советы обязательно приму к сведению!

Я просто только как второй месяц изучаю css, как говорится только вникаю.

Пробовал искать, как только не вводил в поисковике нечего толкового не нашел, объясняют резиновое меню но только без hovera.

Еше раз благодарю, все отлично работает!!!:)

Где купить .ORG без Как убрать бан от Для Владельцев Партнерских программ
дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#7

anton_sims, да, щас глянул, только к ИЕ 6 это относится.

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