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.
Related
I have the following code for range input along with some style applied:
<style media="screen">
.contactinfo label{display: inline-block;
width: 170px;
text-align: right;
vertical-align:top;
}
.contactinfo div ~ div {
margin-top: 2px;
}
.contactinfo {background:lightyellow; border:10px solid yellow; margin-bottom:10px; width: 720px;}
.contactinfo textarea {width: 180px; box-sizing: border-box;}
</style>
<fieldset class="contactinfo">
<legend>Your indicators</legend> <br>
<div class="">
<label for="ht">Height:</label>
Short <input type="range" name="ht" id="ht" value="" min="0" max="100"> Tall
</div>
<div class="">
<label for="sal">Salary:</label>
Poor <input type="range" name="ht" id="ht" value="" min="0" max="100"> Rich
</div>
</fieldset>
But the text on either side of range input are not aligned properly. Here is what it looks like now:
Even after I remove vertical-align:top it does not align properly.
This is how it looks like now:
What I want is(ignoring the highlight):
Remove vertical-align:top;
see https://jsfiddle.net/aqfcde2d/
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.
I have the below jsfiddle I need to know how should I increase the space for error message in span so that the entire message is displayed correctly.
JSFiddle
<form method="post" action="" id="subscribeForm" name="subscribeForm">
<fieldset>
<label>Name: </label><input type="text" class="effect" name="name" id="name" autocomplete="off" >
<span id="nameInfo">What's your name?</span>
</fieldset>
<fieldset>
<label>Email: </label><input type="text" class="effect" name="email" id="email" autocomplete="off" >
<span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
</div>
<div id="success">
<strong>Data Saved Successfully.</strong>
</div>
</form>
CSS Code
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
JSFiddle
Try increasing the height of the fieldset.
fieldset {
overflow:hidden;
border:0;
height:50px;
margin:3px 0;
}
JSFiddle
Increasing the width of the fieldset or the form will display the error text fully.
So try,
form {
...
width: 285px;
...
}
if you do not want to display bigger form try to set the width of fieldset alone like,
fieldset {
...
width: 270px;
...
}
Check the demo here
, i have set the width of the fieldset here, form size is not changed.
I have a basic css question. I'm trying to add css to my form, the code is below:
<div id="content">
<form id="form1" method="post" action="">
<p>
<label for="name" class="title">Your name:</label>
<input name="name" type="text" class="widebox" id="name">
</p>
<p>
Colour: <select name="colour_pref" size "1">
<option value="1">Pink</option>
<option value="2">Blue</option>
<option value="3">White</option></select>
</p>
<p class="submit">
<input type="submit" name="add" value="add_colour" id="add">
</p>
</form>
</div>
and this is the css:
#content p {
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.submit {
text-align: right;}
The problem is the select element is not aligned with the name field, I tried to add class="title" to it but it made it even messier.
Would really appreciate if you could help me align this select element VERTICALLY with the text field. thanks
Something like this DEMO http://jsfiddle.net/kevinPHPkevin/XzHG2/1/
.submit input {
margin-left:110px;
}
Just add display inline to your pararaph:
p {
display: inline;
}
Demo
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>.