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
Related
I have a simple HTML form with some validations but the text labels get misplaced when the form appears.
This is the form before (PLEASE NOTE: The red square around it is not part of the form, I just placed it with Paint to help you see the problem quick):
And after:
Any hint to keep the label aligned with the text field please?
UPDATE:
This is the code:
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Here is the CSS:
.form-element {
display: inline-block; margin: 5px; width: 98%; clear: both; vertical-align:top
.text-label {
width: 20%; text-align: right; display: inline-block; padding: 3px 5px 0px 1px;
}
.standard-text-field {
width: 10em;
}
I am making a simple (ha!) table. There are problems with what I've included that I would like to fix.
I would like the left hand edges of the input fields to line up. The checkbox and button don't.
I would like to vertically center the text in the labels w.r.t. the associated text input controls.
I would like to avoid the 12em margin on the final submit button.
Thanks. Any ideas appreciated.
p {
text-align: center;
}
p label {
float: left;
clear: left;
width: 20em;
text-align: right;
margin: .25em 1em 0em 0em;
padding: .25em;
}
p label input {
float: right;
clear: right;
padding: .25em;
}
#submit {
clear: both;
float: left;
margin: 1em 0em 0em 12em;
clear: left;
width: 6em;
text-align: center;
background: yellow;
}
p > input {
text-align: center;
}
span {
padding: 0em 1em 0em 0em;
}
<form>
<div>
<p>
<label><span>Name:</span>
<input id="name" type="text" placeholder="Name" autofocus required>
</label>
</p>
<p>
<label><span>Password:</span>
<input id="password" type="password" placeholder="Password" required>
</label>
</p>
<p>
<label><span>Are you a photographer?:</span>
<input id="photog" type="checkbox">
</label>
</p>
<p>
<input type="submit" id="submit" value="Register">
</p>
</div>
</form>
This doesn't do everything you want but it's a start. I've taken <input> elements outside of the <label> elements allowing the <label>s to get a fixed width by adding display: inline-block. I also gave the <label>s a for attribute to keep them linked to their corresponding <input> field. By adding an empty <label> in front of the submit button it gets the proper layout.
In general it's a good idea to use float as little as possible and to style using classes instead of styling the html elements directly. I personally always look at Bootstrap (in this case its forms styling) to see how they do it.
label {
width: 11em;
display: inline-block;
text-align: right;
margin-right: .25em;
padding: .25em;
}
input {
padding: .25em;
}
#submit {
margin: 1em 0em;
text-align: center;
background: yellow;
}
<form>
<div>
<p>
<label for="name">Name:</label>
<input id="name" type="text" placeholder="Name" autofocus required>
</p>
<p>
<label for="password">Password:</label>
<input id="password" type="password" placeholder="Password" required>
</p>
<p>
<label for="photog">Are you a photographer?:</label>
<input id="photog" type="checkbox">
</p>
<p>
<label></label>
<input type="submit" id="submit" value="Register">
</p>
</div>
</form>
My suggestion is to use a table (ha!) in the first place.
Consider using: http://jsfiddle.net/qy911wrb/
<table><tr><td></td></tr></table>
has been added and some CSS was adjusted that you requested.
Please indicate if there should be any other visual adjustments.
I have been trying for several hours to format my form neatly without the use of a table.
I've floated the labels left and the inputs right but they still don't line up neatly with each other. Ideally it would look like so:
Label(Root Diameter) | Input(text) | label(mm)
I know I can do it using a table but I am looking for a more elegant and professional way of doing it. If someone could just point me in the right direction and perhaps give me an example I would appreciate it greatly.
Here is my code.
html:
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="criticalSpeedCalc.js"></script>
<link rel="stylesheet" href="calcstyle.css">
</head>
<body>
<div id="calcWrapper">
<form name="calculator" id="calculator">
<label class="type">Unit of Measurement:</label>
<br>
<select name="unit" class="input">
<option value="120904000">Metric (cm)</option>
<option value="4760000">Imperial (inches)</option>
</select>
<br>
<label class="type">Root Diameter:</label>
<br>
<input type="text" name="root" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">Width between bearings:</label>
<br>
<input type="text" name="bearings" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">End Fixity:</label>
<br>
<select name="fixity" class="input">
<option value=".36">1</option>
<option value="1.0">2</option>
<option value="1.47">3</option>
<option value="2.23">4</option>
</select>
<br>
<label class="type">Max Speed:</label>
<br>
<input type="text" name="speed" class="input" autocomplete="off">
<label for="rpm">rpm</label>
<br>
<br> Reset
Calculate
Exit
</form>
</div>
</body>
#calcWrapper {
background-image: url("Design1.png");
width: 265px;
height: 365px;
float: left;
/*border-width: 2px;
border-style: solid;*/
}
css:
#calculator {
width: 186px;
height: 230px;
margin-left: 38px;
margin-top: 115px;
padding-left: 5px;
font: bold 11px Helvetica, Arial, sans-serif;
text-align: center;
-moz-box-sizing:content;
/*border-width: 2px;
border-style: solid;*/
}
.input {
margin: 1px;
max-width: 80px;
max-height: 10px;
font: bold 10px Helvetica, Arial, sans-serif;
display: block;
vertical-align:middle;
margin-bottom: 10px;
float: right;
}
select.input {
max-height: 18px;
}
label.type {
width: 80px;
display: block;
vertical-align:middle;
float:left;
clear:left;
margin: 2px;
}
And here is a fiddle link
You can have "normal" html tags and table-like display using the CSS Table Model
Since this is not a tabular data not using table is the right choice however you can use div elements to create a table :)
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
Here is the fiddle: http://jsfiddle.net/3Ej7Q/3/
You can just float your .input class to the left and make it a bit narrower (max-width:70px).
See it here: http://jsbin.com/pepixare/1/edit
I use div's to solve this problem.
my width is in % you can use px if you prefer.
col- represents the width of the div in %.(col-40 == width:40%;)
you can easily implement this with other attributes like inputs,ul,ol,a,img ect.
<div class="table">
<div class="tr">
<div class="th col-40 fl pd-l-2">monday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
<div class="th col-40 fl">tuesday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>
.table {
width: 100%;
float: left;
cursor: pointer;
}
.table .tr {
float:left;
width:100%;
height:40px;
}
.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;
}
I managed to find the solution to my problem which involved setting all the elements inside the form to display:inline-block, and setting the form's text-aligntment to justify.
For a better explanation than I am able to give give this a squiz. (The answer is in the text align section)
And here is a link to an updated fiddle
Hope I was able to help anyone in the same predicament.
Is possible align SELECT and INPUT inline without specify WIDTH size, without using tables and with the same HTML? See picture.
Live example: http://jsfiddle.net/N4hpQ/
Thank you.
<html>
<head>
<style>
fieldset {
display: inline-block;
}
fieldset input,
fieldset select{
float: right;
margin-left: 5px;
}
fieldset p {
text-align: right;
}
</style>
</head>
<body>
<fieldset>
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset>
</body>
</html>
You could use css display: table; to achieve this.
HTML
<fieldset>
<p>
<label>First Name: </label>
<input type="text" />
</p>
<p>
<label>Second Name: </label>
<input type="text" />
</p>
<p>
<label>Country: </label>
<select>
<option>Choose</option>
</select>
</p>
<p>
<label>Age: </label>
<select>
<option>Choose</option>
</select>
</p>
</fieldset>
CSS
fieldset {
display: table;
}
fieldset p {
display: table-row;
}
fieldset input,
fieldset select,
fieldset label {
display: table-cell;
margin: 3px;
}
fieldset label {
text-align: right;
}
Demo
Without TABLE or width.
CSS:
FIELDSET {
display: inline-block;
line-height: 200%;
}
.labels {
text-align: right;
float: left;
margin-right: 5px;
}
.inputs {
float: left;
}
And HTML:
<fieldset>
<div class="labels">
<label>First Name: </label><br />
<label>Second Name: </label><br />
<label>Country: </label><br />
<label>Age: </label>
</div>
<div class="inputs">
<input type="text" /><br />
<input type="text" /><br />
<select><option>Choose</option></select><br />
<select><option>Choose</option></select>
</div>
</fieldset>
And the fiddle
EDIT
It seems that you've edited your question. If the same HTML (as in your example) is required, my answer is not valid anymore.
Possible? Yes, here's a quick hack to do it even:
float your labels left, float your inputs right, then give the inputs a margin-right, to put them in position to be next to your labels.
so would look like this:
p label{
float:left;
}
p input{
float:right;
margin-right: /*whatever value you need this to be to look good*/;
}
here is the jsfiddle.
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.