In my css file I have set my inputs to float right. But right now I don't want it to float anymore. I don't want to delete it from my css file. Right now I am using overflow:auto and it's not doing anything. Everbody knows that overflow:auto; is supposed to stop a float.
Here is the html without all the clutter
<div class="input_area">
<label id="first_name">First Name</label>
<input type="text" />
</div>
Here is the css
.input_area{height:40%; width:40%; margin-left:10%; background-color:#00BBBB; }
input { overflow: auto; }
If you need more html let me know.
Related
My label is on one line and text is on the next line. How could I modify the css to make them both on the same line? I have tried several things such as float based on other posts but they still are on different lines.
.indentColumn {
width: 71px;
padding-top: 5%;
}
.labelColumn {
width: 71px;
margin-left: 15%;
}
.inputForm {
margin-left: 30%;
}
<div class="indentColumn">
<div class="labelColumn">
<div class="inputForm">
<span class="secNav">
<label display:inline-block; for="username">#springMessageText("idp.login.username", "User ID:")
</label>
<input class="fieldColumn" display: inline-block; id="username" name="j_username" type="text" size="20" maxlength="64" minlength="6"
value="#if($username)$encoder.encodeForHTML($username)#end">
</span>
</div>
</div>
</div>
Thanks for the help everyone.I removed all the divs, display and also the class in the textbox and now they are on the same line. The main issue seemed to be the class in the textbox because only after I removed that did they appear on the same line.
I also found that there was a form div that was set to 250px that was causing the text field to go onto the next line whenever there was a left-margin. Once I removed that, things started working better.
If you want them on the same line, then put them in a container that is wider than 71 pixels.
There isn't room in 71 pixels for them to fit side by side.
CSS
label{
display:inline-block;
}
and remove <label display:inline-block; ... /> - its wrong
HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning</title>
</head>
<body>
...
<h1>Testing</h1>
<span class="error">* Required</span>
<form name="SignUp" method="post" action="">
<fieldset>
<div>
<label>Name:</label><input id="NAME" type="text" name="name" placeholder="Name" required>
</div>
<div>
<label>Email:</label><input id="EMAIL" type="email" name="email" required>
</div>
<div>
<label></label><input type="submit" value="Send" >
</div>
</fieldset>
</form>
</body>
</html>
CSS
body {
background-color:#b0c4de;
font-family:"Times New Roman";
font-size:15px;
}
p {color:blue;}
.error {color: #FF0000;}
label {
display: inline-block;
width: 150px;
text-align: right;
margin-right:30px; //How far the label element and input box
margin-top:100px;
}
fieldset{
//border:none;
padding:15px;
width:500px;
margin:0px auto;
}
The Name: and input box are on one line and the next line is just touching it.
how do i put them apart.
Add a line-height to the div like below:
div{
line-height: 30px;
}
Fiddle
Note: Here, I have applied the property for div tag in general as it is only an example. In actual case, you might want to add a class for the div tags within the fieldset and apply the line-height only for that class. Doing it that way will make sure other div tags in the page aren't affected.
without getting too complicated, something simple as the following will produce the desired results
#NAME, #EMAIL, input[type=submit] {
margin-top:5px;
}
this gives your input fields a small space above so that they are spread out.
Note: I have used specific selectors to apply these values to the fields in your example only.
add below css to your code
div{
margin-top:10px;
}
you can change margin as your requirement.
There are many ways to implement this.
The simplest way is simply to insert a < BR > between label and the input tag.
A second way is to use a table and place the input in the cell below.
An alternative way is to use for example divs and place the label in one div and the input in another and use css techniques like float etc. This has the advantage of controlling everything via css.
I'm trying to simply align a set of text and <input> elements to the right, so that the left side of the inputs always aligns at the same location (they are the same width, so what's really happening is the right side is aligned to the right side of their container), and the left side of the label text is jagged.
It's not ideal for a large form, but for what I need, it looks better that way.
Here's the HTML and CSS (also at this jsfiddle):
HTML:
<div id="pullthrough-control-panel">
<div class="float-l right-text" id="pullthrough-range-panel">
<h3 class="center-text">Date Range</h3>
Start: <input type="text" name="rangestart" />
<br />
End: <input type="text" name="rangeend" />
</div>
</div>
CSS:
.float-l{
float: left;
}
.right-text{
text-align: right;
}
.center-text{
text-align: center;
}
#pullthrough-control-panel{
height: 6em;
padding: .25em;
}
That's it. Now, the real problem comes into play when I try to go cross-browser with the page. As usual, Firefox works as expected. The problem is with Chrome. The lower input ("End") juts out to the right of the upper one. There's no reason this should be happening.
If you have both browsers, you can check it out at the jsfiddle I posted above.
Is this a bug in Chrome's CSS engine? Is there something happening that I'm not aware of?
you can simply change <br/> to <p> and it will work.
http://jsfiddle.net/Jd7PR/
You're doing it all fine, just move the <br /> in the upper line without spaces after the input:
Start: <input type="text" name="rangestart" /><br />
End: <input type="text" name="rangeend" />
jsFiddle demo
That's it!
Here's my demo for you. Seems like chrome didn't like the </br>
DEMO
Do you need to have both a class and an id on one div? (I don't want to say you shouldn't because I'm not sure about that, but I haven't encountered that before)
You could give each input a class/id and then set the css for that class/id as: float:right; - Alternatively you could use position:absolute; - Personally, I would put both pairs in parent divs and use display:inline; and float:right; on the parent divs.
Im currently trying to fix a form that i have built to work on a responsive layout
Ive attached a jpeg of what the form should look like a on full version of the site with the comments field aligned to the right of the rest of fields but when viewed on a mobile i want the comments field to drop below the rest of the fields.
Because i was advised to wrap the comments field in a DIV and place it before the rest of the form fields then float it right, when i view the mobile version the comments field sits at the top of the form instead of the bottom
any suggestions to how i can fix this issue?
see the CSS & HTML below
<style type="text/css">
body {
background-color: #FFF;
}
#form {
width:960px;
background-color:#edf8ff;
height:650px;
}
.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}
.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}
.gezza-comments{
width:437px;
height:300px;
}
-->
</style></head>
<body>
<div id="form">
<form action="" class="gezza-form" method="post" >
<div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />
</form>
Should all fields have a fixed width? Wrap each column in a div, then float both divs left and give them an explicit width.
Put the div with the text area below the other fields in the HTML.
That should get you a lot closer.
Then, you will need to wrap each field / label pair in a div too.
On the mobile view it should all go into place more or less (bit of padding / margin needed maybe).
Then, on the wider view float the div for the text area right and the other fields' divs left. You'll need to set width for them .. say 49% each.
You'll need to use a clear fix on the element after this lot to clear the floats.
I have a 50x50 image and an <input type="text" /> field that I want to be on the right side of the image. I've tried this:
<img src="missing-image.png" />
<div name="image_input">
<input type="text" />
</div>
And with this CSS:
#image_input {
position: absolute;
top: 10px;
}
But the text input won't go to the right side of the image. Also as you can see I want it to be centralized with the height of the image and as I can see it won't work too. How I can correct this?
PS: All that is inside a <form>
Position absolute gives you more control:
HTML
<div name="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
CSS
div {
position:relative;
}
input{
position:absolute;
right:10px;
bottom:20px;
}
Try this:
<div id="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
and the CSS:
#image_input img {
float: left;
clear: none;
}
Note that I changed the div's "name" attribute to an "id" attribute.
there are a couple of ways to center align text next to an image. you can put it in a list and make the image the list style type. The other thing you can do it properly pad the element to center align it.
Try changing to this:
<div name="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
And the CSS:
.img {
display: inline-block;
}
To center the height, you might want to use one of the vertical-align options on the input tag.
such as:
input {
vertical-align: middle;
}
I don't use vertical-align very much, so you might have to tweak it a little to get it to work, but see here: http://www.w3schools.com/css/pr_pos_vertical-align.asp