if you see below image or visit link1 , below text "ALREADY REGISTERED" we can see 2 textboxes with good amount space between them.
but if visit link2 than there is no space between them, please help me to display space between those textfields.
.input-box {
float: left;
width: 100%;
padding-top: 2px;
}
use tag between two input text boxes
<input type="text" name="email">
<br>
<input type="text" name="password">
both links are the same. but anyway. you do something like this.
.input-box {
float: left;
margin-bottom: 10px;
}
Here is the code:
.input-box {
padding-bottom: 20px;
display: table;
width: 100%;
}
Remove float:left from .input-box and it's work fine.
.input-box{
width: 100%;
padding-top: 2px;
}
Update your css like this,
.input-box {
float: none;
/* padding-bottom: 20px; */
width: 100%;
}
Also this if want fix the position of * Required text
.fieldset p.required {
margin-bottom: 7px;
float: right;
font-size: 12px;
margin-top: 0px;
padding-right: 0;
}
Remove this class on li inner div .input-box
your html like blow
<ul class="form-list">
<li>
<div class="">
<input type="email" placeholder="Enter Your email" title="Email Address" class="input-text required-entry validate-email" id="email" value="" name="login[username]" spellcheck="false" autocorrect="off" autocapitalize="off">
</div>
</li>
<li>
<div class="">
<input type="password" placeholder="Enter Your Password" title="Password" id="pass" class="input-text required-entry validate-password" name="login[password]">
</div>
</li>
<li>
<a class="f-left" href="http://sbdev1.kidsdial.com/customer/account/forgotpassword/">Forgot Your Password?</a>
</li>
<li class="control remember-me-box">
<div class="input-box">
<input type="checkbox" title="Remember Me" checked="checked" id="remember_meG1nd66Tg4Y" class="checkbox" name="persistent_remember_me">
</div>
<label for="remember_meG1nd66Tg4Y">Remember Me</label>
What's this?
</li>
</ul>
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 3 months ago.
Image of my Form
I'd like to move this form to the middle of my web page. I have it center aligned currently, but it is at the top of my webpage. I want it smack dab in the middle. I've been trying to google around but this has been a surprisingly difficult answer to find.
html
<body>
<div class="form">
<form action="./script.js" method="post">
<ul>
<li>
<label for="date">Date:</label>
<input type="date" id="date" name="date" step="0.1" min="0"
placeholder="What's the date today?" size="50">
</li>
<li>
<label for="mileage">Mileage:</label>
<input type="number" id="mileage" name="mileage" step="0.1" min="0"
placeholder="How many miles today?" size="50">
</li>
<li>
<label for="note">Notes:</label>
<textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
</li>
<li class="button">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
</body>
</html>
CSS
div.form {
display: block;
text-align: center;
}
form {
margin: 0 auto;
width: 600px;
padding: 1em;
border: 1px solid lightgrey;
border-radius: 1em;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
form li+li {
margin-top: 1em;
}
This should work:
div.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
form {
margin: 0 auto;
width: 600px;
padding: 1em;
border: 1px solid lightgrey;
border-radius: 1em;
text-align: left;
}
form li+li {
margin-top: 1em;
}
<body>
<div class="form">
<form action="./script.js" method="post">
<ul>
<li>
<label for="date">Date:</label>
<input type="date" id="date" name="date" step="0.1" min="0"
placeholder="What's the date today?" size="50">
</li>
<li>
<label for="mileage">Mileage:</label>
<input type="number" id="mileage" name="mileage" step="0.1" min="0"
placeholder="How many miles today?" size="50">
</li>
<li>
<label for="note">Notes:</label>
<textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
</li>
<li class="button">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
</body>
</html>
Super easy, give your container all the view height and then super center it with grid.
I forced your form to half of the view width just to show it was centered.
.form-container {
height: 100vh;
display: grid;
place-items: center;
}
/* this is just style */
form {
margin: 0 auto;
width: 50vw;
padding: 1em;
border: 1px solid lightgrey;
border-radius: 1em;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
form li+li {
margin-top: 1em;
}
<div class="form form-container">
<form action="./script.js" method="post">
<ul>
<li>
<label for="date">Date:</label>
<input type="date" id="date" name="date" step="0.1" min="0" placeholder="What's the date today?" size="50">
</li>
<li>
<label for="mileage">Mileage:</label>
<input type="number" id="mileage" name="mileage" step="0.1" min="0" placeholder="How many miles today?" size="50">
</li>
<li>
<label for="note">Notes:</label>
<textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
</li>
<li class="button">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
form {
margin: 0 auto;
width: 600px;
padding: 1em;
border: 1px solid lightgrey;
border-radius: 1em;
text-align: left;
}
form li+li {
margin-top: 1em;
}
.form{
display:flex;
height:calc(100vh - 2px);
justify-content:center;
align-items:center;
border:solid 1px red;}
body,html,div{
margin:0;
padding:0;}
<body>
<div class="form">
<form action="./script.js" method="post">
<ul>
<li>
<label for="date">Date:</label>
<input type="date" id="date" name="date" step="0.1" min="0"
placeholder="What's the date today?" size="50">
</li>
<li>
<label for="mileage">Mileage:</label>
<input type="number" id="mileage" name="mileage" step="0.1" min="0"
placeholder="How many miles today?" size="50">
</li>
<li>
<label for="note">Notes:</label>
<textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
</li>
<li class="button">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
</body>
I am trying to place the firstname and the lastname on the same line.
I looked over this question:
html form - make inputs appear on the same line
But because of my old css (used in app), the fields aren't correctly displayed. I need a little space between the two fields.
I made a fiddle:
https://jsfiddle.net/up5bL2xn/
EDIT: My html code:
<div class="parent-split-row">
<div class="child-split-row">
<label class="form-label">
First Name
</label>
<input type="text"
id="js-input-first-name"
name="first_name"
class="form-input"
value="{{ form.first_name.vars.value|default }}"
placeholder="First Name"
onkeyup="VALIDATIONS.onKeyUp('js-coach-license-registration-form','js-input-first-name')"
onmouseup="VALIDATIONS.onMouseUp('js-coach-license-registration-form','js-input-first-name')"
autofocus>
<div id="js-input-first-name__error"
class="form-validation">
Please fill in your First Name
</div>
</div>
<div class="child-split-row">
<label class="form-label">
Last Name
</label>
<input type="text"
id="js-input-last-name"
name="last_name"
class="form-input"
value="{{ form.last_name.vars.value|default }}"
placeholder="Last Name"
onkeyup="VALIDATIONS.onKeyUp('js-coach-license-registration-form','js-input-last-name')"
onmouseup="VALIDATIONS.onMouseUp('js-coach-license-registration-form','js-input-last-name')"
autofocus>
<div id="js-input-last-name__error"
class="form-validation">
Please fill in your Last Name
</div>
</div>
</div>
Your help would be appreciated.
Thank you.
Here you go! just added a padding-right on the first name and divided the label and input in two different div's :)
.name{
float: left;
padding-right: 4%;
}
<div class="name">
<label for="First_Name">First Name:</label>
<input name="first_name" id="First_Name" type="text" />
</div>
<div class="lastname">
<label for="Name">Last Name:</label>
<input name="last_name" id="Last_Name" type="text" />
</div>
try this. ;)
.parent-split-row { display: flex; }
use " " after your first div class="child-split-row" or else add padding right to your css for child-split-row class
.child-split-row {
padding-right:10px;
}
.parent-split-row {
display: table;
}
.child-split-row {
display: table-cell;
}
.form-label {
display: block;
width: 100%;
color: #1f1f1f;
margin-top: 7px;
margin-bottom: 10px;
padding-left: 2px;
}
.form-input {
font-family: Aileron;
font-weight: 500;
display: block;
width: 100%;
padding: 8px 10px;
color: #1f1f1f;
background-color: #d6d5d6;
border: 1px solid #d6d5d6;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
height: 34px;
}
<div class="parent-split-row">
<div class="child-split-row">
<label class="form-label">
First Name
</label>
<input type="text"
id="js-input-first-name"
name="first_name"
class="form-input"
placeholder="First Name">
</div>  
<div class="child-split-row">
<label class="form-label">
Last Name
</label>
<input type="text"
id="js-input-last-name"
name="last_name"
class="form-input"
placeholder="Last Name">
</div>
</div>
Add this to your CSS file:
.child-split-row:not(:last-child) {
padding-right: 10px;
}
That's one way of doing it.
I am trying to get my form to center on desktop. It's currently to the left side.
I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.
The picture below shows the issue and I'll add a snippet and a fiddle to help. Thanks in advance.
Jsfiddle: https://jsfiddle.net/r87h2L6n/
/*********FORMS CSS*************/
form {
display: block;
margin-left: auto;
margin-right: auto;
}
form.contact label {
display: block;
}
span {
display: block;
border: none;
color: white;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
fieldset {
width: 45%;
float: left;
border: none;
}
input.checks {
width: auto;
}
.left {
width: 45%;
float: left;
}
.right {
width: 45%;
float: right;
}
input {
border: none;
border-bottom: 2px solid #959595;
width: 300px;
margin: 3px;
color: #6C6A6A;
padding-top: 10px;
padding-bottom: 10px;
}
.bottom {
border: none;
margin: 3px;
color: #6C6A6A;
padding-top: 10px;
padding-bottom: 10px;
width: 300px;
}
.fa {
margin-right: 10px;
}
legend {
color: white;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
.button:hover {
background-color: #670809
}
.button:active {
background-color: #670809;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<section class="clearfix" id="fourthpara">
<div class="imgbox5">
<img id="pic5" class="adjustable float move" src="http://weknowyourdreams.com/images/kitten/kitten-08.jpg" alt="example web page">
</div>
<h2>Student Review 3</h2>
<p class="side">
“This class is up to date on the latest techniques, the instructor is willing to go the extra mile, and the class is well structured” -Papa Smurf
</p>
</section>
</div>
</section>
<div class="center clearfix">
<h1 id="fourth">Contact</h1>
<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset>
<legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span>
<input name="first_name" type="text" value="" placeholder="First Name" required/>
</label>
<label><span>
</span>
<input name="last_name" type="text" value="" placeholder="Last Name" required/>
</label>
<label><span> </span>
<input name="date_of_birth" type="date" value="" placeholder="Date of Birth" required/>
</label>
<label><span>
</span>
<input type="number" name="quantity" min="1" max="6" placeholder="number of years until next degree">
</label>
<label><span></span>
<input name="level_of_education" type="hidden" value="" placeholder="level of education" required/>
</label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>
</fieldset>
<fieldset>
<legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
Contact Information
<hr class="style2">
</legend>
<label><span>
</span>
<input class="ghost-input" name="email" value="" type="email" placeholder="youremail#email.com" autocomplete="off" />
</label>
<label><span></span>
<input name="phonenumber" value="" type="tel" placeholder="763-858-9564" />
</label>
<label><span></span>
<input name="website" value="" type="url" placeholder="https://yourwebsite.com" />
</label>
</fieldset>
</section>
<section class="clearfix column">
<fieldset>
<legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests
<hr class="style2">
</legend>
<section class="clearfix column left">
<label class="bottom span"><span><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>
<label class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
</label>
<label class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span>
</label>
</section>
<section class="clearfix column left">
<label class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
</label>
<label class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span>
</label>
<label class="bottom"><span><input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
</label>
</section>
</fieldset>
<fieldset>
<legend><i class="fa fa-volume-control-phone" aria-hidden="true">
</i>
Follow Up
<hr class="style2 toosmall">
</legend>
<section class="clearfix column left">
<legend class="smaller">You can contact me by:</legend>
<br>
<div class="squish">
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span>
</label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span>
</label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="text"/>Contact me by text</span>
</label>
<br>
</div>
</section>
<section class="clearfix column left">
<legend class="smaller">I'm interested in:</legend>
<br>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span>
</label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span>
</label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span>
</label>
</section>
</fieldset>
</section>
<input class="button" name="submit_to_programmer" type="submit" value="Submit" />
<input type="hidden" value="Message from Car Website" name="subject">
<input name="redirect" type="hidden" value="thanks.html">
</form>
To add to Michael_B`s answer your form is set to take up the full width of the page as its a block element by default and you have set it as well. Margin auto only works for elements that are block or inline-block elements and they width of either must be set to a specified value for it to work.
To address your problem now, looking at your source code, you can get the result you expect by removing the float set on your fieldset element in your CSS and setting Margin to auto in that element. I am not sure what the purpose of the float in that CSS rule but you cannot center something that you have set to float. Hope this helps
The reason it's not centering is that your form element is a block level container and, therefore, it's occupying 100% width of the page. As a result, there no space left for centering.
As you wrote:
I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.
Well, if you give an element display: block it consumes all available horizontal space. Hence, margin-left: auto and margin-right: auto have no effect.
Try defining a width for the form (e.g. width: 30em), removing float rules and/or giving the form text-align: center, which centers the child elements.
It's not your form that is the issue here, it is your fieldset...again. Give this a whirl.
fieldset {
width: 45%;
margin: 0 auto;
/* float: left; -- DELETE float: left if you want this centered */
border: none;
}
UPDATE:
If you also want that submit button to be centered, here is the css for that.
.button {
margin: 0 auto; /* ADDED THIS */
display: block; /* Took inline-block out, just use block */
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
LIVE DEMO
In this JSfiddle have I made a form without using tables.
The problem is that I can't get the submit button on the same line as "Type" and below the End Data field.
Does anyone know how to do that?
HTML
<div class="create-new">
<div id="create_result" style="display:none;">
</div>
<form id="create_form" name="create_form" action="" method="post">
<input name="anchor" id="anchor" value="create" type="hidden">
<label class="new" for="title">Title:</label>
<input class="new" type="text" name="title" id="title" />
<label class="new" for="owner">Owner:</label>
<input class="new" type="text" name="owner" id="owner" /><br class="new"/>
<label class="new" for="users">Users:</label>
<input class="new" type="text" name="users" id="users"/>
<label class="new" for="groups">Groups:</label>
<input class="new" type="text" name="groups" id="groups" /><br class="new"/>
<label class="new" for="begin_date">Begin Date:</label>
<input class="new" type="text" id="from" name="from"/>
<label class="new" for="end_date">End Date:</label>
<input class="new" type="text" id="to" name="to"/><br class="new"/>
<label class="new" for="type">Type:</label>
<input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel <br/>
<input name="ctype" id="ctypee" value="course" type="radio" /> Course <br/>
<button class="n" type="submit">Create</button>
</form>
</div>
CSS
label.new, input.new, select.new, textarea.new { display: block; float: left; width: 150px; margin-bottom: 10px; }
label.new { width: 110px; text-align: right; padding-right: 10px; margin-top: 2px; }
textarea.new { height: 50px; }
br.new { clear: left; }
i nput.n { display: block; float: right; width: 150px; }
.create-new { display: inline-block; position: relative; left: 25%; }
I changed input.n to button.n and adjusted the styles to display:inline
button.n { display: inline; float: right; width: 150px; }
I also moved the button placement in your code to right under the label
<label class="new" for="type">Type:</label>
<button class="n" type="submit">Create</button>
<input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel
http://jsfiddle.net/jasongennaro/CKC29/
One way to do it would be to put the items into a list (ul) then in your CSS set display: inline; for the two elements you would like to be on the same line.
You could try this:
Add the button.n selector to the first two label lines on top, so that it does the same as the labels so as the label with type.
button.n, label.new, input.new, select.new, textarea.new { display: block; float: left; width: 150px; margin-bottom: 10px; }
button.n, label.new { width: 110px; text-align: right; padding-right: 10px; margin-top: 2px; }
If the class name of n was a typo in your code above, just take the right classname, probably new instead of n.
The only way of doing it changing only the css is to set "display:inline" for the inputs that preceed your submit buttom.
I am just trying to float an unordered list left, and a set of textboxes to the right so that they are adjacent to each other and have a uniform look within a div tag. The issue is that the text boxes are to the right ... but are positioned below the ul items
.PersonLI
{
float: left;
clear: both;
width: 100px;
margin-bottom: 10px;
}
.PersonBox
{
float: right;
clear: both;
width: 99px;
margin-bottom: 10px;
}
.FirstObj
{
border: 1px solid black;
margin-left: 100px;
width: 300px;
height: 200px;
}
<div class="FirstObj">
<ul style="list-style: none;">
<li class="PersonLI">First Name:</li>
<li class="PersonLI">Last Name:</li>
<li class="PersonLI">Address:</li>
<li class="PersonLI">City:</li>
<li class="PersonLI">State:</li>
<li class="PersonLI">Zip Code:</li>
</ul>
<input id="txtFname" type="text" value="" class="PersonBox"/>
<input id="txtLname" type="text" value="" class="PersonBox"/>
<input id="txtAddr" type="text" value="" class="PersonBox"/>
<input id="txtCity" type="text" value="" class="PersonBox"/>
<input id="txtState" type="text" value="" class="PersonBox"/>
<input id="txtZip" type="text" value="" class="PersonBox"/>
</div>
Could it be that I need to NOT clear the float on the last list item?
Your markup is kind of weird. A semantic form adapting your styles would look like this:
.FirstObj ul {
list-style: none;
}
.FirstObj li {
margin-bottom: 10px;
clear: both;
}
.FirstObj label {
width: 100px;
float: left;
}
.FirstObj input {
float: right;
width: 99px
}
<div class="FirstObj">
<ul>
<li>
<label for="txtFname">First Name:</label>
<input id="txtFname" type="text" value="" />
</li><li>
<label for="txtLname">Last Name:</label>
<input id="txtLname" type="text" value="" />
</li><li>
<label for="txtAddr">Address:</label>
<input id="txtAddr" type="text" value="" />
</li><li>
<label for="txtCity">City:</label>
<input id="txtCity" type="text" value="" />
</li><li>
<label for="txtState">State:</label>
<input id="txtState" type="text" value="" />
</li><li>
<label for="txtZip">Zip Code:</label>
<input id="txtZip" type="text" value="" />
</li>
</ul>
</div>
It's alway a good idea to use labels. Here's the working version: http://jsfiddle.net/Fmzbm/
Is there any specific reason why you are not using <label> tags for these fields?
To answer your CSS question, clear:both is not needed on either of the elements if you want them side by side.
Consider changing your markup:
HTML:
First Name:
CSS:
.FirstObj label { float:left; }
.FirstObj input { float:right; }
The code hinting is jacked up, need to try some more formatting.
Demo http://jsfiddle.net/qnev2/
You may want to change the fixed width of the li CSS rule to suit your needs but also change the markup and use the more semantically correct label tag. This also avoids the float property which in my experience can lead to undesirable behaviour if the HTML is re-flowed.