ansaurus

Question

CSS Form Styling

Answer 1

A:

Insert a <br /> after the address-input. You can align the selects and the input with the attribute text-align: right;. The space between the individual elements can be set using margin: 5px; to apply a whitespace of 5px on top, left, bottom and right of each element.

Just put it together like this:

form {
    text-align: right;
    margin: 5px;
}

To give your "Location/Adress" Label the desired size you could create a css-class and apply it to the label.

Furthermore you should consider taking a closer look to basic css. You surely will need it some more times and it really is not hard to understand.

Ham 2009-12-16 08:31:39

Answer 2

A:

even in modern browsers forms a always renders slightly different, it also depends on the os you are using, i think inline-block would be a good idea fore the dropdowns.

Have you heard of jQuery UI Datepicker? Its very powerful and much more user and programmer friendly.

antpaw 2009-12-16 08:39:02

Answer 3

A:

I always but my label inputs in p tags and then set the lable to display: block and float it left with a set width e.g.

<p><label></label><input type="text" name="thing" id="thing" value="" /></p>

label{
float: left;
display: block;
width: 100px;
}
input,select{
width: 200px;
}

For the dates I would do the same but add an id to the p like - id="dob" and then set up a special case for those inputs like:

#dob select{
width: 50px;
float: left;
}

This means you can then control the width of the selects within this tag failry easily.

matpol 2009-12-16 08:46:23

Answer 4

A:

Use a table. (Yes, I know this is not a "pure" solution, but it gets the job done in a fraction of the time of a CSS solution, and it has a much better chance of working in IE6 without a day of hacks).

erikkallen 2009-12-16 09:22:58

ansaurus

tags:

views:

answers:

CSS Form Styling

related questions