I am trying to keep my form fieldsets as table-cells. I am applying the width by percentage. But the field sets childer 'labelnot calculating the width as33.33%`.
what is the issue here?
*{
padding:0;
margin:0;
}
form{
/* display:table;
width:100%; */
border:1px solid gray;
}
legend {
color:red;
border-bottom:2px solid gray;
width:100%;
}
filedlset {
width:100%; /*width added*/
background:brown;
}
filedlset label {
display:table-cell;
width:33.33%;/*not working*/
border-right:1px solid blue;
}
filedlset label input {
margin-bottom:0.5em;
border:0;
background:gray;
}
filedlset span {
display:block;
margin-bottom:0.5em;
}
<form action="">
<filedlset>
<legend>Form1</legend>
<label for=""><span>Name: </span> <input type="text"> <span>Error</span></label>
<label for=""><span>Middle: </span> <input type="text"> <span>Error</span></label>
<label for=""><span>Last: </span> <input type="text"> <span>Error</span></label>
</filedlset>
</form>
Remove display: table-cell of the elements and use flex on the container (plus add box-sizing: border-box; on the elements which have padding and/or border):
body {
width: 100%;
height: 100%;
margin: 0px;
background: skyblue;
}
form {
width:100%;
border:1px solid gray;
box-sizing: border-box;
}
legend {
color:red;
background: khaki;
border-bottom: 2px solid gray;
width:100%;
box-sizing: border-box;
}
filedlset {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:100%; /*width added*/
}
filedlset label {
width:33.33%;
border-right:1px solid blue;
background: lavender;
box-sizing: border-box;
}
filedlset label input {
margin-bottom:0.5em;
border:0;
background:gray;
}
filedlset span {
display:block;
margin-bottom:0.5em;
}
.a {
margin-top: 5px;
margin-left: 5px;
display: inline;
}
input[type=text] {
width: 68%;
margin-top: 5px;
margin-right: 5px;
}
<form action="">
<filedlset>
<legend>Form1</legend>
<label for=""><span class=a>Name: </span> <input type="text"> <span style="background:tomato">Error</span></label><label for=""><span class=a>Middle: </span> <input type="text"> <span style="background:tomato">Error</span></label><label for=""><span class=a>Last: </span> <input type="text"> <span style="background:tomato">Error</span></label>
</filedlset>
</form>
<!DOCTYPE html>
<html>
<head>
<style>
*{
padding:0;
margin:0;
}
form{
/* display:table;
width:100%; */
border:1px solid gray;
margin: 3px;
}
legend {
color:red;
border-bottom:2px solid gray;
width:100%;
}
filedlset {
width: 100%;/*width added*/
background:brown;
}
.man {
display:table-cell;
width:5%;/*not working*/
border-right:1px solid blue;
padding-left: 5px;
}
filedlset label input {
margin-bottom:0.5em;
border:0;
background:gray;
width: 80%;
}
filedlset span {
display:block;
margin-bottom:0.5em;
}
</style>
</head>
<body>
<form action="">
<filedlset>
<legend>Form1</legend>
<label class="man"><span>Name: <input type="text"></span> <span>Error</span></label>
<label class="man"><span>Middle: <input type="text"></span> <span>Error</span></label>
<label class="man"><span>Last: <input type="text"></span> <span>Error</span></label>
</filedlset>
</form>
</body>
</html>
see, if this is what u want
Related
Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.
body {
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
html {
text-alight: center;
}
#login {
text-align:center;
}
input[type=text], input[type=date], input[type=password] {
width: 30%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users {
width: 30%;
height: 50px;
}
#media only screen and (max-device-width: 1024px){
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users{
width: 100%;
height: 50px;
}
#keypad_users{
width: 345px;
height: 50px;
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:30px;
font-weight:bold;
}
#keypad {margin:auto; margin-top:10px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:100px;
height:80px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC;
}
#keypad tr td:hover {
background-color:#999999;
color:#FFFF00;
}
#display {
text-align:center;
width:345px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:48px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:18px;
font-weight:bold;
display:none;
}
}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
I've made a JSfiddle for you here (click me please) that resembles the picture you've added.
As requested to not use a third party like I've added the code here:
HTML
<div id="login">
<form action = "login.php" id="login" method ="POST">
<div class="picture">
</div>
<p>Username</p>
<input type="text" name="username" id="username" required /><br /><br />
<p>Password</p>
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
CSS
body
{
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#login
{
text-align:center;
width: 50%;
margin: 0 auto;
}
.picture
{
width:100px;
height: 100px;
border-radius: 100px;
background-color:red;
margin: 0 auto;
}
#login p
{
float: left;
}
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
EDIT:
New fiddle here: https://jsfiddle.net/gay1ufa1/2/
I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.
Further more use have a duplicated id, id's must be unique to the page.
#login_container /*This is Our base container for the login "control" */
{
width:30%; /*Define the width of the control*/
margin:auto; /*This Provide the horizontal centering of the control*/
padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
background-repeat:no-repeat; /*One Bil Murray is more than enough*/
background-color: #F0F0F0; /*Base Background image*/
}
#login_container label
{
display:block; /*Label will now take up a whole line*/
margin-bottom:.25em; /*Give it some room underneath*/
}
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
width:100%; /*Form controls now take 100% width of the container*/
margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
<label for="username">Username </label>
<input type="text" name="username" id="username" required />
<label for="password">Password</label>
<input type ="password" name="password" id="password" required />
<input type="submit" name="submit" value="Log in">
</form>
</div>
One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:
http://codepen.io/anon/pen/dNWQgp
What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.
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;
}
}
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 having this really weird issue where I cannot highlight my text in my form fields.
I cannot seem to figure out what the issue is, since everything but that seems to be working correctly.
I can't seem to understand where the problem lies - it doesn't work on Chrome or Safari.
{
position:relative;
width:100%;
margin-bottom:-20px;
}
.outerForm img {
width:800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
form {
display: table;
position:absolute;
top:0px;
left:0px;
right:0px;
margin-left: auto;
margin-right: auto;
color:black;
width:600px;;
height:300px;
margin-top: 100px;
}
.innerForm > input, .innerForm > label {
display: inline-block;
vertical-align: top;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.innerForm > label {
width:70px;
text-align: left;
}
#messageLabel {
}
input[type="text"] {
width:200px;
height:30px;
border:none;
outline:none;
box-shadow: none;
background-color:transparent;
border-bottom: 1px solid black;
}
textarea {
resize: vertical;
width:85%;
border:none;
outline:none;
box-shadow: none;
background-color: transparent;
padding-bottom: 18%;
border-bottom: 1px solid black;
margin-top: 20px;
}
textarea:focus {
border:none;
outline:none;
background-color: transparent;
box-shadow: none;
border-bottom: 1px solid red;
}
.innerForm > h4 {
margin-bottom:-10px;
text-transform:none;
font-family: 'Novecento sans wide';
}
input[type="text"]:focus, input[type="textarea"] {
border:none;
outline:none;
background-color:transparent;
box-shadow: none;
border-bottom:1px solid red;
}
#submitBtn {
background-color:transparent;
color:black;
font-weight:400;
border:none;
outline:none;
border:2px solid white;
padding:10px 20px 10px 20px;
font-size: 15px;
margin-top:15px;
transition: all 0.5s ease;
}
#submitBtn:hover {
background-color: #0080ff;
color:white;
}
<div class="outerForm">
<img id="cardImage" class="img-responsive" src="PlayingCardTemplate.png"/>
<form id="contactForm" action="Contact.php" method="POST">
<div class="innerForm">
<h4>Arshdeep Soni</h4>
<label id="nameLabel" for="name">Name:</label>
<input id="name" name="name" type="text"/>
<label id="phoneLabel" for="phone">Phone:</label>
<input id="phone" name="phone" type="text"/>
<label id="emailLabel" for="email">Email:</label>
<input id="email" name="email" type="text"/>
<label id="occasionLabel" for="occasion">Occasion:</label>
<input id="occasion" type="text" name="occasion"/>
<label id="messageLabel" for="message">Message:</label>
<textarea id="message" name="message" ></textarea>
<input type="submit" value="Submit" id="submitBtn" name="submit"/>
</div>
<p id="feedback"></p>
</form>
</div>
Look for ::selection inside the CSS Stylesheet.
An imported stylesheet or a theme might be include ::selection{background:transparent
for multiple reasons.
looking for that class and editing it can be solve the issue.
Also you can add color: in order to color the text inside your selection.
For mozilla use ::-moz-selection
I am trying to align a form text input and button horizontally on the same line while giving the button a minimum width for a responsive layout. For some reason the minimum width forces the button on to a new line
.search-container{
width:100%;
border: 1px solid #000;
display:block;
}
.search-text-container {
width:90%;
display:inline-block;
}
.search-text-container input {
width:100%;
height:30px;
}
.round-icon-container {
width:10%;
display:inline-block;
}
.round-icon-button {
min-width:30px;
display:block;
width:30px;
height:30px;
line-height:normal;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-weight:bold;
}
.round-icon-button:hover {
background: #262626;
}
<div class="search-container">
<span class="search-text-container">
<form action="">
<input type="text" name="fname" />
</form>
</span>
<span class="round-icon-container">
<button type="submit" class="round-icon-button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
I have a fiddle here of what I am working on http://jsfiddle.net/dnssmw83/19/ any help would be much appreciated
You could achieve it by using CSS #media queries like this:
JSFiddle - DEMO
* {
box-sizing:border-box;
}
#media(max-width:320px) {
.search-text-container {
width:70% !important;
}
.round-icon-container {
width:30% !important;
}
}
.search-container {
width:100%;
border: 1px solid #000;
display:block;
font-size: 0; /* to remove the space between inline-block elements */
}
.search-container > span {
font-size: 16px; /* add the font-size to child span elements */
vertical-align: middle;
}