X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Дизайнерский SEARCH_box (input), Помогите сверстать инпут бокс со скругленными краями
Flashburn
Flashburn
Topic Starter сообщение 21.8.2009, 16:20; Ответить: Flashburn
Сообщение #1


Проблема собственно вот в чем, нужен дизайнерский инпут бокс: [img]http://savepic.ru/802279.jpg[/img]

Я сверстал такой код:
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 добился необходимого вида, но в остальных браузерах никак не могу:
[img]http://savepic.ru/795110.jpg[/img]

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

Также приклепляю картинку search бокса
Эскизы прикрепленных изображений
Прикрепленное изображение
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 21.8.2009, 23:51; Ответить: ZiTosS
Сообщение #2


Flashburn, на держи, проверил в FF3 Opera9 IE6, качай в аттаче
Прикрепленные файлы
Прикрепленный файл  form.zip ( 1,48 килобайт ) Кол-во скачиваний: 98
 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Flashburn
Flashburn
Topic Starter сообщение 22.8.2009, 2:59; Ответить: Flashburn
Сообщение #3


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

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

Спасибо еще раз
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 22.8.2009, 11:04; Ответить: ZiTosS
Сообщение #4


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Flashburn
Flashburn
Topic Starter сообщение 22.8.2009, 13:59; Ответить: Flashburn
Сообщение #5


ZiTosS, действительно дело было в вертикальном выравнивании.
Еще раз хочется поблагодарить: такая помощь очень полезна новичкам, поскольку иной раз по неопытности тратишь очень много времени, чтобы обнаружить какую нибудь несущественную ошибку.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 22.8.2009, 14:29; Ответить: ZiTosS
Сообщение #6


Flashburn, всегда рады помочь :rolleyes:
Я сам не очень часто верстаю, только когда проектыф делаю. Иногда приходится искать изящные приемы оформления. Вот один из них.
Кстати, не советую кнопку submit делать картинкой, так как если отключены картинки будет полный неразбор.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Flashburn
Flashburn
Topic Starter сообщение 22.8.2009, 14:56; Ответить: Flashburn
Сообщение #7


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


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужно поправить всплывающее окно с input на WP
0 eduarddis 2374 10.9.2017, 13:32
автор: eduarddis
Открытая тема (нет новых ответов) автоматическая активация нужных <input type="radio">
1 FALKOR 3637 19.5.2016, 17:18
автор: -Valeron-
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНужен <input> с обработчиком...
0 ShowPrint 1043 24.9.2015, 19:28
автор: ShowPrint
Открытая тема (нет новых ответов) Кроссобраузерная кнопка Input
6 zabmix 6620 11.11.2011, 9:30
автор: -zabmix-
Открытая тема (нет новых ответов) Шрифт в input и textarea. Как настроить?
13 Semreg_hb 20589 18.9.2009, 17:15
автор: -Semreg-


 



RSS Текстовая версия Сейчас: 19.3.2024, 14:31
Дизайн