Прозрачный поиск


Прозрачный поиск

2538
9 из 10
Проголосовало: 6





Прозрачная форма поиска для сайтов uCoz.
Демо.


Установка:

Сначала ставите CSS код в Главная » Управление дизайном » Редактирование шаблонов » Таблица стилей (CSS)
Code
.form_s {background:url(img/form.png);height:31px;width:199px;}
.queryField {margin:8px 0px 0px 6px;width:170px;color:#fff;font-size:10px;background:none;border:none;float:left;}
.k_serch {background:url(img/form2.png);border:none;margin:9px 3px 0px 0px;width:13px;height:13px;float:right;}
.k_serch:hover {opacity:0.9;}


html код ставите туда гдн хотите видеть прозрачный поиск
Code
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" class="form_s">
<input type="submit" class="k_serch" id="sfSbm" value=""/>
<input type="text" name="q" value="Поиск" onfocus="if(this.value=='Поиск')this.value=''" onblur="if(this.value=='')this.value='Поиск'" class="queryField"/>
</form>




Авторство by ATRIUM
Автор публикации: Загрузка
Загрузка
ATRIUM, это его n материал
  • Всего комментариев: 12

Kelin
0
Kelin написал: Написано 29 мая 2012 в 18:55
Комментарий №5
На картинке нормально выглядело, но когда посмотрел демо - ужаснулся dry

ATRIUM
+2
ATRIUM написал: Написано 29 мая 2012 в 20:23
Комментарий №7
Почему? dry

Kelin
-2
Kelin написал: Написано 30 мая 2012 в 11:32
Комментарий №11
Некрасиво

Lacr1mosa
+2
Lacr1mosa написал: Написано 30 мая 2012 в 12:31
Комментарий №12
такто на белом фоне она и будет смотреться ужасно.....а вот на цветном (напимер синем, как у меня) будет норм

iliks
0
iliks написал: Написано 29 мая 2012 в 12:15
Комментарий №3
а вобще такой поиск даже красивее можно сделать на css3 только лупу картинку надо и все, да и сверстано на 3-ку.

ATRIUM
+3
ATRIUM написал: Написано 29 мая 2012 в 14:36
Комментарий №4
почему на 3?
а css3 я ещё незнаю sad

iliks
+3
iliks написал: Написано 29 мая 2012 в 20:24
Комментарий №8
Потому что много лишнего написал и растановка элементов оставляет желать лучшего.
Нужно понимать что css поисковые системы не видят, значит там то и можно творить что угодно а в html нужна предельная чистота.

поэтому первое что нужно переделать это стереть весь твой css
второе берем твой html в целом он почти правильный но...
удаляем в input классы и переставляем импуты местами и в первый дописываем id
Code

<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" class="form_s">  
<input type="text" id="inp" name="q" value="Поиск" onfocus="if(this.value=='Поиск')this.value=''" onblur="if(this.value=='')this.value='Поиск'"/>  
<input type="submit" id="sfSbm" value=""/>  
</form>

и пишим css
Code

.form_s {border: none;background: url('/img/form.png');margin: 0;height: 15px;width: 187px;padding: 8px 6px;}
.form_s>#inp {float: left;border: 0;background: none;font-size: 12px;margin: 0;padding: 0;line-height: 14px;width: 170px;color: white;outline: none;}
.form_s>#sfSbm {margin: 1px 2px 0 0;cursor: pointer;border: none;float: right;background: url('/img/form2.png');}


чем лучше? исчезла не последовательность, убраны лишние классы что сократило запись, и оптимизирована верстка

GhostlyP
0
GhostlyP написал: Написано 29 мая 2012 в 20:52
Комментарий №9
smile happy smile

ATRIUM
+2
ATRIUM написал: Написано 29 мая 2012 в 21:06
Комментарий №10
smile Спасибо приму к сведению когда буду делать следующую работу

BLAzER
-9
BLAzER написал: Написано 29 мая 2012 в 09:57
Комментарий №1
Неужели так тяжело картинки в архив залить?! Ну и какая куда?

iliks
+8
iliks написал: Написано 29 мая 2012 в 12:13
Комментарий №2
Не ужели так сложно хотябы азы css и html выучить?

LeKcUs
+2
LeKcUs написал: Написано 29 мая 2012 в 19:07
Комментарий №6
да, не мешало бы изучить хоть это для приличия.. dry

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 9
    Гостей: 7
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: