Can somebody give a simple solution as to how to align form inputs on the same line,
for example, many times when I am building a form I can get them to align on top of each other and it looks sound, but if i put two inputs like a textarea/text next to another text or a button, I get vertical alignment differences. Is there a way to fix this without fiddling with the margins and padding?
ex:
<style type='text/css'>
form{
display:inline;
}
textarea{
font-size:25px;
height:25px;
width:200px;
}
input.button{
height:25px;
width:50px;
}
</style>
<form>
<textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>
Have you tried playing with the vertical-align css property?
vertical-align:top;
That way everything will look consistent and you won't have to play with margins.
textarea,input.button{display:inline-block;}
or
textarea,input.button{float:left;}
take your pick depending on which way your vertically challenged
Adding a vertical-align seems to work for me:
<style type='text/css'>
form{display:inline;}
textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>
You can usually use display:inline-block; or float:left; Are you wanting items to be alighed at the top or bottom?
In your example you haven't closed the input type, it should be type='button' - you're missing an apos.
Just give float:left to the textarea
http://jsfiddle.net/2qdJc/2/
<table>
<tr>
<td><input /></td>
<td><input /></td>
</tr>
</table>
Sure, it makes the CSS purists squirm, but it's certainly easy...
You can do something like this ( worked in my case ):
<div style="width:150px"><p>Start: <input type="text" id="your_id"></p>
</div>
<div style="width:130px;margin-left: 160px;margin-top: -52px">
Button
</div>
Here is a demo: http://jsfiddle.net/gn3qx6w6/1/
For me i used a div and put all inputs in div and used vertical-align:top; for div
<div style="vertical-align:top">
<span id="FromDate">From Date</span><input id="FromDatetext" style="margin-left:10px" type="text" name="startdate" />
<span id="ToDate"> To Date</span><input id="ToFatetext" type="text" name="enddate" />
<input id="Submit1" type="submit" value="Search" class="btn btn-dark" />
</div>
Related
I'm aware this may seem like a stupid question that every should know. But I just can't for the life of me work it out.
The look I need to achieve is:
| == radio button
|Terrorists nice even spacing here |Counter-Terrorists
I have these radio buttons:
Image
But what i need is for them to be equally spaced while staying in the dead center of the page.
Ive messed around with them for ages to no avail.
HTML:
<input type='radio' id='choice' value='terrorist' class='radiopick'>Terrorist's
<input type='radio' id='choice' value='countert' class='radiopick'>Counter-Terrorist's
CSS:
input.radiopick{
}
try this.
HTML
<form>
<div class="radiopick">
<input type='radio' id='choice' value='terrorist' />Terrorist's</div>
<div class="radiopick">
<input type='radio' id='choice' value='countert' />Counter-Terrorist's</div>
</form>
CSS
form {
display:flex;
text-align:center;
}
form .radiopick {
justify-content: center;
width:150px;
margin: auto;
}
Have you thought of using tables? Although I don't fully understand the question, if you want even spacing for each box you could do something like:
<!DOCTYPE html>
<html>
<body>
<table style="width:300px" align="center">
<tr>
<td><input class="radiopick" type="radio" name="test" value="yes" />Terrorist</td>
<td><input class="radiopick" type="radio" name="test" value="yes" />Counter-Terrorist</td>
</tr>
</table>
</body>
</html>
An example can be found here
i have html form and css, to side my button side by side. but im not able to give space between the buttons.
here is my code:
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" style="float:left;color:#fff" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" style="float:left" value="colSplit"/>
</form>
<p style="clear:floats"></p>
</div>
</body>
</html>
In this instance, you want to set the form elements to float. From there, you can add a margin to the first form element.
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank" style="float: left; margin-right: 5em;">
<input type="submit" value="paste2"/>
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank" style="float: left;">
<input type="submit" value="colSplit"/>
</form>
</div>
</body>
</html>
The easiest way is to add margin to one of the inputs.
Style="margin-right:30px;"
You may see your code with the 30px space between inputs here: http://jsfiddle.net/d6g66/
A jsfiddle or something to show it in action would be good or at least the css, but you should look into http://necolas.github.io/normalize.css/ for clear fix and without seeing your css, you should be able to use margins or padding.
Give the custom-button class a width and change the second button to float:right
http://jsfiddle.net/v85sH/
The width can be pixel, percentage, anything you like and the two buttons will be spaced evenly to the left & right.
CSS
.custombuttons {
width:100%;
}
.firstbutton {
float:left;
color:#fff;
}
.secondbutton {
float:right;
}
HTML
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" class="firstbutton" value="paste2" />
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" class="secondbutton" value="colSplit" />
</form>
<p style="clear:floats"></p>
</div>
i have my form and it looks like this
<form>
<fieldset>
name:textbox
lastname:textbox
address:textbox
</fieldset>
</form>
and i want my page to align its elements like
<form>
<fieldset>
name: textbox
lastname: textbox
address: textbox
</fieldset>
</form>
i am just using divs is there any other way to achieve this other than using tables?i need to align this elements to give my page a better navigation of inputs.
Use the table-related CSS display values to style block elements as though they were in a table:
display: table
display: table-row
display: table-cell
This will cause your block elements to behave as though they were <table>, <tr>, and <td> elements respectively.
Yes, it's possible just to use divs. Also, I'd use <input> so the user can actually type something in for your inputs.
HTML
<div>
name: <input type="text" />
lastname: <input type="text" />
address: <input type="text" />
</div>
CSS
input {
display: block;
}
http://jsfiddle.net/XzSGd/
<form>
<fieldset>
<label>name:</label> textbox
<label>lastname:</label> textbox
<label>address:</label> textbox
</fieldset>
</form>
If you use an additional tag around, you can set the css to be as follows:
label {
display: inline-block;
width: 100px; //whatever width suits you
}
This way, all the labels will be the same width and, as long as the text is shorter than that, they will make the textboxes align.
You could use classes for the labels. See code below
HTML
<form>
<fieldset>
<span class="label">name:</span> textbox
<span class="label">lastname:</span> textbox
<span class="label">address:</span> textbox
</fieldset>
</form>
CSS
.label{
display:inline-block;
width:150px;
}
*Change the width according to your need.
This is how I would do it. Float everything. Each textbox/label combo gets its own div, which makes it easy to apply a responsive design framework. Make this as narrow as you want by styling the fieldset. Obviously(?) you would want to include names for each input, and for-attributes for the labels.
http://jsfiddle.net/s3jn3/
input {
float: right;
margin-top: 0.5em;
}
label {
float: left;
}
fieldset>div {
clear: both;
}
<fieldset>
<div>
<label>Item A</label>
<input type="text" />
</div>
<div>
<label>Item B</label>
<input type="text" />
</div>
<div>
<label>Item C</label>
<input type="text" />
</div>
</fieldset>
Try to put it in table, like so:
<form>
<fieldset>
<table>
<tr><td align="left">name:</td> <td>textbox</td>
<tr><td align="left">lastname:</td> <td> textbox</td>
<tr><td align="left">address:</td> <td>textbox</td>
</table>
</fieldset>
</form>
Okay, I'm not very familiar with HTML, or how it comes together with CSS. I have been looking all over on how to make two HTML buttons go side by side. Here is the code I'm currently using.
<FORM METHOD="LINK" ACTION="LINK TO WEBSITE" target="_blank">
<input type="submit" value="Forum Home Page">
</FORM>
<FORM METHOD="LINK" ACTION="LINK TO A DIFFERENT WEBSITE" target="_blank">
<input type="submit" value="Skill Guides">
</FORM>
No matter if I put them right after each other or put an alignment infront of them. I can't seem to get them to go next to each other. I hope there is someone that can easily and in a detailed way, help me out.
If I understand you correctly, you can just attach the following CSS:
form {
display: inline;
}
As shown here: http://jsfiddle.net/zcz3j/
Demo http://jsfiddle.net/satinder_singh1/wr4Xv/1/
<div id="main">
<div class="floatdiv"><FORM METHOD="LINK" ACTION="LINK TO WEBSITE" target="_blank">
<input type="submit" value="Forum Home Page">
</FORM></div>
<div class="floatdiv">
<FORM METHOD="LINK" ACTION="LINK TO A DIFFERENT WEBSITE" target="_blank">
<input type="submit" value="Skill Guides">
</FORM></div></div>
<style type="text/css">
#main
{
position:relative;
width:200px;
}
.floatdiv
{
float:left;
width=80px
}
</style>
You could also try wrapping them in a table tag. That's how I fixed my similar issue. The table automatically set them side by side.
I'm still having a hard time not wanting to use Tables to do my Details View Layout in HTML. I want to run some samples by people and get some opinions.
What you would prefer to see in the html for a Details View? Which one has the least hurddles cross browser? Which is the most compliant? Which one looks better if a I have a static width label column that is right aligned?
By Details view i mean something similar to the following image.
Table
<table>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
</table>
Fieldset
<fieldset>
<label /><input type="textbox" /><br />
<label /><input type="textbox" /><br />
</fieldset>
Divs
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
List
<ul>
<li><label /><input type="textbox" /></li>
<li><label /><input type="textbox" /></li>
</ul>
Those approaches aren't mutually exclusive, personally I'd mix them up a bit:
<fieldset>
<label for="name">XXX <input type="text" id="name"/></label>
<label for="email">XXX <input type="text" id="email"/></label>
</fieldset>
Although to get a right aligned label (something I'd personally avoid because it's harder to scan visually) you'll need to have an extra element around the text that isn't around the input, so I'd go for
<fieldset>
<div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div>
<div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div>
</fieldset>
Actually I take that back for simple textbox only inputs I find that the Fieldset option works well.
However, typically I will have multiple controls in a single "row", therefore I go with the div based layout, that way I can put inputs, validators and all into a single element.
I prefer the fieldset containing divs. The label divs are float:left; width:20em and the content divs just have a fixed left margin of 21em or 22em for example. But you have to remember to include a clear div for that to work:
<fieldset>
<div class="labels"><label for="name">Name</label></div>
<div class="data"><input ....</div>
<div style="clear:both"/>
// repeat for next fields
</fieldset>
CSS:
label{
float:left;
text-align:right;
width:115px;
margin-right:5px;
}
input{
margin-bottom:5px;
}
HTML:
<label for="username">UserName:</label><input type="text" id="username" /><br />
<label for="username">UserName:</label><input type="text" id="username" /><br />
Obviously you then can add a div or use the form around it to get a background-color for your whole form etc.
I find that forms are one of the hardest thing to deal with in css because if you're wanting tight control, there's often a lot of css to add that old school HTML would take care of for you. However, if you're willing to accept a uniform natural treatment, then the cleanest way to separate the content and presentation would be:
form { margin: 0; padding: 0; }
fieldset { whatever treatment you want }
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ }
#details label { float: left; width: 190px; text-align: right; }
#details input { margin-left: 200px; }
<form>
<fieldset id="details">
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
</fieldset>
</form>
You CAN use tables to format forms tabularly but use CSS to add styles to the forms. CSS purists will probably say that you shouldn't but the reality is that many browsers often render CSS forms differently and can cause accessibility issues. A table-based form is much more consistent across browsers and much more accessible as well.