Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстаем форму обратной связи / 16 сообщений из 16, страница 1 из 1
31.08.2016, 22:50
    #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
| Ответить | Цитировать | Написать  
01.09.2016, 08:16
    #39301624
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстаем форму обратной связи
urukhayТеперь, если посмотреть на результат, то увидим, что отступы (горизонтальный отступ между между полями "имя" и "мыло", вертикальный верхний и нижний от поля "задать вопрос") - все разные. Как добиться, чтобы они были одинаковыми, даже при изменении разрешения экрана?
Для этого нужно уйти от процентов. Указывать отступы в тех же пикселях...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.09.2016, 12:42
    #39301839
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстаем форму обратной связи
От процентов-то уйти можно.
Но тогда не будет автоматического масштабирования.
Придется ставить "костыли" в @media для каждого разрешения, где потребуется уменьшения отступов.

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

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

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

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

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

krvsaИ не факт, что процент по ширине равен проценту по длинеКак правило, они как раз и не равны :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.09.2016, 13:57
    #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
| Ответить | Цитировать | Написать  
03.09.2016, 09:59
    #39303050
Areostar
Areostar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстаем форму обратной связи
urukhay,

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

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

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

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


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