Была у меня одна такая задачка.
1. Есть форма
2. Форма на фоне картинки
3. Картинка — полупрозрачная png'шка
4. Форма (вместе с картинкой) движется — высовывается и засовывается.
Убрать бы хоть одно из условий — и никаких проблем. Но вот когда все они вкуче…
Для нормального отображения png-шки в ИЕ (ниже 7-го) юзаю jquery.pngFix. Для движения формы — jquery.ui.slider.
Все классно, но вот ИЕ!!!… в такой ситуации делает все поля формы, кроме селекта, неактивными. В общем — фиг напишешь что-то в формочке. Парилась я парилась с этим всем делом, и вот еще вчера засела на целый вечер. В нете решений (даже проблем таких) не нашла. В итоге села сама разбираться.
Уже и в jquery'вских библиотечках покопалась — интересно стало что там может быть нетак.
Потом поперебирала разные варианты — и картинка на бекграунде родительского для формы блока (идеальный и базовый вариант), и в отдельном блоке картинку вставляю, и картинку просто вставляю… в общем целый вечер строила гипотезы и пробовала варианты. В общем — то картинка на бекграунде не отображается, то форма неактивна, то прозрачность исчезает.
Я уже даже не ожидала, что очередной вариант сработает!
Так вот какое решение проблемы оказалось:
[div id=«form_wrapper»]
[div id=«form_image»][/div]
[form][/form]
[/div]
Суть в чем:
— from_wrapper осоздает один целый блок (можно задать ему местоположение и он же будет использоваться при движении картинки).
— form_image — собственно, бекграунд для формы (полупрозрачный). Для него и юзается pngFix(). Картинка ставится на фон дива.
— ну и сама форма.
form_image и сама форма у меня позиционированы абсолютно — кому где надо (картинка в самом топе — чтоб на весь блок была, форма — куда нужно сдвинута).
З.Ы.: может уже етсь где-то решение такой проблемы, тогда ткните меня носом… И еще — это мой первый топик здесь. Подумала просто, что может кому-то будет интересно и полезно. Но опыта в написании статей нет…
Примерчик
Вверху — неработающий вариант, внизу — работающий.
