Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » поиск
поиск
DellantДата: Воскресенье, 01.05.2011, 11:02 | Сообщение # 1
Говорун
Группа: Пользователи
Пользователь №: 79
Сообщений: 64
Награды: 2
Репутация: 3
Статус: оффлайн
хочу сделать для сайта необычный вид поиска чтобы вы поняли о чем речь вот :

bag

могли бы объяснить как это реализовть?



Прикрепления: 6274778.jpg(16.6 Kb)




special 4 you
 
вверх
cechДата: Воскресенье, 01.05.2011, 11:38 | Сообщение # 2
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Dellant, берешь див, у него в фон ставишь фон это поле, в див ставишь input, у input убираешь все, оставляешь только color и по необходимости padding. Лупу тоже в input, и все это хозяйство в целом в форму.
P.S. ничего не понял наверное)



 
вверх
nDiviDДата: Воскресенье, 01.05.2011, 12:07 | Сообщение # 3
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
cech, да все норм xD


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
DellantДата: Воскресенье, 01.05.2011, 13:32 | Сообщение # 4
Говорун
Группа: Пользователи
Пользователь №: 79
Сообщений: 64
Награды: 2
Репутация: 3
Статус: оффлайн
вот html
Code
<div id="search">  
  <form method="get" id="searchform1" action="/search/">  
  <input type="text" value="Поиск по сайту..." name="s" id="searchinput" />  
  <input type="submit" id="searchsubmit" value="Search" />  
  </form>  </div>

вот css

Code
.search_bg { float: left; margin-left: 10px; }
#search { color:#FFFFFF; padding:0; }
#search input { background: transparent; font-size:11px; color:#FFF; font-family:Tahoma, arial, verdana, courier; width:130px; background-repeat: repeat-x; background-position: top; background-color: #cbd6e6; height:20px; vertical-align:middle; margin: 0px; padding:7px 5px 0px 5px; border: 4px solid #4f6a8e; }
#search .input { width:66px; height:28px; background:none; border:none; vertical-align:middle; margin:5px 0px 0px 0px; padding:0; margin-left: 10px; }
#searchform { margin-right: 20px; margin-bottom: 15px; }

получается вотето:

- Как заменить кнопку Search на картинку лупы ?
- Когда нажимаеш на поле ввода, чтобы надпись "Поиск по сайту..." исчезала
- и чтобы он работал))) bag



Прикрепления: 9163467.png(7.7 Kb)




special 4 you
 
вверх
cechДата: Воскресенье, 01.05.2011, 16:03 | Сообщение # 5
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Dellant, не то, оставь мне psd сделаю.


 
вверх
DellantДата: Четверг, 05.05.2011, 19:51 | Сообщение # 6
Говорун
Группа: Пользователи
Пользователь №: 79
Сообщений: 64
Награды: 2
Репутация: 3
Статус: оффлайн
вот, картинки в прикриплении, заранее спасибо.



Прикрепления: 0540789.png(0.9 Kb) · 4630059.png(0.4 Kb)




special 4 you
 
вверх
cechДата: Четверг, 05.05.2011, 20:43 | Сообщение # 7
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн

CSS

Code

.search_form {width:185px;background:url("/images/search_inp.png") no-repeat;height:37px;}
.search_inp {float:left;width:135px;height:15px;margin:10px 0 0 8px;color:#f1f1f1;border:0;background:none;font-size:15px;}
.search_sub {float:right;background:url("/images/search_sub.png") no-repeat;width:24px;height:24px;border:0;cursor:pointer;margin-top:6px;}

HTML

Code
<div class="search_form">
    <form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/">
    <input type="submit" class="search_sub" id="sfSbm" value="" />
    <input type="text" name="q" maxlength="60" size="32" value="Найди мне..." onfocus="if(this.value=='Найди мне...')this.value=''" onblur="if(this.value=='')this.value='Найди мне...'" class="search_inp" />
    </form>
</div>

Картинки прикреплены ниже.
P.S. картинки не вах особенно для поля ввода, угловаты они у тебя)



Прикрепления: 5570902.png(0.9 Kb) · 9000285.png(0.4 Kb) · 0450464.png(5.0 Kb)




 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » поиск
  • Страница 1 из 1
  • 1
Поиск: