I have a problem with my web form fields not lining up properly.
see screenshot: http://awesomescreenshot.com/00cw0c80e
The label is longer than normal BUT I need it to be that long. If I shorten the label, it lines up find as expected.
Anyone can help?
Thanks! :)
ps. I've looked at various samples in the net but no go.
my css
input.issu {
margin-bottom: 8px;
width: 220px;
}
label.issu {
display: block;
float: left;
margin-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
width: 270px;
text-align: left;
vertical-align: top;
}
select.issu {
margin-bottom: 8px;
width: 240px;
}
br.issu {
float: clear;
}
my html code (I've tried with and without div tags)
<div>
<label for="departingFrom" class="issu">Direct flight into Singapore from (please name city)<span class="red">* required</span></label>
<input id="departingFrom" name="departingFrom" class="issu" value="" type="text">
<br class="issu">
</div>
<div>
<label for="additionalInfo" class="issu">Additional info(e.g. accompanying family members)<span class="red">* required</span></label>
<input id="additionalInfo" name="additionalInfo" class="issu" value="" type="text">
<br class="issu">
</div>
add overflow:hidden property to container div of label and input as follow. It will work fine.
css:
div{
overflow:hidden
}
Use a table, putting the labels in one column, input fields in another. Then set vertical-align on the cells as desires (there are different interpretations on what “lining up” means in a case like this).
Related
So I'm making a fill in the blank with text in between (See my previous question), now I have a problem where I evenly spaced the text in-between with margin-left and margin-right however if I put let's say 1 instead of 0 it looks like 1 : and with 0 it's normal 0: but since 1 is fewer pixels it doesn't look very good, I could always just leave it like that and hope nobody notices but I'd like to probably make it as clean looking as possible.
See for yourself here
If not here's the code,
.text1 {
display: inline-block;
font-size: 4vmin;
margin-right: -22px;
margin-left: -4px;
user-select: none;
text-align: right;
}
.fill-out {
outline: none;
border: 0;
margin-left: 18px;
display: inline-block;
}
#box1 {
width: 13px;
}
#box2 {
width: 13px;
}
#box3 {
width: 21px;
}
<div>
<input class="fill-out" id="box1" type="text" placeholder="00" maxlength="2" />
<span class="text1">:</span>
<input class="fill-out" id="box2" type="text" placeholder="00" maxlength="2" />
<span class="text1">.</span>
<input class="fill-out" id="box3" type="text" placeholder="000" maxlength="3" />
</div>
```
Type in only 2's then run again and type in 1's
Try using monospaced fonts.
because i don't think you will have the result you want with the default font.
see on wikipedia the difference wiki.
I've trying to do something that I'm sure is simple, but I can't do it.
All I want to do is have an image and then some text after that image, and be able to control accurately the amount of space between the image and the text.
Here's my code:
<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189">
</div>
In my style sheet, wrap has these attributes:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
I want my text to look like this directly below the image:
Username
Age
Location
Currently, I just add loads of break tags to control where I have the text, but that's messy and there must be a better way.
Thanks in advance for any help.
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189" />
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
#bottomText{
margin-top: 10px;
}
Change margin-top: 10px to the desired distance.
Change bottomText to a class rather than an id, if you plan on having more than one.
(Note: I removed your "" from the second div because I'm not sure why that was there.
Check this solution jsfiddle. Personally I will not use inline style, because it becomes more messy. I have used <ul> for the text. This can give you better control over the position of the text.
Just use an Unordered List for the text since it is a list. ul are "block level elements" so they will self-clear. And definitely use an external stylesheet vs. inline styles. External is much cleaner and easier to work with and make changes to. Example: http://jsfiddle.net/codeview/Fk3EK/
HTML:
<div class="wrap">
<img src="30000000_1.jpg">
<ul>
<li>Username</li>
<li>Age</li>
<li>Location</li>
<ul>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: yellow;
color: black;
padding: 10px;
margin: auto;
}
ul { list-style-type:none; }
li { padding:5px 0; }
I can't get it to work. Probably because you guys can't see the other code I have going on. But maybe I was approaching the problem in the wrong way.
Here's my code before I started fiddling with css positioning:
<br><br>
<div class="imgleft">
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> User69 </font> <img src="online01.gif" alt="" border="0" style="float:center"><br>
Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name());</script></span>
</script></br>
<br><br>
The problem is, the images have a set width, but vary in height, so sometimes I'll use 8 break tags, other times 7, but the exact distance beneath each image (where the text goes) is different. And it looks bad.
There are 3 images on the page, so it goes image, text (well, there's an image as well, flashing gif) below image, then another image with text below it, and so on. From top to bottom on the left of the page.
Here are the relevant bits from my css:
.imgleft {
float: left;
width: 120px;
}
.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;
}
I'm certain I'm making this way more complicated than it needs to be! Sorry.
I've put a link to my code in the comments to the first answer, if someone could take a look. Thanks.
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form
I'm trying to layout field labels and values like this:
Name: Bob
Age: 25
Occupation: Code Monkey
The relevant HTML is
<div class="field">
<span class="reset">End Time:</span>
<span>05:00pm</span>
</div>
<div class="field">
<span class="reset">Items:</span>
<span></span>
</div>
<div class="field">
<span class="reset">Repeats:</span>
<span>Never</span>
</div>
And the relevant CSS is:
div.field {
margin-bottom:10px;
}
span.reset {
display: block;
float: left;
margin-right: 0.5em;
text-align: right;
}
Unfortunately, the "Repeats" field is being shown on the same line as the "Items" field. I verified that this only happens when the value of the "Items" field is empty <span></span>.
I tried added clear: left to span.reset, and while this stops two fields appearing on the same line, it totally messes up the alignment of the labels and fields.
Is there any way I can fix this problem without drastically changing the XHTML?
Thanks,
Don
Add this to your CSS clear: left;:
div.field {
clear:left;
margin-bottom:10px;
}
This will force it to the next line below.
If you want all these to line up you're going to have to give the label (reset?) a fixed width either directly or indirectly. Try this:
div.field { overflow: hidden; }
div.field span { margin-left: 150px; display: block; }
span.reset { float: right; width: 150px; margin-left: 0; text-align: right; }
I'm trying to get this css layout to work with IE7 and I'm a bit stuck. Any thoughts on how I can get the form to look like it does in FF and Chrome without changing the page structure? I know there are some IE specific CSS hacks out there, but I'm not totally sure how to apply them.
In FF and Chrome the form correctly displays the form as follows:
title
first last
street
city state zip
occupation bday
In IE the form is all jumbled:
title last state zip
street
city
CSS
...
form label { float: left; margin: 0px 10px 0px 0px; }
form input { width:100%; }
form select { width:100%; }
form label.field-title { width: 50px; clear: left; }
form label.field-title select { width: 50px; }
form label.field-first { width: 150px; clear: left; }
form label.field-last { width: 150px; }
form label.field-street{ width: 310px; clear: left; }
form label.field-city { width: 150px; clear: left; }
form label.field-state { width: 70px; }
form label.field-zip { width: 70px; }
form label.field-occupation { width:150px; clear:left; }
form label.field-bday { width:150px; }
...
HTML
...
<form>
<fieldset>
<legend>Basic Information</legend>
<label class="field-title">
Title *<select name="EmployeeName.Title">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
</label>
<label class="field-first">
First Name *<input name='first' /></label>
<label class="field-last">
Last Name *<input name='last' /></label>
<label class="field-street">
Street *<input name='street' /></label>
<label class="field-city">
City *<input name='city' /></label>
<label class="field-state">
State *<select name='state' >
<option>test</option></select></label>
<label class="field-zip">
Zip *<input name='zip' /></label>
<label class="field-occupation">
Occupation *<input name='occupation' /></label>
<label class="field-bday">
Birth Day *<input name='bday' /></label>
</fieldset>
</form>
...
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I don't think you can without modifying the source. IE6/7 uses different float logic than the other browsers and there is not any way to tell them "don't float this all the way to the top".
This is why most forms use some sort of wrapper to clear the rows. I use divs
<div class="row">
<label class="field-title">
Title *<select name="EmployeeName.Title">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
</label>
</div>
<div class="row">
<label class="field-first">
First Name *<input name='first' /></label>
<label class="field-last">
Last Name *<input name='last' /></label>
</div>
.row {clear:both;}
EDIT: I added a width to the fieldset and a right margin to the title label:
form fieldset { width:320px; }
form label.field-title { width: 50px; margin: 0 250px 0 0; clear: left; }
This makes the title <label> take up most of the fieldset width, forcing the other elements down into place.
You can see a demo of this by going here with IE7: http://demo.raleighbuckner.com/so/1369556/
EDIT 2: The best solution to this is to do as Emily (and wheresrhys in a comment to Emily's answer) suggests and put each line of your form fields in a wrapper. Personally, I like to use unordered lists (like wheresrhys). An example of this can be seen in this demo: http://demo.raleighbuckner.com/so/1369556/default2.htm
form label { float: left; margin: 0px 10px 0px 0px;display:inline}
might work as display:inline tends to make ie behave itself better with floats & clears, but is ignored by good browsers when the element is floated.
As Emily said, it's not going to work with floats... But then of course, you can just not use floats where appropriate.
Change the following statements from your original CSS, turning them from floats into (inline) blocks:
form label.field-title { width: 50px; float: none; display: block; }
form label.field-last { width: 150px; float: none; display: inline-block; }
form label.field-street { width: 310px; float: none; display: block; }
form label.field-zip { width: 70px; float: none; display: inline-block; }
This will continue to work in other (recent) browsers too.
How does it work?
The problem with IE7's floats is that they can "bubble up" through other floats. E.g. the reason field-last ends up next to field-title is because it doesn't clear its left unlike field-first. But instead of staying next to the field-first it just moves up through it next to field-title.
The easiest way to fix that is simply to make field-title a block. That prevents it from any following floats appearing next to it. The same goes for field-street. You don't want anything to appear next to it, so you can just turn it into a block.
That doesn't work with field-last, however, because in standards-compliant browsers, the block essentially contains the preceding float. But since that already takes up its full width, there's no room left next to it. Making it an inline-block instead does let it keep its block properties while putting it next to the float, instead of encompassing it.
The same thing goes for the field-zip, with only one difference. field-last is already followed by a block, so it doesn't have to worry about anything floating to its right. field-zip, though, is followed by a float, so that needs to clear its left to prevent it from coming up next to the Zip code.