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

Эффект hover, один вопрос по нему :)

M2
На сайте с 11.01.2011
Offline
341
mark2011
496

Зайдите на http://work.kreine.ru/catalog.php . Нажмите на "Чай" - открылось подменю. Поводите мышкой по этому подменю. На тексте меню реализован эффект hover, т.е. по наведению мышки появляется рисунок на всю ширину текста. Но одновременно с этим текст смещается куда-то влево.

Как избежать этого смещения? У меня CSS такой: 


.menu_item:hover

{

    width: 255px;

    height: 26px;

    background-image: url('../images/internal/menu_cursor.jpg');

	text-indent: 5px;

	left: -19px;

	position: relative;

}

Частично понимаю, что это из-за 


left: -19px;

но если это не написать, то сам рисунок по наведению будет съехавший вправо на эти 19px.

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
Руслан Исмаилов
На сайте с 30.03.2007
Offline
198
Руслан Исмаилов
#1

попробуйте так добавить padding:0 0 0 19px; и не забудьте изменить ширину. То есть из ширины блока вычесть отступ в 19 пикселей.

То есть так:

.menu_item:hover
{
width: 236px;
height: 26px;

background-image: url('../images/internal/menu_cursor.jpg');
text-indent: 5px;
left: -19px;
position: relative;
padding:0 0 0 19px;
}
M2
На сайте с 11.01.2011
Offline
341
mark2011
#2

musulman,

Спасибо! Лучше гораздо, но теперь текст чуток вправо смещается. Это паддингом регулируется, да?

C
На сайте с 04.02.2005
Offline
291
Chukcha
#3

menu_cursor.jpg - уменьшай на 19px

M2
На сайте с 11.01.2011
Offline
341
mark2011
#4

Всё, догнал из-за чего это.

C
На сайте с 04.02.2005
Offline
291
Chukcha
#5
mark2011:
Всё, догнал из-за чего это.

Поделись тайной :)

Руслан Исмаилов
На сайте с 30.03.2007
Offline
198
Руслан Исмаилов
#6

text-indent: 5px; скорее всего из за этого чудовище было)

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