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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

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

    WGN (worldgamenews.com)
    Очков активности: 66 Вне конкурса за определение пользователя месяца

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

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

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

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

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

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

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

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

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

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

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

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

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


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

#1 Flashburn

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

Отправлено 21 August 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
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Html верстка на конкретном примере
  2. Что-то не так с кодом css
  3. Почему padding не работает в input в IE
  4. В файле main.tpl отсутствует код на основные блоки DLE
  5. Необходимо указать значение для поля url Shema ORG в Google

#2 ZiTosS

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

Отправлено 21 August 2009 - 22:51

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

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

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

  • 0

#3 Flashburn

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

Отправлено 22 August 2009 - 01:59

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

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

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


  • 0

#4 ZiTosS

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

Отправлено 22 August 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 August 2009 - 12:59

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


  • 0

#6 ZiTosS

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

Отправлено 22 August 2009 - 13:29

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

#7 Flashburn

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

Отправлено 22 August 2009 - 13:56

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


  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

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