I have this code:
<label for="filter_da" style="color: #ffffff;">Da</label>
<input value="" id="filter_da" name="filter_da" type="text" />
how can I align the label at the top of the input in css mode?
<label for="filter_da">Da</label> <br />
<input value="" id="filter_da" name="filter_da" type="text" />
or
<div> <label for="filter_da">Da</label> </div>
<div><input value="" id="filter_da" name="filter_da" type="text" /></div>
do you mean?
label {display:block;}
by declaring label as block element, anything placed after it will occupy new line.
Hope that help :)
Put the Label in Div tag and use style float:top.
If you want to use in css then write this in css class and embed the class in label.
.classTop
{
width:100%;height:10%; float: top;
}
Related
I have a input field that's centered in the middle of the screen. I also wanted to have the label under the input field but having trouble trying to figure out how to align the text to the bottom left of the input field instead of bottom center. The result im seeing is the label is moving too far to the left.
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<input type="text" name="password" value=""><br>
<label style="display:block; text-align:left">Password</label>
</div>
</body>
</html>
Set width to both input and label and make the label display:inline:block
<div style="text-align:center">
<input type="text" name="password" value=""style=" width:150px;"><br>
<label style="display:inline-block; text-align:left;width:150px;" >Password</label>
</div>
You can maybe try 2 separate div's inside the main div. Have a fixed/relative width of the parent div. Some thing like this.
<div style="text-align:center;width:120px">
<div><input name="password" type="text" value="" /></div>
<div style="display: block; text-align: left"><label>Password</label></div>
</div>
I'd simply add a margin-right to the label.
Check out the jsfiddle
<body>
<div style="text-align:center">
<input type="text" name="password" value=""><br>
<label style="display:block; margin-right:110px;">Password</label>
</div>
</body>
To the label, add
position: relative;
left: 10%;
Change the left value to whatever makes it line up.
Suppose I have a web page with a form:
<form>
<label for="FirstName">First:</label>
<input name="FirstName" type="text">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text">
<label for="LastName">Last:</label>
<input name="LastName" type="text">
</form>
If I size the browser window small enough, I get a line break between the label that says "Middle:" and the "MiddleName" input. It would be better to put a break between labels and input fields that are not related, e.g. break between "FirstName" input and label for "MiddleName", and/or between input "MiddleName" and label for "LastName". Obviously I can add <br/> tags, but is there a good way to keep the related items together, and still use only 1 line when the browser window is wide enough?
I realize this is a contrived example, but this is pattern I am having trouble with in several more complicated real world forms.
Put the inputs inside the labels, you don't even need the for attributes. Then style the labels with white-space: nowrap to prevent automatic line breaks.
label { white-space: nowrap; }
<form>
<label>First: <input name="FirstName" type="text"></label>
<label>Middle: <input name="MiddleName" type="text"></label>
<label>Last: <input name="LastName" type="text"></label>
</form>
Surround the related elements within an wrapper and then prevent line breaks inside the wrapper with CSS:
.wrapper {
white-space: nowrap;
}
<form>
<span class="wrapper">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrapper">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrapper">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
You can surround each set with a wrapper that is display: inline-block;
.wrap {
display: inline-block;
/* Only include this if
you don't want the text within the spans
to wrap when the window is small enough
*/
white-space: nowrap;
}
<form>
<span class="wrap">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrap">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrap">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
I use getuikit for form styling, they do it with something like this:
HTML
<label>My label</label>
<div class="controls"><input type=text/></div>
CSS
label {
float:left;
margin-top:5px; //to center the label vertically
width: 200px;
}
.controls {
margin-left:200px;
}
It doesn't break semantics. Putting input inside label is little strange :)
I want to display the inputbox with center alignment which is in div tag.Now I did this by using
<div class="nam">
<center><input type="text" name="name"></center>
<center><input type="text" name="pass"></center>
<center>
... </center>
</div>
I want to do this with css code.
Try following
HTML Code:
<div class="nam">
<div>
<input type="text" name="name">
</div><div>
<input type="text" name="pass">
</div>
</div>
CSS:
.nam{
text-align : center;
}
The <center> element was deprecated because it defines the presentation of its contents -- it doesn't describe its contents.
There are different ways of centering the things with CSS.
My suggestions is to adding text-align: center to your class nam.
.nam {
text-align: center;
}
<div class="nam">
<input type="text" name="name">
<input type="text" name="pass">
</div>
I'm working on a simple contact form, but I'm having some issues making my content float next to each other.
<article>
<form action="contact.html">
<label for="naam">Naam*:</label>
<input type="text"
id="naam"
required="required"/>
<br/>
<label for="voornaam">Voornaam*: </label>
<input type="text"
id="voornaam"
required="required"/>
<br/>
<label for="straat">Straat: </label>
<input type="text"
id="straat" />
<br/>
/*Some code is left out */
<label for="message">message*: </label>
<textarea rows="4"
cols="16"
required="required">
</textarea>
<br/>
<input type="submit"
value="Verzenden"
id="btnVerzenden" />
</form>
</article>
And this is my current CSS
label
{
width:100px;
float:left;
}
How can I make my "Message" textarea float on the right side of the article while the rest is on the left side?
UPDATE
#PSCoder solved it!
This fiddle shows the solution - http://jsfiddle.net/8PvkV/
Give your label : display: inline-block;
label {display: inline-block}
Here's a sample:
http://jsfiddle.net/Riskbreaker/35Hyh/1/
You want to either move the textarea element before the rest or float the form to the right.
Because of the order that you have entered the elements, the "Message" text box is cleared and then floated.
How can I horizontally align a form? For example:
<form>
<input type="email" placeholder="example#ravvel.com">
<div>
<input class="enter" type="submit" value="Send"/>
</div>
</form>
Will give boxes as such:
email
send
Whereas I want them to appear in this fashion:
email send
remove div tag like this :
<form>
<input type="email" placeholder="example#ravvel.com">
<input class="enter" type="submit" value="Send"/>
</form>
Simple way:
<form>
<input type="email" placeholder="example#ravvel.com">
<input class="enter" type="submit" value="Send"/>
</form>
More style-ish way:
<form>
<div style="float:left"><input type="email" placeholder="example#ravvel.com"></div>
<div style="float:left"><input class="enter" type="submit" value="Send"/></div>
</form>
Get rid of your DIV. You don't need it.
<form>
<input type="email" placeholder="example#ravvel.com">
<input class="enter" type="submit" value="Send"/>
</form>
You can add a float: left style to each div that wraps the form elements.
Add the CSS property display with the value inline to the DIV:
#yourdiv
{
display: inline;
}
Well, simply put - if you use float:left on your div elements, it should align them horizontally and get you on your way.
<form>
<input type="email" placeholder="example#ravvel.com" style="float:left;">
<div>
<input class="enter" type="submit" value="Send" style="float:left;"/>
</div>
</form>
<input type="text"/>
<input type="submit"/>
Input elements are inline-block, meaning they're always on the same line, the reason why you got 2 lines, is because the div element is a block element, in order for it to be able to be aligned with other elements in the same "line", it must be floated, or positioned not relatively.
example
If you want all fields inside a form aligned, you can add display:inline as a CSS rule to the containing elements. I generally like to use paragraph tags to separate each label+input tag, or an un ordered list. To update your example:
<form>
<ul>
<li><input type="text" type="email" placeholder="example#example.com" /></li>
<li><input type="text" type="submit" value="send" /></li>
</ul>
</form>
<style type="text/css" media="screen">
form ul {
list-style:none;
}
form li {
display:inline;
}
</style>
This will work for each field you add as a new list item.
Strangely, in my case, simply removing 'div' did not help. I have to explicitly put "float:left" to each input in order to get everything in one line. Hopefully it helps someone who falls in the same situation.