Кажется, я не могу понять, как остановить мою html-форму от разделения и смещения вниз при изменении размера страницы
Я работаю над приложением rails, и у меня по-прежнему возникает эта проблема, когда моя html-форма продолжает разделяться и двигаться вниз каждый раз, когда я изменяю размер страницы. Я пробовал обернуть его в теги, пробовал разные позиции, плавающие элементы и дисплеи, и ничего не работает. В настоящее время это мой код для него. Кроме того, у меня есть несколько фотографий результата.
Как бы вы поступили, чтобы этого не произошло? Это происходит как в рабочей среде, так и в среде разработки, если это что-то меняет.
HTML:
<div id = "containerc">
<div id = "contcontent">
<div id = "formwrapper">
<form action = "/contacts" method = "POST">
<label for = "fullname" class = "label" id = "fullname">Full Name*</label>
<input type = "text" name = "fullname" class = "input" id = "ifullname" style = "width: 48.5vw; height: 2.5vw; font-size: 1.5vw;" />
<label class = "label" id = "email" for = "email">Email*</label>
<input id = "iemail" type = "text" name = "email" class = "input" style = "font-size:
1.5vw; width: 48.5vw; height: 2.5vw;" />
<label for = "company" class = "label" id = "company">Company</label>
<input type = "text" name = "company" class = "input" id = "icompany" style = "width:
48.5vw; height: 2.5vw; font-size: 1.5vw;" />
<label for = "message" class = "label" id = "message">Message</label>
<textarea id = "imessage" name = "message" class = "input" style = "width: 48.5vw;
height: 8vw; font-size: 1.2vw;"></textarea>
<input type = "submit" id = "submit" value = "Submit" style = "width: 10vw; height:
2vw;" />
</form>
</div>
</div>
</div>
CSS:
h1#cont {
text-align: center;
bottom: 31vw;
position: absolute;
font-size: 7vw;
left: 32.3vw;
font-family: albaregular;
}
form {
position: absolute;
bottom: 55vw;
white-space: nowrap;
}
label#fullname.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -20vw;
z-index: 1;
}
label#email.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -26vw;
z-index: 7;
}
label#company.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -32vw;
z-index: 3;
}
label#message.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -38vw;
z-index: 4;
}
input#ifullname.input {
left: 25.3vw;
bottom: -23vw;
position: absolute;
z-index: 0;
}
input#iemail.input {
left: 25.3vw;
bottom: -29vw;
position: absolute;
z-index: 0;
}
input#icompany.input {
left: 25.3vw;
bottom: -35vw;
position: absolute;
z-index: 0;
}
textarea.input {
left: 25.3vw;
bottom: -46.5vw;
position: absolute;
z-index: 0;
}
input#submit {
left: 43vw;
font-size: 1vw;
position: absolute;
bottom: -52vw;
font-family: eb_garamond_sc08_regular;
}
Изображений:
Ваша проблема не воспроизводится только с предоставленным кодом (скопируйте только html и css в какой-либо файл или используйте, например, codepen.io). Как правило, поскольку структура вашей страницы очень проста, я бы рекомендовал удалить любую форму position и вместо этого использовать только divs или display: block для архивирования макета столбца. Также сохраняйте все свои стили в css, а не в style-атрибутах.
Это мед может. Я очень новичок в html/css, поэтому я не совсем знаю, какой из них использовать и когда. Проблема в том, что когда я использую относительный, все портится еще больше. Также я бы просто полностью удалил позицию и заменил ее на flex? Разве это не помешает мне перемещать его по экрану? Теперь я вижу, что могу просто переместить форму, не перемещая все в ней, но все же независимо от того, какую позицию я использую, она всегда кажется беспорядочной.
@Reizo, черт возьми, не так ли? Это отстой. При этом, как бы я разместил форму там, где я хочу, чтобы она была на странице, не используя position: ...;? Например, если я хочу, чтобы он был там, где он находится на полноэкранном изображении.
Ответы 1
Я взял ваш HTML и удалил все позиционирование и использовал только оболочку div, центрирующую всю форму с помощью
display: grid;
place-items: center;
и выровнял элементы формы в столбце, используя
display: flex;
flex-direction: column;
на form.
:root {
font-size: 1vw; /* questionable from a design perspective */
}
input,
textarea {
font-size: inherit;
}
.wrapper {
display: grid;
place-items: center;
}
.form {
display: flex;
flex-direction: column;
}
.button {
align-self: center;
}<div class = "wrapper">
<form class = "form" action = "/contacts" method = "POST">
<label for = "ifullname" class = "label" id = "fullname">Full Name*</label>
<input type = "text" name = "fullname" class = "input" id = "ifullname"/>
<label class = "label" id = "email" for = "iemail">Email*</label>
<input id = "iemail" type = "text" name = "email" class = "input"/>
<label for = "icompany" class = "label" id = "company">Company</label>
<input type = "text" name = "company" class = "input" id = "icompany"/>
<label class = "label" for = "imessage" class = "label" id = "message">Message</label>
<textarea id = "imessage" name = "message" class = "input"></textarea>
<input class = "button" type = "submit" id = "submit" value = "Submit"/>
</form>
</div>Пока ваш макет остается довольно простым, вы должны использовать этот шаблон в качестве основы и, возможно, использовать только некоторые другие отступы или настроить размер шрифта, если хотите...
Также обратите внимание, что в label-х for вам нужно указать упомянутые input-е id вместо name для правильной работы.
это было полностью! Большое спасибо! Я также лучше понимаю, что я сделал неправильно, поэтому спасибо за вашу помощь.
Не уверен, что это вызывает проблему (хотя вполне вероятно), но в любом случае вам, вероятно, не следует использовать
position: absoluteдля каждого отдельного элемента. Во-первых, очень утомительно вручную размещать каждый элемент и учитывать, насколько сложно было бы добавить поле посередине. Во-вторых, он подвержен ошибкам и, вероятно, будет давать разные результаты на разных размерах экрана. Вместо этого, возможно, рассмотрите возможность использования некоторых отображений макета CSS, таких как flex.