[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Создание красивого поиска для сайтов на uCoz
gugaДата: Воскресенье, 21.03.2010, 15:30 | Сообщение # 1
Admin
Группа: Администраторы
Сообщений: 431
Награды: 2
Репутация: 45

Создание красивого поиска для сайтов на uCoz



В этом уроке будем создавать красивый поиск для сайтов на ucoz. Я уже описывал как его сделать но то было не крособраузерно, сейчас сделаем поиск который будет смотреться одинаково во всех браузерах, лично я на это надеюсь, так как проверял в опере, лисе, хроме и ie, но думаю в остальных будет смотреться также.

1)Для начала я создал картинку которая будет фоном поиска (293х60/01.gif)

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

3)Сам поиск
Code
<form action="http://kwiq.ru/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>


Я добавил див с 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; /* курсор в виде руки */
}


Теперь мы имеем симпотичный поиск, который можно изменить под ваш дизайн. Конечно я как сапожник без сапог, поэтому в пример поиска не берём этот сайт, так как тут он не крособраузерен, а сделать нормальный ещё долго руки не дойдут. Кстате здесь показан поиск для модуля "новости".

материал взят с 7ucoz

 
WariatoДата: Пятница, 16.12.2011, 22:30 | Сообщение # 2
Группа: Гости





Мне очень нравится шаблон сайта kwiq.ru
 
zessPrainiaДата: Воскресенье, 22.01.2012, 23:00 | Сообщение # 3
Группа: Гости





Hi!
Happy New Year!
Health, luck and love!

 
Selm-keyncДата: Пятница, 27.01.2012, 00:18 | Сообщение # 4
Группа: Гости





Текст перспективный, помещу сайт в избранное.
 
A-NomaДата: Воскресенье, 29.01.2012, 21:44 | Сообщение # 5
Группа: Гости





Замечательно, это очень ценный ответ
 
KWIQДата: Суббота, 04.02.2012, 20:12 | Сообщение # 6
Генералиссимус
Группа: Администраторы
Сообщений: 559
Награды: 5
Репутация: 27
<_<

Добавлено (04.02.2012, 20:12)
---------------------------------------------
Куда уж ценней)))

 
  • Страница 1 из 1
  • 1
Поиск:


ЛУЧШЕЕ НА САЙТЕ
ТОП 20-ка последних тем ТОП 20-ка читаемых тем ТОП 20-ка лучших материалов
  • Как качать с DepositFiles
  • Загляните на огонек.
  • Полезно
  • где купить качественные саженцы винограда?
  • Как сэкономить на бензине?
  • Привет всем форумчанам!
  • обратитесь к сетевому администратору для получения доступа
  • Красота. Здоровье. Молодость.
  • Новый Топ пользователей с аватарами для Ucoz
  • Простой и красивый вид формы опроса
  • Красивый информер "кто нас сегодня посетил" для Ucoz
  • Flash радио для сайта
  • Кровавая Мери (Пьяные разговоры) Угар и ржака
  • Обсудим РЖАКА, позитив)))
  • Alan Wakes American Nightmare прохождение
  • I Am Alive прохождение
  • Secret Files 3 прохождение
  • Lucius прохождение игры
  • Прохождение Последняя воля Шерлока Холмса
  • Самая успешная букмекерская контора России
  • Секрет игры новые земли в одноклассниках
  • Куда постить новости - база сайтов
  • Список сайтов где постить новости, постить на сайтах
  • Still Life 2
  • Ожидаемые новинки
  • Меню для UCOZ
  • ОБЩАЕМСЯ
  • загрузчик ntldr
  • Создание красивого поиска для сайтов на uCoz
  • Принимаем заказы! Обработка ФОТО в Photoshop CS
  • Скрипт Online Tv предоставлен сайтом ВидеоЗал
  • Memento Mori
  • МеГа ОбЗоР
  • Куда и как постить, чтобы качали файлы
  • Ответь на вопрос последнего игрока и задавай свой вопрос....
  • Moscow Racer: NoCD/NoDVD (Мини образ)
  • Как качать с DepositFiles
  • Самый огромный член в мире. Длина и размеры пенисов
  • Удаление баннеров с рабочего стола, разблокировка Windows
  • Все способы поднять рейтинг вконтакте бесплатно
  • Демотиваторы (50 фото) на КВИК
    Демотиваторы на квик (93 фото)
    Популярные фразы девушек (76 фото)
    Демотиваторы на КВИК очень смешной выпуск (20 фото)
    Замедленный удар по попке "ОНЛАЙН" и "СКАЧАТЬ"
    Демотиваторы КВИК (20 фото)
    А вот если с утра стояк, а в туалет надо. Инструкция. (8 фото)
    В метро без штанов 2011 только на КВИК
    Время ведьм / Season of the Witch (2010/CAMRip/1400mb)
    Девушки играют в волейбол на КВИК (19 фото)
    8 способов - как парни ходят в туалет (8 фото)
    Демотиваторы (50 шт)
    Демотиваторы самые коментируемые в интернете
    Демотиваторы пятничные (76 фото)
    Забавные фотографии с американских выпускных (91 фото)
    Необычные работы Эрика Йоханссона(Erik Johansson)
    Хатико: Самый верный друг / Hachiko: A Dog's Story (2009) ОНЛАЙН
    Dracula87 MultiBoot Recovery Master DVD 1.0 (12.01.2011)
    Интерны (2012) 6 сезон, Все серии смотреть онлайн
    Древние пришельцы. Все сезоны (2010 - 2011) HDRip + HDTVRip + HDTV
    Каталог-Молдова - Ranker, Statistics