text around range input vertically shifted in html - html

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/

Related

Can you have 4 in line text area fields with a radio button and label above?

I am a bit of a rookie and building a form to ask a series of questions. The idea is that a manual selection is made using a button and then text typed into a box. The display for the end user I am going for would look like the following:
QUESTION
TEXTAREA LABEL
RADIO BUTTON (yes/ no)
TEXTAREA
The question at the top in bold aligned left
On the line below there would be 4 labels (currently sitting on top of the text area in the code)
On the line below this each textarea would have a radio button above it. The options would be 'yes' and 'no' in response to the question.
I have made progress with 4 text area boxes inline and a label above. I just need to move the labels up, add a radio styled as a button (2 options - yes/ no) above the text area and expand the border so all this comes inside.
See my HTML and CSS so far below
.textAreaColumn{
width:100%;
}
.textAreaColumn div{
float:left;
width:25%;
border:1px solid grey;
padding:10px;
box-sizing: border-box;
}
.textAreaColumn div span{
display:block;
}
.textAreaColumn div textarea{
box-sizing: border-box;
width:100%;
border:1px solid grey;
min-height:150px;
}
.boxed {
border: 1px solid grey ;
padding:10px;
}
<div class="boxed">
<strong>Q1) Manager guidance when reviewing CSO feedback</strong>
</div>
<div class="textAreaColumn">
<div>
<span>Previous position</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Target set at last meeting</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Current position</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Target for next meeting</span>
<textarea placeholder="text"></textarea>
</div>
</div>
floatis for floating images within a paragraph only. Befor the introduction of flexbox and css-grid 2012 it was a hack for styling purpose. It remains a ahck which now is mis-used as it is unecessary. Unfortunatly many tutorials still keep teaching it instead of the use of flexbox and css-grid.Those are the more powerful and far better ways of styling as they are the right tools for it.
So as first step, delete the float property: .textAreaColumn div { float: left; }.
Then add: .textAreaColumn { display: flex; }. This will add flexbos to the container and all the divs within the container will have the same height and be displayed next to each other.
Next add: .textAreaColumn div { display: flex; flex-direction: column; }. this will align the items of the divs below each other.
Add radiobuttons with the use of a simple form like this:
<form>
<input type="radio" id="form-a-yes" name="form-a">
<label for="form-a-yes">Yes</label>
<br>
<input type="radio" id="form-a-no" name="form-a">
<label for="form-a-no">No</label>
</form>
Last but not least add: .textAreaColumn din span { flex-grow: 1; } to consume all remaining space so everything is perfectly aligned.
.textAreaColumn {
width: 100%;
display: flex;
}
.textAreaColumn div {
display: flex;
flex-direction: column;
width: 25%;
border: 1px solid grey;
padding: 10px;
box-sizing: border-box;
}
.textAreaColumn div span {
display: block;
flex-grow: 1;
}
.textAreaColumn div textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid grey;
min-height: 150px;
}
.boxed {
border: 1px solid grey;
padding: 10px;
}
<div class="boxed">
<strong>Q1) Manager guidance when reviewing CSO feedback</strong>
</div>
<div class="textAreaColumn">
<div>
<span>Previous position</span>
<form>
<input type="radio" id="form-a-yes" name="form-a">
<label for="form-a-yes">Yes</label>
<br>
<input type="radio" id="form-a-no" name="form-a">
<label for="form-a-no">No</label>
</form>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Target set at last meeting</span>
<form>
<input type="radio" id="form-b-yes" name="form-b">
<label for="form-b-yes">Yes</label>
<br>
<input type="radio" id="form-b-no" name="form-b">
<label for="form-b-no">No</label>
</form>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Current position</span>
<form>
<input type="radio" id="form-c-yes" name="form-c">
<label for="form-c-yes">Yes</label>
<br>
<input type="radio" id="form-c-no" name="form-c">
<label for="form-c-no">No</label>
</form>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Target for next meeting</span>
<form>
<input type="radio" id="form-d-yes" name="form-d">
<label for="form-d-yes">Yes</label>
<br>
<input type="radio" id="form-d-no" name="form-d">
<label for="form-d-no">No</label>
</form>
<textarea placeholder="text"></textarea>
</div>
</div>

how to vertically align this select element

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

How can I layout text and inputs on a form to fit a specific width (justified)?

I have a form and I am trying to make a row "justified" so the entire row (which is a 4 textboxes and labels) to fit an exact pixel width (lets say 800px). Normally, if i just lay it out without any special css, It is less than 800px. I want to "stretch" it to be 800px. I don't care if I have to stretch the textboxes or the spaces in between them.
This is similar to justified layout in MS word if that helps describe what i am looking for. Is this possible within html / css in a form layout?
You basically need text-align-last: justify which specifies the justification of the "last text line" in a block element, this defaults namely to the standard direction, which is left in LTR.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 15994654</title>
<style>
#fields {
width: 1000px;
border: 1px solid gray;
}
.justified {
text-align-last: justify;
}
</style>
</head>
<body>
<p id="fields" class="justified">
<label for="input1">label1</label>
<input id="input1" />
<label for="input2">label2</label>
<input id="input2" />
<label for="input3">label3</label>
<input id="input3" />
<label for="input4">label4</label>
<input id="input4" />
<p>
</body>
</html>
This works in IE and Firefox (for older Firefox versions, add -moz-text-align-last: justify if necessary), however this fails in Webkit based browsers (Chrome/Safari). To cover those browser as well, you'd need to replace .justified as follows, so that the last line doesn't appear as a "last line" anymore, so that text-align: justify can do its job the usual way:
.justified {
text-align: justify;
}
.justified:after {
content: '';
display: inline-block;
width: 100%;
}
Note that the text-align-last: justify becomes redundant this way.
Here's the jsfiddle demo.
Actually, there's a very natural way to do this with pure CSS using text-align: justify;.
You didn't succeed because justification doesn't work for the last line (and when there's only one line, it's considered to be the last). There's a CSS3 property that sets text alignment for the last line: text-align-last. Unfortunately, it is not broadly supported.
The solution is to spawn an extra element that will drop to next line, then the first line will be justified:
<form>
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
</form>
form {
width: 800px;
text-align: justify; /* Can we really make this work? Sure! */
}
input {
display: inline-block; /* making elements respect text-align */
}
form:after {
content: ""; /* creating a hidden element that drops to next line */
display: inline-block; /* making it respect text-align and width */
width: 100%; /* forcing it to drop to next line */
}
Demo: http://jsbin.com/ituroj/5/ (click "edit" in top right corner to fiddle with the code).
Result: semantic, no HTML footprint, minimal CSS code, full browser support.
One approach would be:
input[type=text] {
width: 25%;
box-sizing: border-box;
}
Or, if the fields are really inside a <table/> like in this Fiddle, you can set the width of the textboxes to 100%, so the table controls the width:
input[type=text] {
width: 100%;
box-sizing: border-box;
}
You can do it by nesting the input and labels inside of 'columns' that you determine the width of by percentage - this way you can control the width of the form and the inputs will stay justified.
HTML
<form>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4 last">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
</form>
CSS
form{
width:800px;
}
.col4{
width:23.5%;
margin-right:2%;
float:left;
}
.last{
margin:0;
}
.inputWrapper{
width:100%;
}
.textInput{
border:1px solid #ccc;
display:block;
padding:5px;
}
.textInput input{
width:100%;
border:none;
padding:0;
}
You can see a jsFiddle example here http://jsfiddle.net/patricklyver/4mbks/
You can combine float with box-sizing. You will have to float, because forms have different weirdness around them in different browsers. For example in Safari on OS X there is always a hidden 1px padding on the top.
JSfiddle
HTML
<form id="myForm">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<div class="clear"></div>
</form>
CSS
#myForm {
border: 1px solid blue;
width: 800px;
}
#myForm input[type=text] {
margin: 0px;
display: block;
float: left;
box-sizing: border-box;
width: 25%;
border: 0px;
background-color: orange;
}
#myForm .clear {
clear: both;
}

what is the best practice for aligning html

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.

CSS Label, Checkboxs, and Inputform Lineup

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>.