Эффект перекатывания, очередная проблема с версткой.

Nikitoz
На сайте с 11.09.2006
Offline
21
827

Сделал эффект перекатывания через стили (при наведении на текст меню меняется кнопка рядом) http://promo.ra-hollywood.ru/indexrol1.html. Пытаюсь сделать так, чтобы картинки кнопок брались из одного файла. Проблема в том, как при этом отображают браузеры. Размер картинки в пикселях по вертекали 44, по горизонтали 23. Делаю так:

#menu a {

background: url('http://promo.ra-hollywood.ru/img/knop.JPG');

background-position:right 0px;

background-repeat: no-repeat;

display: block;

height: 22px;

}

#menu a:hover {

background: url('http://promo.ra-hollywood.ru/img/knop.JPG');

background-position:right -22px;

background-repeat: no-repeat;

}

Mozila Firefox отображает в принципе нормально, только вот на пункте "Маркетинговые исследования" кнопка висит в правом верхнем углу, а хотелось бы сделать по центру.

IE похоже самостоятельно увеличивает размер бэкграунда по высоте, когда текст не влазит и сам центрует картинку, забивая на параметр height: 22px;, поэтому там "вырезается" еще кусок красной кнопки.

Как сделать, чтоб нормально отображалось и при этом картинки грузились из одного файла?

Kolyaj
На сайте с 28.03.2006
Offline
69
#1

Я вот одного не понимаю, вы откуда термин-то такой взяли "эффект перекатывания"? Что и куда там перекатывается?

По теме. ИЕ и остальные по разному обрабатывают переполнение блока: ИЕ вытягивает блок, остальные оставляют размеры блока нормальными, а содержимое "вываливается" (как собственно и должно быть). Если у вас предполагается различная высота пунктов меню, то изначально будет затруднительно сделать кнопки в одной картинке.

Непонятно зачем вам такой геморрой (кнопки в одной картинке) нужен для обычного меню. Я использую такой трюк для кнопок, но это компоненты на JavaScript, которые для обычного сайта излишни.

Nikitoz
На сайте с 11.09.2006
Offline
21
#2
Kolyaj:
Я вот одного не понимаю, вы откуда термин-то такой взяли "эффект перекатывания"? Что и куда там перекатывается?

По теме. ИЕ и остальные по разному обрабатывают переполнение блока: ИЕ вытягивает блок, остальные оставляют размеры блока нормальными, а содержимое "вываливается" (как собственно и должно быть). Если у вас предполагается различная высота пунктов меню, то изначально будет затруднительно сделать кнопки в одной картинке.

Непонятно зачем вам такой геморрой (кнопки в одной картинке) нужен для обычного меню. Я использую такой трюк для кнопок, но это компоненты на JavaScript, которые для обычного сайта излишни.

Отсюда взял http://www.htmlbook.ru/content/?id=110 , перекатывается рисунок. :)

Да подтормаживает маненько, когда с разных грузится... Когда в разных картинках с Мозилой тоже проблема (именно, что текст вываливается из блока), а IE нормально отображает, просто увеличивая размер.

Как проще можно сделать чтобы в Мозиле кнопки тоже были по центру, пусть даже когда картинка подгружается из разных файлов? Я вижу только способ - для каждого различного пункта меню задавать свою высоту.

deedee
На сайте с 13.06.2006
Offline
118
#3
Да подтормаживает маненько, когда с разных грузится...

Я в таких случаях делаю две картинки, и вторую картинку (чтобы не подтормаживала) подгружаю в невидимый div

Kolyaj
На сайте с 28.03.2006
Offline
69
#4
Nikitoz:
Отсюда взял http://www.htmlbook.ru/content/?id=110 , перекатывается рисунок.

Но эффекта, как такового, нет. Впрочем это неважно.

Nikitoz:
Как проще можно сделать чтобы в Мозиле кнопки тоже были по центру, пусть даже когда картинка подгружается из разных файлов?

http://loc.stack.ru/projects/CSS2/colors.html#propdef-background-position

Указать background-position: right center; Но честно говоря не знаю, как будет себя вести при разных высотах блоков.

Nikitoz
На сайте с 11.09.2006
Offline
21
#5
deedee:
Я в таких случаях делаю две картинки, и вторую картинку (чтобы не подтормаживала) подгружаю в невидимый div

Это как сделать?

Nikitoz
На сайте с 11.09.2006
Offline
21
#6

Блин, подтормаживает все-таки. Есть какие-нибудь варианты, чтоб картинки грузились из одного файла и их можно было выровнять, в разных браузерах относительно текста?

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