ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстаем форму обратной связи
16 сообщений из 16, страница 1 из 1
Верстаем форму обратной связи
    #39301536
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Всем прввет.

Нужно сверстать классическую форму обратной связи: имя, мыло, вопрос и кнопка "Отправить".
Html ниже.

Задачи:
1. Ширина формы должна быть задана
2. Поля формы должны занимать 100% ее ширины
3. Форма должна быть адаптивной - размеры ее элементов должны меняться при изменении разрешения экрана
Вроде все.

Теперь, если посмотреть на результат, то увидим, что отступы (горизонтальный отступ между между полями "имя" и "мыло", вертикальный верхний и нижний от поля "задать вопрос") - все разные. Как добиться, чтобы они были одинаковыми, даже при изменении разрешения экрана?

Я понимаю, что в данном случае сверстано неправильно, потому и нет желаемого результата. Хелп, как сделать правильно.
Заранее спасибо!

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
form
{
	width: 75%;
	margin: auto;
	border: 1px solid red;
}
input,
textarea
{
	font-size: 20px;
	height: 3em;
	border: 1px solid #888888;
}
input
{
	float: left;
	width: 47%;
	padding: 0 1%;
}
input.last
{
	float: right;
}
textarea
{
	height: 15em;
	width: 97.9%;
	padding: 1%;
	margin: 1% 0;
}
button
{
	display: block;
	margin: auto;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
	<form action="/" method="post">
		<div>
			<input placeholder="Your name">
			<input class="last" placeholder="Your phone">
		</div>
		<textarea placeholder="Your question"></textarea>
		<button type="submit">Ask</button>
	</form>
</body>
</html>
...
Рейтинг: 0 / 0
31.08.2016, 22:50
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39301624
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayТеперь, если посмотреть на результат, то увидим, что отступы (горизонтальный отступ между между полями "имя" и "мыло", вертикальный верхний и нижний от поля "задать вопрос") - все разные. Как добиться, чтобы они были одинаковыми, даже при изменении разрешения экрана?
Для этого нужно уйти от процентов. Указывать отступы в тех же пикселях...
...
Рейтинг: 0 / 0
01.09.2016, 08:16
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39301839
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
От процентов-то уйти можно.
Но тогда не будет автоматического масштабирования.
Придется ставить "костыли" в @media для каждого разрешения, где потребуется уменьшения отступов.

Других вариантов нет?
...
Рейтинг: 0 / 0
01.09.2016, 12:42
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39301863
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
urukhayНо тогда не будет автоматического масштабирования.
а зачем оно?
Видел кучу уже готовых модальных дизайн-форм.
Вспывает окно в виде конверта почтового. Всё в абсолютах там imho
...
Рейтинг: 0 / 0
01.09.2016, 13:01
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39301878
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Ну как зачем?
Затем, чтобы уменьшить количество кода в css, к примеру ...
...
Рейтинг: 0 / 0
01.09.2016, 13:15
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39301887
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayОт процентов-то уйти можно.
Но тогда не будет автоматического масштабирования.
Отнюдь!
Просто придется поменять саму верстку. Немного добавить тегов...

Т.е. сделать так, чтобы размеры элементов были в процентах, а сами отступы у элементов (не факт, что у тех же) были в пикселях...
...
Рейтинг: 0 / 0
01.09.2016, 13:23
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39301903
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhay , при чем, если говорить о расстояниях по горизонтали и вертикали, очень трудно попасть в те же размеры.
Ведь не факт, что пиксель квадратный.
И не факт, что процент по ширине равен проценту по длине...
...
Рейтинг: 0 / 0
01.09.2016, 13:34
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39301922
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
krvsa , возможно, мы немного о разных вещах говорим ...

Под автоматическим масштабированием я понимаю ситуацию, когда размеры указаны в процентах (или в каких-то других единицах) и в результате при изменении разрешения экрана верстка "сама подстраивается" под него, т.е. ничего дополнительно в @media писать не нужно. Это идеал, и к нему нужно стремиться.

Но бывают ситуации, когда все же приходится дописывать дополнительные стили в @media, т.к. на одних процентах не уедешь ..
Видимо, это как раз тот вариант.

krvsaПросто придется поменять саму верстку. Немного добавить тегов...Не совсем понял, о чем речь? Я знаю, как можно дописывать стили в @media для нужных разрешений. А как добавлять теги?

krvsaИ не факт, что процент по ширине равен проценту по длинеКак правило, они как раз и не равны :)
...
Рейтинг: 0 / 0
01.09.2016, 13:48
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39301932
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayНе совсем понял, о чем речь? Я знаю, как можно дописывать стили в @media для нужных разрешений. А как добавлять теги?
Вот, для примера
 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
form {
	width: 75%;
	margin: auto;
	border: 1px solid red;
}
input,
textarea {
	font-size: 20px;
	height: 3em;
	border: 1px solid #888888;
}
#test input {
	float: left;
	width: 47%;
	padding: 0 1%;
}
#test input.last {
	float: right;
}
#test textarea {
	height: 15em;
	width: 97.9%;
	padding: 1%;
	margin: 1% 0;
}
button {
	display: block;
	margin: auto;
}
#container {
	width: 75%;
	margin: auto;
	background-color: red;
}
#user {
	overflow: hidden;
}
#user > div {
	float: left;
	width: 50%;
}
#user input {
	width: 100%;
	border: 0;
	padding: 0;
}
#left {
	margin-right: 4px;
}
#right {
	margin-left: 4px;
}
#message {
	margin-left: 2px;
	margin-right: 2px;
}
#message textarea {
	height: 15em;
	width: 100%;
	margin-top: 8px;
}
hr {
	margin-top: 10px;
	margin-bottom: 10px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='container'>
	<div id='user'>
		<div>
			<div id='left'>
				<input placeholder="Your name">
			</div>
		</div>
		<div>
			<div id='right'>
				<input placeholder="Your phone">
			</div>
		</div>
	</div>
	<div id='message'>
		<textarea placeholder="Your question"></textarea>
	</div>
	<button type="submit">Ask</button>
</div>
<hr />
<div id='test'> 
	<form action="/" method="post">
		<div>
			<input placeholder="Your name">
			<input class="last" placeholder="Your phone">
		</div>
		<textarea placeholder="Your question"></textarea>
		<button type="submit">Ask</button>
	</form>
</div>
</body>
</html>


В моем варианте элементы структуры имеют процентные размеры... Но все отступы указаны в пикселях.
Это конечно не вокал, а только эскиз к вокалу... (с) к/ф В бой идут одни старики
Но думаю, что идею понять можно. ;)
...
Рейтинг: 0 / 0
01.09.2016, 13:57
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39303050
Фотография Areostar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Areostar
Участник
urukhay,

Курите media query
...
Рейтинг: 0 / 0
03.09.2016, 09:59
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39303172
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Сорри, приболел, выпал из жизни.
Принцип понятен, спасибо, все круто, но есть одно но:
мне нужно, чтобы текст внутри полей (сам техст и плейсхолдеры) слева и справа отступали от границ родителя.
Если сделать padding/margin, то width=100% уже не канает, т.к. к ней прибавятся эти отступы.
Если сделать, к примеру, width=95%, margin: auto - канает, но отступы для input и textarea будут разные, что логично.

Не хочется изобретать велосипед, потому спрашиваю, как в таких случаях правильно поступить?
...
Рейтинг: 0 / 0
03.09.2016, 16:14
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39303565
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhay , смотри внимательно примеры. Сначала делаешь контейнер нужной ширины/высоты и только потом делаешь элемент с процентами.
...
Рейтинг: 0 / 0
05.09.2016, 08:20
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39304760
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Разобрался, наконец!
Спасибо!
...
Рейтинг: 0 / 0
06.09.2016, 23:19
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39307985
Фотография Areostar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Areostar
Участник
urukhay,

А в сети примеры посмотреть религия непозволяет?
...
Рейтинг: 0 / 0
12.09.2016, 20:26
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39308774
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Areostar , этот форум часть той "сети"...
...
Рейтинг: 0 / 0
14.09.2016, 08:15
| Ответить | Цитировать | Написать  
Верстаем форму обратной связи
    #39309122
Фотография Areostar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Areostar
Участник
krvsa,

Я к тому что лучше звать рабочий код и начать разбирать!
...
Рейтинг: 0 / 0
14.09.2016, 15:32
| Ответить | Цитировать | Написать  
16 сообщений из 16, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстаем форму обратной связи
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]