0
das Formular selbst wird erweitert, wie die Seite geschrumpft ist. Ich habe eine Schaltfläche, die Position verwendet: absolute, unten: 0; um es am Ende der Seite zu behalten. Wenn die Seite geschrumpft ist, überlappt die Schaltfläche die Eingaben. Ich habe ein 3. div erstellt, um mit dem Button zu pushen und margin-bottom zu verwenden: 10px; also sollte die 2 niemals div3 und button_holder berühren. aber es überlappt sich immer noch. Wie kann ich verhindern, dass sich die 2 divs überschneiden? Selbst wenn der Button absolut ist, sollte das div3 trotzdem das Formular erweitern, indem das gesamte Formular bei Verwendung von display: table gedrückt wird.verhindert absolute Taste von überlappenden Eingaben
#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>
, die das überlappende Problem behebt, sondern durch Position zu verändern: relative; Die Schaltfläche bleibt nicht länger unten – jlitt1
Warum verwenden Sie hier Feldsatz –