-
SuBbI
- Сообщения: 161
- Зарегистрирован: 02.01.2010
Код: Выделить всё
<div style="position: absolute; top: 6px; right: 17px;">
<form id="quick-search" action="" method="post" onsubmit="
$(this).attr('action', $('#search-action').val());
var txt=$('#search-text').val(); return !(txt=='поиск...' || !txt);
">
<input type="hidden" name="max" value="1" />
<input type="hidden" name="to" value="1" />
<input id="search-text" type="text" name="nm" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." class="hint" style="width: 120px;" />
<select id="search-action">
<option value="tracker.php#results" selected="selected"> по трекеру </option>
<option value="search.php"> по форуму </option>
</select>
<input type="submit" class="med bold" value="»" style="width: 30px;" />
</form>
</div>
иимеется код поиска,подскажите как есго сверстать картинкой?
-
Вложения
-
-
Distructor
- Администратор
- Сообщения: 1607
- Зарегистрирован: 28.12.2009
Код: Выделить всё
<input class="search-text" type="text" name="nm" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." />
Код: Выделить всё
<style>
.search-text {
padding-left: 17px;
background: url("images/search.png") 0 40% no-repeat;
}
</style>
Естественно отступы надо подгонять под размер картинки лупы и высоту поля ввода
Если же требуется использовать слишком сложное оформление поля, которое проще вставить целой картинкой,
то ставят его фоном, у поля ввода убирают рамку и позиционируют его с помощью отступов в нужном месте
-
SuBbI
- Сообщения: 161
- Зарегистрирован: 02.01.2010
Добавил в таблицу стилей
Код: Выделить всё
.search-text {
padding-left: 17px;
background: url("templates/default/images/search_bg.png") 0 40% no-repeat;
}
поиск сделал
Код: Выделить всё
<input class="search-text" type="text" name="nm" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." />
но что-то картинки не получилось.....
в чем болт мб?
-
Distructor
- Администратор
- Сообщения: 1607
- Зарегистрирован: 28.12.2009
SuBbI писал(а):в чем болт мб?
"templates/default/images/search_bg.png" проверь правильность пути, причем он считается от файла css в котором описан
-
SuBbI
- Сообщения: 161
- Зарегистрирован: 02.01.2010
путь верный.
решил проблему по другому
Код: Выделить всё
<div style="position: absolute; top: 1px; right: 16px;
margin-top: 7px;
padding-top: 9px;
width:275px;
height:36px;
margin-right:-15px;
background:url('templates/default/images/search_bg.png') no-repeat;
padding-left: 42px;
">
-
Distructor
- Администратор
- Сообщения: 1607
- Зарегистрирован: 28.12.2009
Код: Выделить всё
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=windows-1251">
<title>Пример для форума Coder.v-Tanke.ru • Иконка в input поле</title>
<style>
.search-text {
padding-left: 18px;
background: url("search.png") 2px 50% no-repeat;
border: 1px solid #CCC;
}
</style>
</head>
<body style="padding:50px;font-size:18px;text-align:center;">
<input class="search-text" type="text" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." />
</body>
</html>
-
Вложения
-
-
search_example.rar
1.03 КБ • 182 скачивания