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


× Быстрый вопрос
Пользователь месяца
dos1k dos1k 1-й за Май
Очков активности: 1 194 28 тем, 115 сообщений, 4 балла репутации
Сайт: dos1k.ru
ТОП самых активных за этот месяц
  • Фотография Olya23
    #1

    Olya23
    Очков активности: 990 3 темы, 123 сообщения, 5 баллов репутации

  • Фотография Rodiola
    #2

    Rodiola (rukodelkovo.ru)
    Очков активности: 684 0 тем, 76 сообщений, 6 баллов репутации

  • Фотография maxnik
    #3

    maxnik (konovalovpavel.ru)
    Очков активности: 90 0 тем, 20 сообщений, 3 балла репутации

  • Фотография agrx
    #4

    agrx (key-assort.ru)
    Очков активности: 54 0 тем, 18 сообщений, 2 балла репутации

  • Фотография fedornabilkin
    #5

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 51 0 тем, 17 сообщений, 2 балла репутации

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 40.5 Вне конкурса за определение пользователя месяца

  • Фотография Андрей WPMasterKZ
    #7

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 37.5 0 тем, 25 сообщений, 1 балл репутации

  • Фотография re-search
    #8

    re-search
    Очков активности: 36 5 тем, 9 сообщений, 1 балл репутации

  • Фотография FIvYUr
    #9

    FIvYUr (catblogger.ru)
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Ixman
    #10

    Ixman (o5cat.ru)
    Очков активности: 27 0 тем, 9 сообщений, 2 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 24.05.2019
  • Яндекс выдача: 19.06.2019
Топ 5 участников по репутации


Дизайнерский 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К   Количество загрузок: 94

  • 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