I've tried a few things but haven't been able to get the result I am after.
This is my jsfiddle:
http://jsfiddle.net/spadez/2JTfc/4/embedded/result/
This is the code:
<div id="header">
<img src="test.jpg" />
<form id="search_form">
<input class="kw" id="keyword" placeholder="Keyword" type="text"></input>
<input id="loc" placeholder="Location" type="text"></input>
<input type="submit" value="Search" class="button" id="search">
</form>
<ul>
<li>Post
</li>
</ul>
</div>
How can I move the form so that it sits to the right of the test.jpg image in the header on the same line? Should I be surrounding it in divs and floating it, or is there a nicer way?
Add display:inline-block to form
#search_form{
display:inline-block
}
DEMO
Try this:
#header img {vertical-align: middle;}
#header form {display: inline-block; vertical-align: middle;}
The last act is to remove float: left from the inputs.
The default display style of a form is block. So you'll need to change that to inline-block as you want it to appear inline. See this jsFiddle
#search_form {
display: inline-block;
}
Related
I want to display textbox first and then button.But now button appears first.I attached css code and html
css
.search,.stxt{
float: right;
}
html
<form method="POST">
<p style="align:right;">
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search" class="search">Search</button></p>
</form>
The nature of floats will prioritise the first element in the list. This is why your input text box is to the right.
I would recommend wrapping your elements within a div and having that float to the right instead.
Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
So add the same class for both elements like below
HTML:
<form method="POST">
<p style="align:right;">
<input class="stxt alignLeft" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search alignLeft" class="search">Search</button></p>
</form>
And remove the float:right; in the .search,.stxt classes in CSS styles and add the following CSS:
.alignLeft{
float: left;
}
p{
margin-left: 290px;
}
Fiddle:http://jsfiddle.net/gvmtuo5j/1/
Alternative:
Try Like this:
.search,.stxt{
float: left;
}
p{
margin-left: 290px;
}
check out this fiddle:http://jsfiddle.net/gvmtuo5j/
Just move the button before your input text :
<form method="POST">
<p style="align:right;">
<button name="search" class="search">Search</button></p>
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
</form>
Or the simpliest way is to put the float right on your <p> tag and remove the others float right
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 get the following snippet of html from a CMS:
<label title="">
Land
<input id="Land" name="Land" size="20" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="Land" data-valmsg-replace="true"></span>
</label>
I need to center the text Land, but I can't seem to figure it out. I've tried setting text-align: center on the label, but it doesn't work. I can't modify the markup. Is it something simple I'm missing?
EDIT:
I want to center it over this input:
Don't mind the right edge of the input field. The label span 100% of the width of the input field.
There is two ways to deal with that .
1.The display property specifies if/how an element is displayed so label must be displayed as block or inline-block to center it
label {
display: inline-block;
text-align: center;
}
2.you can use html tag center
<center>
<label title="">
Land
<input id="Land" name="Land" size="20" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="Land" data-valmsg- replace="true"></span>
</label>
</center>
And if you want to center the word Land over the centered Label , you can just add this
<center>Land</center>
the tag is an inline element and therefore exactly the same width of its content.
You would need a div or something to do this
Doing this without being able to alter the markup itself would be messy at best and will probably consist of some javascript/jquery
the label is not expanding on 100% width because it's an inline element. to enable this - set on the label css:
label {
display: block;
text-align: center;
}
or insert the text directly into a block element like: div, etc.
Edit:
Simply add the following CSS to achieve the desired result:
label input, label span {
display: block;
}
See a live demo: http://jsbin.com/sebinuje/1/edit?html,css,output OR http://jsfiddle.net/mayank_agarwal/5yUQr/
Enclose the snippet with a div element and apply the text-align property on the div.
HTML:
<div id="label-enclosure">
<label title="">
Land
<input id="Land" name="Land" size="20" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="Land" data-valmsg-replace="true">
</span>
</label>
</div>
CSS:
#label-enclosure{
text-align:center;
}
Although I'm loath to recommend using a <br/> tag here is one way given your current structure
JSfiddle
HTML
<label title="">
Land
<br/>
<input id="Land" name="Land" size="20" type="text" value=""/>
<span class="field-validation-valid" data-valmsg-for="Land" data-valmsg-replace="true"></span>
</label>
CSS
label {
text-align: center;
display: inline-block;
}
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>
I have a form inside a #main div, I want all the label to be on the left, and all the input area to be on the right.
So i have these CSS:
.right{
float:right;
}
#main{
width:80%;
}
textarea{
resize:none;
}
and the HTML:
<div id="main">
<form name="form1">
<div>
<label for="name">Name</label>
<input type="text" name="name" class="right">
</div>
<div>
<label for="description">About you</label>
<textarea name="description" class="right"></textarea>
</div>
<div>
<label for="location">Location</label>
<input type="text" name="location" class="right">
</div>
<input type="submit" value="Submit">
</form>
</div>
but the textarea doesn't want to go on the right, plus the inputs are going through the divs
here a jsfiddle:
http://jsfiddle.net/malamine_kebe/ZE7tp/
You need to include a float:right to the textarea.
Updated approach here: http://jsfiddle.net/nbrLJ/
Also include a clear:both to the div's.
Tip - you can target the form elements without a new class name, for example:
div.row input,
div.row textarea {
float:right;
}
Adding a width to the parent container will also help:
#main {
width:300px;
}
I'm no expert but I think you need to clear your floats
.clearfix {
clear: both
}
http://jsfiddle.net/ZE7tp/2/
Your inputs are running into each other. Notice they are pushing each other to the left. Set margins to give it some breathing room.
div {
margin: 3em 0;
}
http://jsfiddle.net/ZE7tp/3/