Уплывающий фон поисковой формы в шаблоне Wordpress

Дата: 12.01.2010 | Автор: Игорь Квентор | Рубрика: WordPress |

Тэги: , , ,

backgrskip.pngСпасибо за наводящий вопрос одному из читателей блога Вебсовет. Суть вопроса такова: в созданном по книге “3-х колоночный шаблон для Вордпресс” шаблоне ice pepper есть любопытный глюк, который проявляется только в браузере IE. Поисковая форма в данном шаблоне выполнена с применением фонового рисунка. Это довольно распространенный прием в шаблонах ВП, да и не только в них. И вот когда в поле ввода пишется достаточно длинный текст, превышающий размер самого поля, то фон съезжает влево, пока не исчезнет весь.

Выглядит довольно забавно, но впечатление от сайта портит конкретно. В чем же причина? Если посмотреть набор правил в файле css для формы поиска, то можно заметить, что фон прописан не для самой формы, а лишь для ее внутреннего элемента input с идентификатором #s. Это так же часто повторяющийся прием в шаблонах ВП:

#searchform {
overflow: hidden;
}
#s {
background: url(images/search.gif) no-repeat;
width: 131px;
height: 21px;
padding: 2px 5px;
margin: 10px 0 0 15px;
}

Чтобы избавиться от проблемы, нужно несколько видоизменить эти два набора правил. Например, вот таким образом:

#searchform {
background: url(images/search.gif) no-repeat;
width: 131px;
height: 21px;
}
#s {
background: transparent;
width: 120px;
margin: 3px 0 0 5px;
}

Что мы сделали. Во-первых, перенесли фон и размеры используемой картинки непосредственно к идентификатору формы (#searchform). Во-вторых, у идентификатора #s фон сделали прозрачным (transparent), убрали поля (padding), и поправили значения отступов (margin), добавив при этом размер элемента по ширине. Напомню, что этот идентификатор принадлежит элементу input формы. По ширине он должен быть чуть меньше, чем сама картинка фона. Например, 120px. Последнее телодвижение нужно для того, чтобы вводимый текст не вылезал за пределы фона вправо и, кроме того, он избавил нас от используемого ранее правила overflow:hidden; Значениями отступов (margin) можно регулировать взаимное расположение фона и вводимого текста.

Небольшой хинт: если в вашем листе стилей все еще не прописан общий сброс для рамок, отступов и полей (что я настоятельно рекомендую сделать), то для элемента input с идентификатором #s необходимо добавить правило border: 0; Иначе вы получите некрасивую рамку внутри вашей красивой картинки. Напомню, общий сброс пишется в самом начале листа стилей css таким вот образом:

* {border: 0; margin: 0; padding: 0;}

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Оставить комментарий