В этом уроке будем создавать красивый поиск для сайтов на ucoz. Я уже описывал как его сделать но то было не крособраузерно, сейчас сделаем поиск который будет смотреться одинаково во всех браузерах, лично я на это надеюсь, так как проверял в опере, лисе, хроме и ie, но думаю в остальных будет смотреться также.
1)Для начала я создал картинку которая будет фоном поиска (293х60/01.gif)
2)Далее нашел небольшой значок с лупой и сделал спрайт (68х120/1.png)
Я добавил див с position:relative для того чтобы выровнять кнопку с лупой при помощи position:absolute.
4)В css
Code
#poisk { background:url(images/01.gif) no-repeat; width:293px; /* ширина */ height:60px; /* Высота */ padding-top:17px; /* смещаем всё что внутри в низ, чтобы было ровно */ }
#forma { background:none; /* убираем белый фон */ font-size:18px; /* размер шрифта */ font-family:Verdana; /* Шрифт */ color:#bba78b; /* цвет шрифта */ margin-left:20px; /* смещаем в право слово search */ border:none; /* убираем обводку */ }
.knp { background:url(images/1.png) no-repeat; width:60px; height:60px; border:none; /* убираем обводку */ position:absolute; /* для того чтобы можно было сместить вверх */ top:-16px; /* Смещаем вверх кнопку с лупой */ }
.knp:hover { background:url(images/1.png) 0px -60px no-repeat; cursor:pointer; /* курсор в виде руки */ }
Теперь мы имеем симпотичный поиск, который можно изменить под ваш дизайн. Конечно я как сапожник без сапог, поэтому в пример поиска не берём этот сайт, так как тут он не крособраузерен, а сделать нормальный ещё долго руки не дойдут. Кстате здесь показан поиск для модуля "новости".
