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

Реферальная программа Мегаплана


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

#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

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

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

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

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

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

  • 0

#3 Flashburn

Flashburn
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

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

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

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

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


  • 0

#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 Flashburn

Flashburn
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

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

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


  • 0

#6 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

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

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

#7 Flashburn

Flashburn
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

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

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


  • 0


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