Форум hotibo.ru

kenzo2 · 12.10.2012 10:47

Два дня сижу мучаюсь. Делаю верхнее меню спрайтами.

Вот код смены картинки
li#cat a{background-position: -201px 0; left: 201px;}
li#cat a:hover{background-position: -201px -63px;}

Почему-то ховер работает как надо, а в простой ссылке background-position: -201px 0 не отрабатывает, то есть координаты остаются 0 0. Не могу понять что тут перекрывает ее.

Вот тут http://sarma.irtur.ru/ Домен скоро сменится на нормальный, так что смысла рекламировать мне его нет. Дизайн не критиковать, это не ко мне

alemiks · #2 12.10.2012 14:26

почитайте про специфичность селекторов
у вас получается в селекторе ul#tmenu li a задано смещение фона 0 0 свойством background (а точнее явно не задано, но по умолчанию 0 0), специфичность этого селектора равна 0,1,0,3
далее вы задаёте смещение для каждого пункта меню с помощью, например, такого селектора li#cat a, у него специфичность 0,1,0,2. т.е. меньше, чем у общего, поэтому смещение не переопределяется
варианта три:
— увеличить специфичность, например, ul li#cat a
— объявить свойство !important
— разделить background на отдельные свойства, т.е. для ul#tmenu li a задать только background-image и background-repeat, а для отдельных пунктов задавать background-position
я обычно пользуюсь третьим вариантом

kenzo2 · #3 12.10.2012 19:54

Спасибо большое ! Я знал, что каждый следующий селектор перекрывает предыдущий, но что у них есть приоритеты как-то не догадывался.

Импортантом не хотелось пользоваться. А это помогло

увеличить специфичность, например, ul li#cat a

разделить background на отдельные свойства, т.е. для ul#tmenu li a задать только background-image и background-repeat, а для отдельных пунктов задавать background-position

у меня же вроде так и было

Отредактированно kenzo2 (12.10.2012 20:00)

Octane · #4 12.10.2012 20:10

Код:

#cat a:link, #cat a:visited {
background-position: -201px 0;
left: 201px;
}

alemiks · #5 12.10.2012 20:18

kenzo2 написал:

у меня же вроде так и было

нет, у вас используется общее свойство background

Код:

ul#tmenu li a {
  ...
  background: transparent url(images/tbtn_set.jpg) no-repeat;
}

kenzo2 · 28.10.2012 15:55

ок, тогда может еще кто подскажет что с левым меню в 6 ИЕ делать
во всех нормальных браузерах так

в 6 ИЕ меню хорошенько съезжает вниз

http://sarma.irtur.ru/templates/default/style.css

/*Левая панель*/
div#lpanel{
float:left;
width:240px;
margin-left:-100%;
text-align: center;
height: 463px;
background: transparent url(images/lbtn_bg.png) no-repeat;
}

сделал для него отдельный css-файл http://sarma.irtur.ru/templates/default/ie6.css пробовал выровнять через left, top вроде получилось, но при переходе на страницу с каталогом снова куда-то уезжает... сейчас ищу еще варианты

Отредактированно kenzo2 (28.10.2012 16:13)

Форум hotibo.ru

#1 12.10.2012 10:47

Посоветуйте, почему может не работать background-position?

#2 12.10.2012 14:26

Re: Посоветуйте, почему может не работать background-position?

#3 12.10.2012 19:54

Re: Посоветуйте, почему может не работать background-position?

#4 12.10.2012 20:10

Re: Посоветуйте, почему может не работать background-position?

Код:

#5 12.10.2012 20:18

Re: Посоветуйте, почему может не работать background-position?

kenzo2 написал:

Код:

#6 28.10.2012 15:55

Re: Посоветуйте, почему может не работать background-position?

Board footer