the form itself will expand as the page is shrunk. I have a button that uses position:absolute;bottom:0; to keep it at the bottom of the page. When the page is shrunk the button overlaps the inputs.
I created a 3rd div to butt up with the button and use margin-bottom:10px; so the 2 should never touch div3 and button_holder. but it still overlaps. How can i prevent the 2 divs from overlapping each other? Even tho the button is absolute the div3 should still expand the form by pushing the whole form down when using display:table;
#service_wrap {
padding: 0;
margin: 0;
width: 100%;
height: 400px;
max-height: 400px;
display: table;
background-color: #000;
background-image: url('../images/thumbsup.jpg');
background-size: cover;
background-repeat: no-repeat;
}
h1 {
color: #FFF;
width: 90%;
text-align: center;
font-weight: bold;
font-size: 22px;
text-transform: uppercase;
margin-top: 4%;
margin-bottom: 3%;
padding-left: 3%;
}
h2 {
color: #FFF;
font-size: 17px;
width: 100%;
text-align: center;
margin: 0 auto;
margin-top: 5%;
margin-bottom: 5%;
}
h3 {
color: #000;
font-size: 15px;
width: 100%;
text-decoration: underline;
text-align: center;
margin: 0 auto;
margin-top: 1%;
margin-bottom: 1%;
}
h4 {
color: #000;
font-size: 15px;
width: 100%;
text-align: center;
margin: 0 auto;
margin-top: 3%;
margin-bottom: 3%;
}
h5 {
color: #000;
font-size: 12px;
width: 100%;
text-align: center;
margin: 0 auto;
margin-top: 3%;
margin-bottom: 8%;
}
h6 {
color: #FFF;
width: 100%;
margin-top: 100px;
font-weight: bold;
font-size: 16px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
margin-top: 10%;
}
#thingstoknow {
border: 2px solid red;
border-radius: 3px;
width: 30%;
margin: 0 auto;
text-transform: uppercase;
font-size: 15px;
text-align: center;
line-height: 46px;
height: 48px;
display: table;
}
#thingstoknow a {
color: #FFF;
width: 100%;
height: 100%;
display: block;
text-decoration: none;
white-space: nowrap;
text-align: center;
padding-right: 20px;
}
#media screen and (max-width: 400px) {} #service_top {
margin: 0 auto;
width:60%;
display:table;
margin-bottom:8%;
}
#service_bottom {
height: 49%;
width: 100%;
display: table;
margin-bottom: 8%;
}
/* estimate form */
/*form styles*/
#AUTO {
display: table;
/*makes div fill content*/
width: 100%;
margin: 0 auto;
position: relative;
border: px solid green;
/*visual aid to make sure div fills content*/
margin-bottom: 30px;
}
#AUTO fieldset {
text-align: center;
min-height: 350px;
position: relative;
width: 95%;
margin: 0 auto;
background-color: #FFF;
display: table;
/*makes div fill content*/
}
#miles {
display: none;
/*spammer fills this out and it gets rejected my mail script*/
}
/*Hide all except first fieldset*/
#AUTO fieldset:not(:first-of-type) {
display: none;
/*remove to see all feildsets*/
}
#AUTO fieldset {
display: none
}
#AUTO fieldset:first-child {
display: block;
}
#AUTO .div1 {
margin: 0 auto;
width: 240px;
height: 65px;
left: 10px;
margin-top: 10px;
margin-bottom: 20px;
border: px solid blue;
/*visual aid to make sure div fills content*/
}
#AUTO .div2 {
margin: 0 auto;
width: 100%;
display: table;
}
#AUTO .div3 {
margin: 0 auto;
width: 100%;
display: table;
border: 1px solid red;
margin-bottom: 10px;
}
#contact_name {
text-align: left;
margin: 10px;
min-width: 170px;
width: 25%;
display: inline-block;
vertical-align: middle;
/*visual aid to make sure div fills content*/
}
#contact_phone {
text-align: left;
margin: 10px;
min-width: 170px;
width: 25%;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
#contact_email {
text-align: left;
margin: 10px;
min-width: 170px;
width: 25%;
display: inline-block;
vertical-align: middle;
}
.button_holder {
width: 98%;
margin: 0 auto;
display: table;
margin-top: 30px;
margin-bottom: 10px;
position: absolute;
bottom: 0px;
}
input,
select,
textarea {
-ms-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
#contact_slide1 {
display: table;
width: 70%;
margin: 0 auto;
margin-bottom: 30px;
margin-top: 30px;
}
#contact_slide2 {
display: table;
width: 70%;
margin: 0 auto;
margin-bottom: 30px;
margin-top: 30px;
}
#contact_contact {
min-width: 170px;
width: 30%;
display: table;
float: right;
white-space: nowrap;
}
#contact_message {
width: 70%;
display: table;
margin: 0 auto;
margin-bottom: 20px;
}
#contact_slide3 {
display: table;
width: 70%;
margin: 0 auto;
margin-bottom: 30px;
margin-top: 30px;
}
input {
border: 2px solid black;
border-radius: 4px;
width: 95%;
text-align: center;
line-height: 46px;
height: 30px;
}
textarea {
margin: 0 auto;
text-align: center;
clear: both;
border: 2px solid black;
border-radius: 1px;
width: 100%;
margin: 0 auto;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 100px;
margin: 0 auto;
text-align: center;
}
select {
text-transform: uppercase;
float: left;
border: 2px solid black;
border-radius: 1px;
width: 100%;
text-align: center;
line-height: 35px;
height: 35px;
}
input[type=submit] {
border: 2px solid #F00;
border-radius: 5px;
width: 30%;
text-align: center;
float: right;
line-height: 46px;
height: 50px;
background-color: #F00;
color: #FFF;
margin-left: 5px;
margin-right: 5px;
}
input[type=button] {
text-transform: uppercase;
border: 2px solid #000;
border-radius: 5px;
width: 30%;
text-align: center;
float: right;
line-height: 46px;
height: 50px;
background-color: #000;
color: #FFF;
margin-left: 5px;
margin-right: 5px;
}
/* ADDITIONAL SERVICES */
#additional_services {
width: 100%;
margin: 0 auto;
height: 350px;
font-size: 14px;
display: table;
background-color: #CCC;
}
/* map and locations */
#loc_holder {
background-color: #f0f0f0;
width: 100%;
height: 350px;
display: table;
padding-bottom: 20px;
padding-top: 20px;
}
#loc_buttons {
width: 100%;
height: 100px;
background-color: #0F0;
display: none;
}
#loc_info {
border: px solid red;
background-color: #FFF;
width: 47%;
height: 420px;
float: left;
overflow: scroll;
-webkit-overflow-scrolling: touch;
margin-left: 2%;
margin-right: 1%;
}
#loc_map {
background-color: #FFF;
width: 47%;
float: left;
margin-left: 1%;
margin-right: 2%;
height: 400px;
display: table;
}
#mloc {
width: 96.9%;
border: px solid blue;
float: left;
margin: 0 auto;
padding-left: 3%;
padding-bottom: 2%;
margin-bottom: 2%;
border-bottom: 2px solid #CCC;
}
#mloc_left {
width: 55%;
height: 115px;
display: table;
border: px solid green;
float: left;
padding-left: 3%;
}
#loc_info_dir {
padding: 2%;
width: 30%;
height: 110px;
display: table;
float: left;
}
#loc_info_dir #loc_info_maplink {
width: 80%;
margin: 0 auto;
margin-top: 3%;
margin-bottom: 10%;
text-align: center;
font-size: 13px;
}
#loc_info_dir #loc_info_maplink a {
text-decoration: none;
}
#loc_info_dir #loc_info_dist {
border: 1px solid purple;
width: 80%;
margin: 0 auto;
margin-top: 10%;
margin-bottom: 3%;
text-align: center;
display: none;
/* delete when sql code is done*/
}
.maptitle {
width: 99%;
border: px solid red;
font-weight: bold;
text-transform: uppercase;
}
.manager {
width: 99%;
border: px solid red;
margin-bottom: 3px;
margin-top: 3px;
}
.manager span {
font-weight: bold;
}
.addy1 {
text-transform: uppercase;
width: 99%;
border: px solid red;
margin-bottom: 3px;
}
.addy2 {
text-transform: uppercase;
width: 99%;
border: px solid red;
}
.phone1 {
width: 99%;
border: px solid red;
font-size: 12px;
font-weight: 600;
}
.fax1 {
width: 99%;
border: px solid red;
font-size: 12px;
font-weight: 600;
}
<form id="AUTO" method="post" action="">
<!-- fieldsets -->
<fieldset>
<div class="div3">
<div class="div1"><img src="images/step1.png" width="233" height="65"></div>
<h3>CONTACT INFO</h3>
<input type="hidden" name="token" value="<?php echo $token; ?>"/>
<input type="hidden" name="miles" value=""/>
<div id="contact_name">FULL NAME: *<br>
<input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME">
</div>
<div id="contact_phone">PHONE NUMBER: *<br>
<input id="element_1" name="phone" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/>
</div>
<div id="contact_email">EMAIL:<br>
<input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div>
</div>
<!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
</div>
</fieldset>
<fieldset>
<div class="div3">
<div class="div1"><img src="images/step2.png" width="233" height="65"></div>
<h3>VEHICLE INFO</h3>
<div id="contact_name">VEHICLE MAKE: *<br>
<input id="element_2_1" name="make" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME">
</div>
<div id="contact_phone">VEHICLE MODEL: *<br>
<input id="element_1" name="model" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/>
</div>
<div id="contact_email">YEAR*:<br>
<input id="element_1" name="year" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div>
<div id="contact_name">VIN NUMBER: <br>
<input id="element_2_1" name="vin" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME">
</div>
<div id="contact_phone">INSURANCE COMPANY ( if applicable ):<br>
<input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/>
</div>
</div>
<!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
<input type="button" name="previous" class="previous action-button" value="Previous"/>
</div>
</fieldset>
<fieldset>
<div class="div3">
<div class="div1"><img src="images/step3.png" width="233" height="65"></div>
<div id="contact_message">MESSAGE:<br>
<textarea id="element_3" name="message" class="element textarea medium" placeholder="START TYPING MESAGE HERE..."></textarea>
</div>
</div>
<!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="ALMOST DONE"/>
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>
<fieldset>
<div class="div3">
<div class="div1"><img src="images/step4.png" width="233" height="65"></div>
<h4>THANK YOU!</h4>
<h5>Once you hit Submit a representative will be with you shortly. </h5>
</div>
<!--div3-->
<div class="button_holder">
<input type="submit" name="submit" class="submit action-button" value="SUBMIT" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>
</form>
Try this code
#service_wrap{
padding:0;
margin:0;
width:100%;
height:400px;
max-height:400px;
display:table;
background-color:#000;
background-image: url('../images/thumbsup.jpg') ;
background-size: cover;
background-repeat: no-repeat;
}
h1{
color:#FFF;
width:90%;
text-align:center;
font-weight:bold;
font-size:22px;
text-transform:uppercase;
margin-top:4%;
margin-bottom:3%;
padding-left:3%;
}
h2{color:#FFF;
font-size:17px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:5%;
margin-bottom:5%;
}
h3{
color:#000;
font-size:15px;
width:100%;
text-decoration:underline;
text-align:center;
margin: 0 auto;
margin-top:1%;
margin-bottom:1%;
}
h4{
color:#000;
font-size:15px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:3%;
margin-bottom:3%;
}
h5{
color:#000;
font-size:12px;
width:100%;
text-align:center;
margin: 0 auto;
margin-top:3%;
margin-bottom:8%;
}
h6{
color:#FFF;
width:100%;
margin-top:100px;
font-weight:bold;
font-size:16px;
margin: 0 auto;
text-align:center;
text-transform:uppercase;
margin-top:10%;
}
#thingstoknow{
border: 2px solid red;
border-radius: 3px;
width:30%;
margin: 0 auto;
text-transform:uppercase;
font-size:15px;
text-align:center;
line-height:46px;
height:48px;
display:table;
}
#thingstoknow a{color:#FFF;width:100%;height:100%;display:block;text-decoration:none;
white-space:nowrap;
text-align:center;
padding-right:20px;}
#media screen and (max-width: 400px) {}
#service_top{
margin: 0 auto;
width:60%;
display:table;
margin-bottom:8%;
}
#service_bottom{
height:49%;
width:100%;
display:table;
margin-bottom:8%;
}
/* estimate form */
/*form styles*/
#AUTO {
display:table;/*makes div fill content*/
width: 100%;
margin:0 auto;
position: relative;
border:px solid green; /*visual aid to make sure div fills content*/
margin-bottom:30px;
}
#AUTO fieldset {
text-align:center;
min-height:350px;
position:relative;
width:95%;
margin:0 auto;
background-color:#FFF;
display:table;/*makes div fill content*/
}
#miles{
display:none;/*spammer fills this out and it gets rejected my mail script*/
}
/*Hide all except first fieldset*/
#AUTO fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}
#AUTO fieldset {
display:none
}
#AUTO fieldset:first-child {
display: block;
}
#AUTO .div1{
margin:0 auto;
width: 240px;
height:65px;
left:10px;
margin-top:10px;
margin-bottom:20px;
border:px solid blue; /*visual aid to make sure div fills content*/
}
#AUTO .div2{
margin:0 auto;
width: 100%;
display:table;
}
#AUTO .div3{
margin:0 auto;
width: 100%;
display:table;
border: 1px solid red;
margin-bottom:10px;
}
#contact_name{
text-align:left;
margin:10px;
min-width:170px;
width:25%;
display:inline-block;
vertical-align: middle; /*visual aid to make sure div fills content*/
}
#contact_phone{text-align:left;margin:10px;min-width:170px;width:25%;display:inline-block; vertical-align: middle;white-space:nowrap;
}
#contact_email{text-align:left;margin:10px;min-width:170px;width:25%;display:inline-block; vertical-align: middle;
}
.button_holder {
width: 98%;
margin:0 auto;
display:table;
margin-top:30px;
margin-bottom:10px;
position: relative;
bottom:0px;
}
input, select, textarea{
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
}
#contact_slide1{display:table;width:70%;margin: 0 auto;
margin-bottom:30px;
margin-top:30px;}
#contact_slide2{display:table;width:70%;margin: 0 auto;margin-bottom:30px;
margin-top:30px;}
#contact_contact{min-width:170px;width:30%;display:table;float:right;
white-space:nowrap;}
#contact_message{width:70%;display:table;margin: 0 auto;margin-bottom:20px;}
#contact_slide3{display:table;width:70%;margin: 0 auto;margin-bottom:30px;
margin-top:30px;}
input {
border: 2px solid black;
border-radius: 4px;
width:95%;
text-align:center;
line-height:46px;
height:30px;
}
textarea {margin: 0 auto;
text-align:center;
clear:both;
border: 2px solid black;
border-radius: 1px;
width:100%;margin: 0 auto;
text-align:center;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
height:100px;margin: 0 auto;
text-align:center;
}
select { text-transform:uppercase;
float:left;
border: 2px solid black;
border-radius: 1px;
width:100%;
text-align:center;
line-height:35px;
height:35px;
}
input[type=submit] {
border: 2px solid #F00;
border-radius: 5px;
width:30%;
text-align:center;
float:right;
line-height:46px;
height:50px;
background-color:#F00;
color:#FFF;
margin-left:5px;margin-right:5px;
}
input[type=button] {
text-transform:uppercase;
border: 2px solid #000;
border-radius: 5px;
width:30%;
text-align:center;
float:right;
line-height:46px;
height:50px;
background-color:#000;
color:#FFF;
margin-left:5px;margin-right:5px;
}
/* ADDITIONAL SERVICES */
#additional_services{
width:100%;
margin: 0 auto;
height:350px;
font-size:14px;
display:table;
background-color:#CCC;
}
/* map and locations */
#loc_holder{
background-color:#f0f0f0;
width:100%;
height:350px;
display:table;
padding-bottom:20px;
padding-top:20px;
}
#loc_buttons{
width:100%;
height:100px;
background-color:#0F0;
display:none;
}
#loc_info{border:px solid red;
background-color:#FFF;
width:47%;
height:420px;
float:left;
overflow:scroll;
-webkit-overflow-scrolling: touch;
margin-left:2%;
margin-right:1%;
}
#loc_map{
background-color:#FFF;
width:47%;float:left;
margin-left:1%;
margin-right:2%;
height:400px;
display:table;
}
#mloc{
width:96.9%;
border:px solid blue;
float:left;
margin: 0 auto;
padding-left:3%;
padding-bottom:2%;
margin-bottom:2%;
border-bottom: 2px solid #CCC;
}
#mloc_left{
width:55%;
height:115px;
display:table;
border:px solid green;
float:left;
padding-left:3%;
}
#loc_info_dir{
padding:2%;
width:30%;
height:110px;
display:table;
float:left;
}
#loc_info_dir #loc_info_maplink{width:80%;margin:0 auto;
margin-top:3%;
margin-bottom:10%;
text-align:center;
font-size:13px;}
#loc_info_dir #loc_info_maplink a{
text-decoration:none;
}
#loc_info_dir #loc_info_dist{border:1px solid purple;width:80%;margin:0 auto;
margin-top:10%;
margin-bottom:3%;
text-align:center;
display:none;/* delete when sql code is done*/
}
.maptitle{ width:99%;
border:px solid red;
font-weight:bold;
text-transform:uppercase;}
.manager{width:99%;
border:px solid red;
margin-bottom:3px;margin-top:3px;}
.manager span{
font-weight:bold;
}
.addy1{text-transform:uppercase;width:99%;
border:px solid red;margin-bottom:3px;}
.addy2{text-transform:uppercase;width:99%;
border:px solid red;}
.phone1{width:99%;
border:px solid red;
font-size:12px;font-weight:600;}
.fax1{width:99%;
border:px solid red;font-size:12px;font-weight:600;}
<form id="AUTO" method="post" action="">
<!-- fieldsets -->
<fieldset>
<div class="div3">
<div class="div1"><img src="images/step1.png" width="233" height="65"></div>
<h3>CONTACT INFO</h3>
<input type="hidden" name="token" value="<?php echo $token; ?>"/>
<input type="hidden" name="miles" value=""/>
<div id="contact_name">FULL NAME: *<br>
<input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>
<div id="contact_phone">PHONE NUMBER: *<br>
<input id="element_1" name="phone" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div>
<div id="contact_email">EMAIL:<br>
<input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div>
</div><!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
</div>
</fieldset>
<fieldset>
<div class="div3">
<div class="div1"><img src="images/step2.png" width="233" height="65"></div>
<h3>VEHICLE INFO</h3>
<div id="contact_name">VEHICLE MAKE: *<br>
<input id="element_2_1" name="make" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>
<div id="contact_phone">VEHICLE MODEL: *<br>
<input id="element_1" name="model" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div>
<div id="contact_email">YEAR*:<br>
<input id="element_1" name="year" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div>
<div id="contact_name">VIN NUMBER: <br>
<input id="element_2_1" name="vin" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>
<div id="contact_phone">INSURANCE COMPANY ( if applicable ):<br>
<input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div>
</div><!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
<input type="button" name="previous" class="previous action-button" value="Previous"/>
</div>
</fieldset>
<fieldset>
<div class="div3">
<div class="div1"><img src="images/step3.png" width="233" height="65"></div>
<div id="contact_message">MESSAGE:<br>
<textarea id="element_3" name="message" class="element textarea medium" placeholder="START TYPING MESAGE HERE..."></textarea></div>
</div><!--div3-->
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="ALMOST DONE"/>
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>
<fieldset>
<div class="div3">
<div class="div1"><img src="images/step4.png" width="233" height="65"></div>
<h4>THANK YOU!</h4>
<h5>Once you hit Submit a representative will be with you shortly. </h5>
</div><!--div3-->
<div class="button_holder">
<input type="submit" name="submit" class="submit action-button" value="SUBMIT" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset>
</form>
Hi not sure why you want the button at the bottom of the screen always, if it's a block element it will always be at the end of the form, but if
you want to stop the overlap on mobile simply set your media query breakpoint and change its position to something like "static":
#media screen and (max-width: 800px) {
.button_holder {
position: static;
}
}
Related
<?php
// Start the session
session_start();
?>
<html>
<head>
<title>Student Registeration</title>
<link rel="stylesheet" src="text/css" >
<style>
.login-box
{
width:280px;
position:relative;
top:30%;
left:50%;
transform: translate(-50%,-50%);
color:black;
}
h1
{
margin: 0;
float:left;
font-size:38px;
border-bottom: 6px solid gold;
margin-bottom: 40px;
padding:0 0 20px;
text-align:center;
}
.login-box p
{
margin: 0;
padding: 0;
font-size: 18px;
}
.login-box input
{
width: 100%;
overflow: hidden;
margin-bottom: 20px;
margin: 8px 0;
padding:9px 0;
}
.login-box input\[type="text"\], input\[type="password"\], input\[type="email"\]
{
border: none;
outline: none;
border-bottom: 1px solid gold;
background: none;
color:gold;
font-size: 16px;
width:100%;
float:left;
}
.button
{
font-family: century gothic;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 19px;
background-image: linear-gradient(to right, gold , black);
}
</style>
</head>
<body>
<?php
include'header.php';
?>
<div class="login-box">
<form method="post" action="authen.php" <?php echo $_SERVER\['PHP_SELF'\]; ?>>
<h1>Create Account</h1>
<p><b>Full Name : </b></p>
<input type="text" class="textarea" id="fname" name=" fname" placeholder="Full Name" style="width:100%;" name="fname" pattern="\[A-Za-z \]+" required >
<p><b>Email :</b></p>
<input type="email" class="textarea" id="email" placeholder="Email" style="width:100%;" name="email" pattern="\[a-z0-9._%+-\]+#\[a-z0-9.-\]+\.\[a-z\]{2,}$" required>
<p><b>Username :</b></p>
<input type="text" id="user" class="textarea" placeholder="Username" style="width:100%;" name="user" pattern="\[A-Za-z0-9\]{5,}" required>
<p><b>Phone :</b></p>
<input type="text" id="phno" class="textarea" placeholder="Phone Number" style="width:100%;" name="phno" pattern="\[0-9\]{10}" required>
<p><b>Password :</b></p>
<input type="password" id="pass" placeholder="Password" class="textarea" style="width:100%;" name="pass" pattern="\[A-Za-z0-9\]{6,}" required>
<p><b>Confirm Password :</b></p>
<input type="password" id="cpass" class="textarea" placeholder="Confirm Password" style="width:100%;" name="cpass" pattern="\[A-Za-z0-9\]{6,}" required>
<p><b>Choose the following:</b></p>
<input type="radio" class="textarea" id="pfaculty" name="Faculty" value="Permanent faculty" required >Permanent Faculty
<input type="radio" class="textarea" id="vfaculty" name="Faculty" value="Visiting faculty" required >Visiting Faculty
<input type="submit" name="submit" class="Button"id="btn" value="Submit">
</form>
</div>
</body>
</html>
header.css
/*Index CSS*/
body{
color:#008080;
font-family:Century Gothic;
position: relative;
}
/*Naavigation Bar*/
div{
height:70px;
}
a{
color: #f2f2f2;
text-align: center;
text-decoration: none;
}
#Name{
float: left;
color: #f2f2f2;
text-align: center;
padding: 2px 5px;
font-size: 30px;
margin-top:12px;
}
.header {
overflow: hidden;
background-color: black;
position: fixed;
width: 100%;
top: 0;
}
.links{
float: right;
display: block;
color: #f2f2f2;
text-align: center;
margin-top:10px;
text-decoration: none;
padding: 14px 16px;
font-size: 20px;
}
.links:hover {
background-color: white;
color: #008080;
border-radius: 10px;
transition: 0.2s;
}
.header .icon {
display: none;
}
#media screen and (max-width: 600px) {
.links.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.header.responsive {
position: relative;
}
.header.responsive a {
float: none;
display: block;
text-align: left;
}
}
]1]1
Here in this code I have problem that my form overlaps my header
When I scroll down in the page it scrolls the form and overlap the header.
As I have given a picture you can see my form overlaps my header which should not happen. It should not crossover the header thats the problem.
And my radion button text is also not coming in proper format I have tried a lot things but it is not happening. So please anyone can resolve this error.
Give z-index (any value you want but greater than your form) to your header and if there is no position property in your header, add position: relative.
I have this desing and I´ll like to program it but I dont find the way.
Does anyone know how to make it?
How can I put that '+' inside?
Here is the piece of code:-
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 30%;
height: 20px;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul"> <input type="text" class="busqueda_input" name="">
ESTADO <hr id="hr-vertical-azul"> <input type="text" class="busqueda_input" name="">
</div>
You can use the position:absolute, you can literally play with css to get the required output there are many number of way for what u have asked here is something which i have made
Example
.input-field{
position: relative;
width: 250px;
}
.input-field input{
border:none;
background-color: #ccc;
border-radius: 10rem;
width:100%;
height: 25px;
}
.icon{
position: absolute;
top:0;
right:0;
color: white;
font-weight: 600;
font-size: x-large;
background: black;
padding-right: 10px;
padding-left: 5px;
border-top-right-radius: 10rem;
border-bottom-right-radius: 10rem;
}
<div class="input-field">
<input type="text" >
<div class="icon">+</div>
</div>
Try this.
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 190px;
height: 20px;
border:1px solid #ccc;
}
.input-wrap {
position: relative;
display: inline-block;
}
.input-wrap .icon {
background: #616261;
border-radius: 0 50px 50px 0;
bottom: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 29px;
color: #fff;
font-size: 19px;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-wrap">
<input type="text" class="busqueda_input" name="">
<div class="icon">+</div>
</div>
ESTADO
<hr id="hr-vertical-azul">
<div class="input-wrap">
<input type="text" class="busqueda_input" name="">
<div class="icon">+</div>
</div>
</div>
you can add pseudo element to the parent div
http://jsfiddle.net/w9ew0nrw/7/
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-group">
<input type="text" class="busqueda_input" name="">
</div>
ESTADO <hr id="hr-vertical-azul">
<div class="input-group">
<input type="text" class="busqueda_input" name="">
</div>
</div>
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
height: 30px;
border:0;
}
.input-group {
position:relative;
width:200px;
}
.input-group:after {
position:absolute;
top;0;
right:0;
width:30px;
height:30px;
background-color:#333;
color:#fff;
content:"+";
border-radius:0 100% 100% 0;
text-align:center;
line-height:30px;
font-size:20px;
}
You can try this code:
also if you want button instead of + label.
1st textbox is for label
2nd is for button
.busqueda_input {
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 100%;
height: 40px;
border: none;
outline: none;
display: inline-block;
text-indent: 15px;
}
.input-div , .input-div-2 {
width: 50%;
position: relative;
margin-bottom:20px;
}
.input-div:after , .input-div-2 button {
content: "+";
position: absolute;
right: 0px;
top: 0;
background: #616261;
bottom: 0;
border-radius: 50px;
width: 50px;
text-align: center;
font-size: 35px;
color: #fff;
border:none;
outline:none;
}
button{
cursor: pointer;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-div">
<input type="text" class="busqueda_input" name="">
</div>
ESTADO <hr id="hr-vertical-azul"> <div class="input-div-2"><input type="text" class="busqueda_input" name="">
<button>+</button>
</div>
</div>
i have a weird bug with my css
#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}
#box1 label {
background-color: black;
color:white;
float: left;
margin-left: 1px;
}
#box1 span {
display: block;
overflow: hidden;
}
#box1 span input {
width: 100%;
border:none;
border-bottom:solid 1px #000;
outline:none;
}
<div id="box1">
<form>
<div>
<label> Nom de la société </label>
<span><input type="text" value=""></span>
</div>
<div>
<label> Adresse </label>
<span><input type="text" value=""></span>
</div>
</form>
</div>
I won't show all the HTML because it is the same structure.
The thing is that in my web browser it looks like this :
However, this is how it should looks like :
(this is the same code !)
http://jsfiddle.net/8vsyxtys/
It's most likely the float:left.
Try adding a clear div after each:
css would be: .clear { clear:both; height: 1px; }
#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}
#box1 label {
background-color: black;
color:white;
float: left;
margin-left: 1px;
}
#box1 span {
display: block;
overflow: hidden;
}
#box1 span input {
width: 100%;
border:none;
border-bottom:solid 1px #000;
outline:none;
}
.clear {
clear: both;
height: 1px;
}
<div id="box1">
<form>
<div>
<label> Nom de la société </label>
<span><input type="text" value=""></span>
</div>
<div class="clear"> </div>
<div>
<label> Adresse </label>
<span><input type="text" value=""></span>
</div>
</form>
</div>
I am trying to create a form for registering users with a centered horizontal and vertical position. I have multiple input fields for obvious reasons followed by a submit button. I also have the page divided up into 3 sections, a header, a main body, and a footer.
I seemed to have gotten it horizontally but cannot figure it out vertically.
<div id="main-background">
<div id="main">
<form name="registration" id="registration">
<input id="first-name" type="text" name="first-name" placeholder="First Name" size="15">
<input id="last-name" type="text" name="last-name" placeholder="Last Name" size="15">
<input id="date-of-birth" type="text" name="date-of-birth" placeholder="Date of Birth" size="15">
<input id="email" type="text" name="email" placeholder="Email" size="15">
<input id="username" type="text" name="username" placeholder="Username" size="15">
<input id="password" type="password" name="password" placeholder="Password" size="15">
<input id="submit" type="submit" value="Submit" onclick="submit()">
</form>
</div><!-- main -->
</div><!-- end of main-background -->
#main {
background-color: #d9d9d9;
font-size: 1.6em;
margin: 0 auto;
height: 800px;
padding: 0 auto;
position: relative;
width: 990px;
}
#registration {
border: 1px solid black;
width: 50%;
margin-top: 0 auto;
}
#first-name {
border-color:#cccccc;
border-style:solid;
display: block;
margin: 5px;
padding: 0 auto;
font-size:14px;
text-align: center;
border-width:1px;
border-radius:5px;
}
#last-name {
border-color:#cccccc;
border-style:solid;
display: block;
margin: 5px;
padding: 0 auto;
font-size:14px;
text-align: center;
border-width:1px;
border-radius:5px;
}
#date-of-birth {
border-color:#cccccc;
border-style:solid;
display: block;
margin: 5px;
padding: 0 auto;
font-size:14px;
text-align: center;
border-width:1px;
border-radius:5px;
}
#email {
border-color:#cccccc;
border-style:solid;
display: block;
margin: 5px;
padding: 0 auto;
font-size:14px;
text-align: center;
border-width:1px;
border-radius:5px;
}
#username {
border-color:#cccccc;
border-style:solid;
display: block;
margin: 5px;
padding: 0 auto;
font-size:14px;
text-align: center;
border-width:1px;
border-radius:5px;
}
#password {
border-color:#cccccc;
border-style:solid;
display: block;
margin: 5px;
padding: 0 auto;
font-size:14px;
text-align: center;
border-width:1px;
border-radius:5px;
}
Small change and a simple addition:
#registration {
position: relative;
top: 50%;
transform: translateY(-50%);
border: 1px solid black;
width: 50%;
margin: 0 auto; // removed margin-top
}
Browswer support for transform is quite nice:
Caniuse: transform2d
Did you want the form itself centered, or the elements within the form centered? I assumed you are asking for the former. In that case make the following changes:
#main {
background-color: #d9d9d9;
font-size: 1.6em;
margin: 0 auto;
height: 800px;
padding: 0 auto;
position: relative;
width: 990px;
display: flex;
flex-direction: column;
justify-content: center;
}
#registration {
border: 1px solid black;
width: 50%;
margin: 0 auto;
}
On #registration you need to use margin and not margin-top. You can then use flexbox to vertically center the form.
What I would like is to have a column of labels, and to the right a column of text boxes approximately a few tabs apart and all aligned on (their respective) margins.
So far I have this. However when I resize the screen my text boxes move. How can I make them fixed?
This is the CSS:
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color:#ffffff;
padding-left: 9em;
padding-right: 9em;
}
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
This is the HTML:
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<br>
<label>input one:</label>
<input type="text" class="myform" value="0" /><br><br>
<label>input two:</label>
<input type="text" class="myform" value="0" /></br>
</br>
</form>
</div>
EDIT:
I've figured it out:
Add this:
#one label {
display: inline-block;
width: 270px;
}
And take away:
position: absolute;
right: 800px;
from
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
try to give the label a width:
label {
width: 100px;
}
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color: #ffffff;
height: 1.5em;
}
.myform {
text-align: left;
position: absolute;
right: 800px;
}
.leftCol {
float: left;
width: 50%
}
.rightCol {
float: right;
width: 50%
}
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<div class="leftCol">
<label>input one:</label>
<input type="text" value="0" />
</div>
<div class="rightCol">
<label>input two:</label>
<input type="text" value="0" />
</div>
</form>
</div>
I removed the position:absolute from the inputs (because in my screen they where way of, that's why you should use it if nothing else works) and then added a margin-right on the form labels. demo;
Relevant CSS
#one label{
margin-right:10px;
}
Update
I've added a fixed width to ammend for the possibility of labels with differente text lengths, here it is:
#one label{
display:inline-block;
margin-right:10px;
width:150px;
}
You should change width:150px to whatever you want it to be :)
Hope it helps!