I have a form with 2 inputs and a submit button.
They are in different DIVS, so I'm using a left float to get them all in one line.
I have the whole thing contained in a larger DIV, and I'm using auto on the left and right margins to try and center the whole thing.
No matter what I do I can't get that form centered. It's making me crazy. I'm sure it's something simple that I'm just missing. What am I doing wrong?
Thanks in advance!
http://jsfiddle.net/T84hE/
Here's the CSS I'm using:
#mc_bottom_signup{
width:90%;
margin: 0 auto;
}
#mc_bottom_signup input[type="text"],
#mc_bottom_signup input[type="email"] {
margin-right: .25em;
width:30%;
float:left;
}
#mc-embedded-subscribe {
margin-top: 0;
float:left;
}
Whilst this could be achieved with floats, I prefer using inline-block on children, then text-align: center on the parent.
HTML (Removed placeholding <div>s & added indentation)
<div id="mc_bottom_signup">
<form id="mc-embedded-subscribe-form" class="validate" action="http://trinidadpena.us5.list-manage.com/subscribe/post?u=a99f40b5b94ce684ab690557e&id=9d41329865" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<input id="mce-FNAME" class="required" name="FNAME" type="text" value="" placeholder="your first name" />
<input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" placeholder="your email address" />
<div style="position: absolute; left: -5000px;">
<input tabindex="-1" name="b_a99f40b5b94ce684ab690557e_9d41329865" type="text" value="" />
</div>
<input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Yes, I want in!" />
</form>
</div>
CSS (Less specificity)
#mc_bottom_signup{
width:90%;
margin: 0 auto;
text-align: center;
}
#mc_bottom_signup input{
display: inline-block;
}
DEMO
--DEMO--
Use text-align: center , display: inline-block and max-width:30%
#mc_bottom_signup{
width:90%;
margin: 0 auto;
text-align:center;
}
#mc_bottom_signup form div{
max-width:30%;
display: inline-block;
}
#mc_bottom_signup input[type="text"],
#mc_bottom_signup input[type="email"] {
}
#mc-embedded-subscribe {
}
margin: 0 auto; only works when the width of elements is known. I would set a fixed width then use media queries to set percentage widths as it looks like you are working on an email which won't support the other methods of centring content.
Related
I have defined a simple form to learn about clear. I am surprised the 'Submit' button is not going to the next line. My understanding of clear:both is that there should be no floated element to the left or right of the element to which clear is applied. Given this definition, I was expecting Submit to move the last line since I have applied clear to input and label.
can someone pls explain why this is not working? Pls note my goal is to understand where my understanding is flawed and not how to bring the Submit button to the next linec
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name" />
<label>Phone </label>
<input type="text" value="Enter phone" />
<button type="button">Submit </button>
</fieldset>
</form>
9.5.2 Controlling flow next to floats: the 'clear' property
Applies to: block-level elements
Button, is by default, an inline level element, not a block level element. To make clear apply, give it display:block;
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
display:block;
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name"/>
<label>Phone </label>
<input type="text" value="Enter phone"/>
<button type="button">Submit </button>
</fieldset>
</form>
Here is the code for a form that I have on my page:
<form id="form2" action="processRegister.php" method="post" onsubmit="return checkRegister()">
<h4>Register</h4>
<div class="reminder">Already registered? Sign in below.</div>
<div id="sMessage"></div>
<div class="field"><label>First Name:</label><input class="input" type="text" name="firstName" /></div>
<div class="field"><label>Last Name:</label><input class="input" type="text" name="lastName" /></div>
<div class="field"><label>Email (.edu):</label><input class="input" type="text" name="email" /></div>
<div class="field"><label>Password:</label><input class="input" type="password" name="password" /></div>
<div class="field"><label>Confirm Password:</label><input class="input" type="password" name="cPassword" /></div>
<div class="field"><input class="submit" type="submit" value="Register"/></div>
</form>
And here is the relevant css:
.submit
{
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000
}
This centers the submit button in FF but not Chrome. How can I fix this?
Either give the submit button a width, or set the parent div to have text-align:center and remove display:block on the submit button.
jsFiddle example (button has width)
jsFiddle example (parent has text-align center)
The text-align property only affects inline elements, so that's why you'd need to remove the display:block from the input element. The margin:0 auto centering trick only works on elements that have a width.
Try
HTML:
<div class="submit-container field">
<input class="submit" type="submit" value="Register"/>
</div>
CSS:
.submit
{
background-color:#30BEB4;
border: 1px solid #000000
}
.submit-container {
text-align: center;
}
you could fake it with
margin:0 45%;
width:10%;
Try setting the width of the button: http://jsfiddle.net/hg7KV/1/
.submit
{
width: 100px;
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000;
}
You must add width of to your submit class:
.submit
{
background-color:#30BEB4;
margin:0 auto;
display:block;
border: 1px solid #000000
width: 60px;
}
http://jsfiddle.net/PPDLC/2/
It works if you only add a width attribute to your .submit class. For example add "width: 100px;".
Probably Chrome needs dimensions to position its elements whereas Firefox does it anyway.
html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.
What would be a proper css method to make the following so it is the same with the exception that the text input fields vertically line up along their left side?
So the check boxes will still be right up against the input fields and in between the label and input fields, but the input fields still all light up.
Current HTML:
<p><label for="search_uri">Uri:</label><input id="search_uri" type="text" name="Uri" /></p>
<p><label for="search_server">Server:</label><input type="checkbox" name="server_like" /><input id="search_server" type="text" name="Server" /></p>
<p><label for="search_host">Host:</label><input id="search_host" type="text" name="Host" /></p>
Current CSS:
label {
font-size: 90%;
float:left;
width: 15em;
}
Why not just use a negative margin?
.checkbox {margin-left: -16px;}
Depending on the rest of your setup might require a bit of tweaking for cross-browser pixel-perfectness.
I would personally probably also just float both the labels and the inputs and get rid of the <p>:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
display: block;
font-size: 90%;
width: 15em;
clear:left;
}
label, input {
float:left;
}
input[type=checkbox]
/* use .checkbox and add 'class="checkbox"' if you want to support IE6*/
{
margin-left: -2em;
}
</style>
</head>
<body>
<form>
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
<label for="search_server">Server:</label>
<input type="checkbox" name="server_like" />
<input id="search_server" type="text" name="Server" />
<label for="search_host">Host:</label>
<input id="search_host" type="text" name="Host" />
</form>
</body>
</html>
Do this.
HTML Markup:
<form><fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input type="text" name="email" maxlength="32" />
<label>Your Password:</label><input type="password" name="password" maxlength="30" />
</fieldset>
<input id="submit" type="submit" value="Create Account" /></form>
Css Markup:
fieldset {padding: 10px 0;}
legend {font-weight: bold; padding: 0 0 3px 0; color: #f00;}
input {padding: 2px; border-radius: 3px; width: 130px; float: left; margin: 0 0 5px 0;}
label {float: left; width: 150px; text-align: right; margin: 1px 3px 0 0;}
#submit {width: auto; margin: 0 0 0 153px;}
Then add a width to your form, depending on the input sizes, with your checkbox, just float it in between and use margins.
I would do something like this;
<div class="label">Uri:</div><div class="field"><input type="text" /></div>
Then give the div with the class 'label' an default width and float them next to eachother.
EDIT: Saw you changed your post;
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
Your css could be something like
label
{
width: 150px;
float:left;
clear:both; /*Clear the previous row with label and field, not sure if this is needed*/
}
input
{
float:left;
}
If your form is small, you can just use a <table>.
i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...
I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out
Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...
Here's my HTML & CSS3 code (for chrome) :
<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<button>Submit</button>
</form>
#getAfreeQuote form {
display:-webkit-box;
-webkit-box-orient:vertical;
height:500px;
}
#getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
}
#getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;
}
#getAfreeQuote button {
-webkit-box-ordinal-group:4;
}
and the result :
Here's how I'd do it:
<section id="getAfreeQuote">
<form method="post" action="#">
<h2>Get a free quote</h2>
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<br /><input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<br /><input type="submit" value="Submit!" />
<div class="clear"></div>
</form>
</section>
<style>
#getAfreeQuote h2 {
text-transform: uppercase;
color: blue;
}
div.clear {
clear: both;
}
#getAfreeQuote form {
width: 25em;
position: relative;
}
#getAfreeQuote input[name="yourName"]{
width: 43%;
}
#getAfreeQuote input[name="yourEmail"]{
width: 55%;
float: right;
}
#getAfreeQuote textarea{
width: 100%;
height: 10em;
}
#getAfreeQuote input[name="timeScale"]{
width: 100%;
}
#getAfreeQuote input[type="submit"]{
text-transform: uppercase;
background: orange;
border: none;
padding: 1em 2em;
color: white;
float: right;
}
</style>
You have a good start, but you need to know the basics of CSS layout properties. A good start would be to learn the basics from Sitepoint where a very useful guide is present. Good luck.
If you do not have to use a FlexBox you can use width: 50% for the top two text inputs and width: 100% for the textarea and bottom text input. After setting the form with to the desired width of the form