Резиновая форма с закруглёнными углами

Статус
Закрыто для дальнейших ответов.

SerP

Well-Known Member
Регистрация
06.08.2009
Сообщения
79
Всем привет!

У меня возникла проблема, никак не могу сверстать резиновую форму на сайте.. и еще она с закруглёнными углами... подскажите пожалуйста, как такое сверстать? Че то ваще никак не доходит до меня.:-(
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Выложите, пожалуйста рисунок, какая форма должна быть и что предполагается внутрь ее поместить, а также напишите, что она должна делать. Попробую помочь.
Удачи!
 

SerP

Well-Known Member
Регистрация
06.08.2009
Сообщения
79


это обычная форма поиска. она должна тянуться по-горизонтали, вместе с сайтом(сайт "резина"). Углы закругленны. Внутри. пользователь будет вводить простой текст.
 

trueW3C

Поклонник Yii
Регистрация
04.03.2009
Сообщения
847
По вертикали нужно тянуть?
 

SerP

Well-Known Member
Регистрация
06.08.2009
Сообщения
79
ну лишним бы не было)
 

trueW3C

Поклонник Yii
Регистрация
04.03.2009
Сообщения
847
Без вертикальной растяжки будет проще...

В общем ищи в гугле: "CSS обвязка"
 
  • Like
Реакции: SerP

SerP

Well-Known Member
Регистрация
06.08.2009
Сообщения
79
ну вообще, нужно по горизонтали только. Хз как с закруглёнными углами тянуть...

ок, спасибо)
 

trueW3C

Поклонник Yii
Регистрация
04.03.2009
Сообщения
847
Untitled-1.png

3 блока вложены в друг друга, у 3 последнего width:100%. Вложенность по номерам...в блок с градиентом вложены боковые закругления...при наложении получается закруглённый блок...

Untitled-2.png

Это вариант, если фон на фоне блока однородный...
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Блин! Расскажите чайнику, как рисунки вставлять в посты!!!
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Поле ввода</title>
<style type="text/css">
body {
	min-width:500px;
}
#left_div {
	background-image:url(bg_left.png); 
	background-repeat:no-repeat; 
	height:50px; 
	border:solid 3px #f00; 
	width:70%;
}
#right_div {
	background-image:url(bg_right.png); 
	background-repeat:no-repeat; 
	background-position:right; 
	height:50px; 
	clear:both;
}
#field_carrier {
	float:left; 
	width:67%;
}
#button_carrier {
	float:right;
}
.field {
	margin:5px;
	height:34px;
	width:100%;
	font-size:large;
	border:none;
}
.button {
	margin:0px 5px;
	font-size:x-large;
	height:50px;
	width:87px;
	border:none;
	background-image:url(bg_button.png);
	background-repeat:no-repeat;
}
</style>
</head>

<body>
<div id="left_div">
	<div id="right_div">
		<div id="field_carrier">
			<input class="field" type="text" value="очень очень очень очень очень очень длинная строка поиска" />
		</div>
		<div id="button_carrier">
			<input class="button" type="submit" value="найти" />
		</div>
	</div>
</div>
</body>
</html>
Рисунки во вложенном архиве.
Удачи!
 

Вложения

Felix

Друг форума
Регистрация
20.06.2009
Сообщения
1 097
Там есть фома прикрепления файлов. Добавляешь картинку она появляется в Прикрепление файлов нажимаешь Добавить в сообщение И вуаля
s3img_38147700_5433_1.jpg

Всё готово.
 

SerP

Well-Known Member
Регистрация
06.08.2009
Сообщения
79
tigra60, спасибо огромное!
 

SerP

Well-Known Member
Регистрация
06.08.2009
Сообщения
79
блин, на градиентном фоне не получается...
 

trueW3C

Поклонник Yii
Регистрация
04.03.2009
Сообщения
847
SerP, я же сказал...нужно 3 контейнера...
Оберни в ещё один див...

Код:
<div class="gradient">
    <div id="left_div">
        <div id="right_div">
            ...
        </div>
    </div>
</div>
Код:
.gradient { background:url(...) repeat-x 0 0 }
Картинка...гивка шириной 1 px
 

SerP

Well-Known Member
Регистрация
06.08.2009
Сообщения
79
да нет... сама форма белая, а фон сзади градиент и не получается, чтобы она тянулась, остается пробел, причем большой.
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Для
Код:
#left_div
добавьте
Код:
background-color:#fff;
Удачи!
ЗЫ. Феликс! Спасибо!
 

trueW3C

Поклонник Yii
Регистрация
04.03.2009
Сообщения
847
tigra60, у меня круче реализация :rolleyes: И для IE6 классно, я так понял закругления должны быть прозрачны, PNG.
Код:
<div class="input"> 
    <input type="text" /> 
</div>
 
Статус
Закрыто для дальнейших ответов.
Верх Низ