Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Делаем красивый поиск

Главная » Скрипты для uCoz » Делаем красивый поиск
Делаем красивый поиск для uCoz

Сейчас мы будем делать красивый поиск, он проверялся на всех браузерах!
Начнём!
1)Для начала я создал картинку которая будет фоном поиска (293х60/01.gif)

2)Далее нашел небольшой значок с лупой и сделал спрайт (68х120/1.png)

3)Это ставим там где будет наш поиск:
Code
<form action="http://Rucoz.com/news/" id="poisk" method="post">  
  <div style="position:relative;">  
  <input type="text" name="query" id="forma" value="search..." onfocus="if(this.value=='search...')this.value=''" onblur="if(this.value=='')this.value='search...'"/>  
  <input class="knp" name="sfSbm" type="submit" value="" />  
  <input name="a" value="14" type="hidden">  
  </div>  
  </form>

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; /* курсор в виде руки */  
  }
Просмотров: 1005 | Комментариев: 0 | Опубликовал: DizeL | Дата: 13.11.2010

 17.09.2009   

 

 Блок - софт для веб... 

 14.03.2010   

 

 flash часы 

 12.07.2010   

 

 Бот 

 11.11.2009   

 

 Предпросмотр темы ф... 

 06.11.2009   

 

 (Profile, лс...) на... 


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.