Перейти к содержимому



Дизайнерский SEARCH_box (input)

#1

Поделиться сообщением #1



Flashburn

Flashburn
  • Неактивные
  • 11 сообщений
  • Репутация: 0
0

Отправлено 21 Август 2009 - 15:20

Проблема собственно вот в чем, нужен дизайнерский инпут бокс: Изображение

Я сверстал такой код:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link href="style.css" type="text/css" rel="stylesheet">
<title></title>
</head>
<body>

<table width="241" border="0" cellspacing="0" cellpadding="1">
<tr><form action="" method="get">
<td width="164" class="search"><input name="searchstring" type="text" class="search_field2" value="Поиск"/></td>
<td width="77"><input type="submit" name="button" id="log_but" value= ""> </td> </form>
</tr>
</table>
</body>
</html>


CSS:
/* CSS Document  */

body{background-color:transparent;}
.search
{
	background-image:url(search_box_1.gif);
	background-repeat:no-repeat;
	background-position: 0 px;
	margin-top: 100 px;
	background-color:red;
	height:24 px;
	vertical-align: top;
}

.butt {  background-color:#fff;}

 .white_text
{
	color:#red;
	font-size:12px;
	text-align: left;
	text-indent: 1.5 em;
} 

.search_field2
{
	width:148px;
	height: 18 px;
	background-color:#FFFFFF;
	border:0;
	margin-top: 3 px;
	margin-left:10px;
	font-family : Verdana;
	color : #A9A9A9;
	font-style : italic;
}

.button
{
	border:#FF0000 solid 1px;
	background-color:#ffd681;
	width:60px;
	margin-left: 4px;
	height:20px;
}

#log_but
{
	height:24px;
	width: 65px;
	background-image:url(ttbutton.gif);
	background-color: transparent;
	margin-top: 0px;
	margin-left: -21 px;
	border:none;	
}

В IE8 добился необходимого вида, но в остальных браузерах никак не могу:
Изображение

Огромная просьба помогите сверстать данный бокс, так чтобы он выглядел правильно во всех браузерах.

Также приклепляю картинку search бокса

Прикрепленные изображения

  • search_box_1.gif

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как поменять вывод новостей?
  2. Html верстка на конкретном примере
  3. Почему padding не работает в input в IE
  4. Верстаем горизонтальное меню по мотивам MasterWEBS
  5. Всплывающее окно обратного звонка на html + php + css, без использования jQuery

#2

Поделиться сообщением #2



ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 21 Август 2009 - 22:51

Flashburn, на держи, проверил в FF3 Opera9 IE6, качай в аттаче

Прикрепленные файлы

  • Прикрепленный файл  form.zip   1,48К   Количество загрузок: 89

  • 0

#3

Поделиться сообщением #3



Flashburn

Flashburn
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

Отправлено 22 Август 2009 - 01:59

Спасибо большое за помощь. Правда в IE 8 съехал инпут немного вверх, но на остальных хорошо выглядит, немного с видом кнопки повожусь.

Очень полезна для меня твоя реализация в дивах.

Спасибо еще раз


  • 0

#4

Поделиться сообщением #4



ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 22 Август 2009 - 10:04

Flashburn, всегда пожалуйста. Там всего один div. Но подобное всегда удобнее на div-ах. Когда всего 2 неизменных фона. Один в div вставляем, другой в input.
А съехало в IE 8 возможно из-за vertical-align: top;
Попробуй сделать элементам vertical-align: middle;
  • 0

#5

Поделиться сообщением #5



Flashburn

Flashburn
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

Отправлено 22 Август 2009 - 12:59

ZiTosS, действительно дело было в вертикальном выравнивании.
Еще раз хочется поблагодарить: такая помощь очень полезна новичкам, поскольку иной раз по неопытности тратишь очень много времени, чтобы обнаружить какую нибудь несущественную ошибку.


  • 0

#6

Поделиться сообщением #6



ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 22 Август 2009 - 13:29

Flashburn, всегда рады помочь :rolleyes:
Я сам не очень часто верстаю, только когда проектыф делаю. Иногда приходится искать изящные приемы оформления. Вот один из них.
Кстати, не советую кнопку submit делать картинкой, так как если отключены картинки будет полный неразбор.
  • 0

#7

Поделиться сообщением #7



Flashburn

Flashburn
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

Отправлено 22 Август 2009 - 13:56

Ну ZiTosS, я думаю люди которые отключают картинки уже заведомо понимают, что вид и иногда функциональность может измениться не в лучшую сторону, да и на конец нажмет enter, если кнопку не найдет :) Ну а по сути я тобой согласен конечно, это при разработке комерческих решений конечно обязательно учитывать.


  • 0


Оформление форума – IPBSkins.ru