Фильтр по:
  

Как сделать такой поиск

Общая тема по вопросам верстке и дизайну...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz, Flesh  
Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы по верстке, дизайну, управлению и настройки модулей СMS от uCoz » Общая тема по вопросам верстке и дизайну... » Как сделать такой поиск
Как сделать такой поиск
Дата: Пятница, 25.03.2011, 11:26 |
KrAcAvChIK
Лейтенант
Группа: Пользователи
Сообщений: 49
Награды: 0
Репутация: 1
Статус: Offline


 как сделать вот такой поиск но только чтобы он был в блоке а не в шапке?

вот сайт на котором такой http://girl.at.ua/

Добавлено (25.03.2011, 11:25)
---------------------------------------------
нашёл css

Code
#search {float:right;width:204px;height:23px;padding:3px 5px;margin:12px 20px 0 0;background:url('/images/search.png') 0 0 no-repeat;border:none;display:inline;}
#search form {margin:0;padding:0;}
#search .schQuery input {width:160px;margin:0px 5px 0 0;padding:3px;border:none;font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;color:#999;float:left;border:none;background:none;display:inline;}
#search .schBtn input{float:right;display:inline;margin:0;height:22px;width:22px;overflow:hidden;text-indent:-10000px;background:none;color:#fff;border:none;cursor:pointer;}

Html
Code
<div id="search">
<div class="searchForm"><form onSubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="$HOME_PAGE_LINK$search/"><div class="schQuery"><input onBlur="if(this.value=='') this.value='Поиск...';" onFocus="if(this.value=='Поиск...') this.value='';" value="Поиск..." type="text" name="q" maxlength="30" size="20" class="queryField" /></div><div class="schBtn"><input type="submit" class="searchSbmFl" name="sfSbm" value="Найти" /></div></form></div>
</div>
</div>

но вот какая терь проблема

Добавлено (25.03.2011, 11:26)
---------------------------------------------
а надо чтобы получилося как на первом скриншоте

 
Дата: Воскресенье, 27.03.2011, 09:40 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Quote (KrAcAvChIK)
как сделать вот такой поиск но только чтобы он был в блоке а не в шапке?

Взять и сделать.
Если ты упорно думаешь что кто-то ЗА тебя это будет делать, то по любому - это буду не я.
Картинка вот:

Пример - есть что ещё? ..... Приложить немного усилия? - и то не можем, да?
.....

Одно дело помочь, и совсем другое, сделать за.

Прикрепления: 9075442.png (1.8 Kb)

 
Дата: Воскресенье, 27.03.2011, 12:00 |
KrAcAvChIK
Лейтенант
Группа: Пользователи
Сообщений: 49
Награды: 0
Репутация: 1
Статус: Offline


 likbezz, да всё я уже другое вытворил а терь другой вопрос...
В общем я сделал свой поиск и у меня почему то иконка на которую жмёшь и должен начинаться поиск вылезла за края формы поиска...а надо чтобы было как на первом скриншоте
вот так должно быть

а вот так как щас

html
Code
<div class="searchForm"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"><input type="submit" class="kp_serch" id="sfSbm" value="" /><div align="center" class="schQuery"><input onBlur="if(this.value=='') this.value='Поиск...';" onFocus="if(this.value=='Поиск...') this.value='';" value="Поиск..." type="text" name="q" maxlength="20" size="22" class="queryField" /></div></form></div>

css
Code
.queryField {border:3px solid #ccc; -moz-border-radius:3px;-webkit-border-radius:3px; border-radius: 3px;}
.kp_serch {background:url(/img/search.png) no-repeat;border:none;float:right;}
.kp_serch:hover {opacity:0.9;}
.kp_serch {cursor:pointer;}

 
Дата: Воскресенье, 27.03.2011, 14:55 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 KrAcAvChIK,
- читаю твои сочинения, как художественную литературу, считай - лесть, ибо развязка всегда неожиданна .... ))))
.... Так, почитаем.
Quote (KrAcAvChIK)
надо чтобы было как на первом скриншоте
вот так должно быть

Для класса "schQuery" - стилей нет, а он наверняка не просто так .... ))) Вот и думай. Намеки, да нет - практически готовые ответы дадены. .... Осталось стили подогнать....
Откуда копировал-то? .....
Не надоело? - может что нить своё сделаешь, оригинальное, с нуля - это гораздо интереснее, чем ковырять/приспосабливать чужой код.

Хотя, и чужой код ковырять бывает интересно .... )))

А чего, кстати, у меня нормально кажет ... вот, смотри ..... Ссылка ....

Прикрепления: 6909726.png (1.0 Kb)

 
Дата: Воскресенье, 27.03.2011, 15:17 |
KrAcAvChIK
Лейтенант
Группа: Пользователи
Сообщений: 49
Награды: 0
Репутация: 1
Статус: Offline


 likbezz, у тя так же как у меня показывает...и это я собирал с разных кодов поиск...


Прикрепления: 8664837.png (0.7 Kb)

Сообщение отредактировал likbezz - Воскресенье, 27.03.2011, 15:57
 
Дата: Воскресенье, 27.03.2011, 16:02 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Quote (KrAcAvChIK)
likbezz, у тя так же как у меня показывает...и это я собирал с разных кодов поиск...

Из под чего скрин?.
У меня под всем нормально. Даже в шестом ИЕ нормально, относительно, конечно .... )))) я не говорю уж про популярные браузеры ....


Прикрепления: 6541269.png (6.9 Kb)

 
Дата: Вторник, 29.03.2011, 13:51 |
KrAcAvChIK
Лейтенант
Группа: Пользователи
Сообщений: 49
Награды: 0
Репутация: 1
Статус: Offline


 да на опере у меня так sad

Добавлено (29.03.2011, 13:51)
---------------------------------------------
likbezz, не ты меня не понял я так тоже могу сделать мне надо чтобы внутри этой формы это кнопочка поиска была!!! dry

 
Дата: Вторник, 29.03.2011, 14:24 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Quote (KrAcAvChIK)
likbezz, не ты меня не понял я так тоже могу сделать мне надо чтобы внутри этой формы это кнопочка поиска была!!!

Вот так что ли?

- Да не проблема ... ) ...
Прикрепления: 2483309.png (1.4 Kb)

 
Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы по верстке, дизайну, управлению и настройки модулей СMS от uCoz » Общая тема по вопросам верстке и дизайну... » Как сделать такой поиск
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия