#html #css #forms
#HTML #css #формы
Вопрос:
У меня возникли проблемы с переформатированием этой формы, два поля перекрываются посередине, и я ни за что на свете не могу понять, почему или как это исправить. Сама форма работает отлично, просто неправильное выравнивание. Я не уверен, что новому CSS не нравятся поля распыления, и это вызывает проблему. Я применил этот стиль к нескольким другим формам на нашем сайте, и они поменялись местами без сучка и задоринки, просто со мной боролся этот. Я пробовал использовать <br> , и это не меняет проблемы
.form-2 {
font-family: 'Ubuntu', 'Lato', sans-serif;
font-weight: 400;
/* Size and position */
width: 650px;
position: relative;
margin: 20px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
.form-2 label {
/* Size and position */
width: 20%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
.form-2 input[type=text],
.form-2 input[type=password] {
/* Size and position */
width: 60%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: #fff;
}
.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover,
.form-2 label:hover ~ input[type=text],
.form-2 label:hover ~ input[type=password] {
background: #27292c;
}
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #986893;
border-width: 2px;
outline: none; /* Remove Chrome outline */
}
.form-2 p:nth-child(3),
.form-2 p:nth-child(4) {
float: left;
width: 50%;
}
.form-2 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
.form-2 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}
.form-2 input[type=submit] {
/* Width and position LOGIN BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[value=Register] {
/* Width and position REGISTER BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 .Reset {
/* Width and position REGISTER BUTTON*/
width: 40%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-2 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
.no-boxshadow .form-2 input[type=submit]:hover {
background: #2a92d8;
}
.form-2:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
.form-2:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
.form-2 p:nth-child(1):before{
/* Size and position */
content:"";
width:250px;
height:100px;
position:absolute;
top:0;
left:45px;
/* Styles */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events:none;
}
.no-pointerevents .form-2 p:nth-child(1):before {
display: none;
} <center>
<h1><font color="red">User Registration</font></h1>
</center>
<section class="main">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>" class="form-2">
<p class="clearfix">
<br />
<label for="Username">Username</label>
<span id="sprytextfield3">
<input type="text" name="Username" id="Username" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Password">Password</label>
<span id="sprytextfield2">
<input type="password" name="Password" id="Password" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="passval">Confirm Password</label>
<span id="spryconfirm1">
<input type="password" name="passval" id="passval" />
<span class="confirmRequiredMsg">Required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</p>
<p class="clearfix">
<label for="EmailAddress">Email Address</label>
<span id="sprytextfield1">
<input type="text" name="EmailAddress" id="EmailAddress" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Security">What is your favorite food?</label>
<span id="sprytextfield4">
<input type="text" name="Security" id="Security" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
<br />
</p>
<br /><br />
<input type="submit" name="SubmitUserForm" id="SubmitUserForm" value="submit" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
<br /><br /><br /> 
Комментарии:
1. в чем проблема с выводом, пожалуйста, отметьте проблему на своем скриншоте
2. @MehediHasanSiam Нет проблем с функцией формы. На снимке экрана вы можете видеть, что строки «подтвердить пароль» и «адрес электронной почты» неоднородны и перекрываются. Все они должны быть в отдельных строках, как и остальная часть формы
3. проверьте мой ответ
Ответ №1:
В вашей форме был какой-то стиль
.form-2 p:nth-child(3),
.form-2 p:nth-child(4) {
float: left;
width: 50%;
}
Они имеют ширину 50%, поэтому есть еще 50% ширины, по этой причине они перекрывались
.form-2 {
font-family: 'Ubuntu', 'Lato', sans-serif;
font-weight: 400;
/* Size and position */
width: 650px;
position: relative;
margin: 20px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
.form-2 label {
/* Size and position */
width: 20%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
.form-2 input[type=text],
.form-2 input[type=password] {
/* Size and position */
width: 60%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: #fff;
}
.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover,
.form-2 label:hover ~ input[type=text],
.form-2 label:hover ~ input[type=password] {
background: #27292c;
}
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #986893;
border-width: 2px;
outline: none; /* Remove Chrome outline */
}
.form-2 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
.form-2 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}
.form-2 input[type=submit] {
/* Width and position LOGIN BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[value=Register] {
/* Width and position REGISTER BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 .Reset {
/* Width and position REGISTER BUTTON*/
width: 40%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-2 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
.no-boxshadow .form-2 input[type=submit]:hover {
background: #2a92d8;
}
.form-2:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
.form-2:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
.form-2 p:nth-child(1):before{
/* Size and position */
content:"";
width:250px;
height:100px;
position:absolute;
top:0;
left:45px;
/* Styles */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events:none;
}
.no-pointerevents .form-2 p:nth-child(1):before {
display: none;
} <center>
<h1><font color="red">User Registration</font></h1>
</center>
<section class="main">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>" class="form-2">
<p class="clearfix">
<br />
<label for="Username">Username</label>
<span id="sprytextfield3">
<input type="text" name="Username" id="Username" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Password">Password</label>
<span id="sprytextfield2">
<input type="password" name="Password" id="Password" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="passval">Confirm Password</label>
<span id="spryconfirm1">
<input type="password" name="passval" id="passval" />
<span class="confirmRequiredMsg">Required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</p>
<p class="clearfix">
<label for="EmailAddress">Email Address</label>
<span id="sprytextfield1">
<input type="text" name="EmailAddress" id="EmailAddress" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Security">What is your favorite food?</label>
<span id="sprytextfield4">
<input type="text" name="Security" id="Security" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
<br />
</p>
<br /><br />
<input type="submit" name="SubmitUserForm" id="SubmitUserForm" value="submit" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
<br /><br /><br /> Комментарии:
1. Вы спасаете жизнь! Вот и все! Спасибо, спасибо, спасибо! Я знал, что это должно было быть что-то, чего мне не хватало в CSS.
2. @Cyndi, не спаситель жизни, а спаситель времени. Любой способ очень приветствуется