Geek Answers Handbook

Detailed CSS look and match

It’s still not easy for me to not want to use Tables to create a layout for the HTML view. I want to run some samples by people and get some opinions.

What would you like to see in html to view details? Who has the least dangerous cross browser? What is the most compatible? Which one looks better if I have a column of static width labels that is right-aligned?

In the Details view, I mean something similar to the following image. alt text http://img261.imageshack.us/img261/5203/crudrl8.png

Table

<table> <tr> <td><label /></td> <td><input type="textbox" /></td> </tr> <tr> <td><label /></td> <td><input type="textbox" /></td> </tr> </table>

Fieldset

 <fieldset> <label /><input type="textbox" /><br /> <label /><input type="textbox" /><br /> </fieldset>

Divs

 <div class="clearFix"> <div class="label"><label /></div> <div class="control"><input type="textbox" /></div> </div> <div class="clearFix"> <div class="label"><label /></div> <div class="control"><input type="textbox" /></div> </div>

List

 <ul> <li><label /><input type="textbox" /></li> <li><label /><input type="textbox" /></li> </ul>
+4
source share
6 answers

These approaches are not mutually exclusive; personally, I would confuse them a little:

 <fieldset> <label for="name">XXX <input type="text" id="name"/></label> <label for="email">XXX <input type="text" id="email"/></label> </fieldset>

Although to get the correct alignment label (something that I personally would have avoided because it would be harder to scan visually), you would need to add an extra element around the text that is not around the input, so I would go

 <fieldset> <div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div> <div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div> </fieldset>
+3
source

Actually, I take it back only for simple text boxes. I find the Fieldset option works well.

However, as a rule, I will have several controls in one "line", so I go with a div-based layout, so I can put inputs, validators and everything in one element.

0
source

CSS

 label{ float:left; text-align:right; width:115px; margin-right:5px; } input{ margin-bottom:5px; }

HTML:

 <label for="username">UserName:</label><input type="text" id="username" /><br /> <label for="username">UserName:</label><input type="text" id="username" /><br />

Obviously, you can add a div or use the shape around it to get a background color for your entire form, etc.

0
source

I prefer a set of fields containing a div. Label wrappers float: left; width: 20em, and in a div div, only the fixed left margin is 21em or 22em, for example. But you have to remember to enable a clear div to work:

 <fieldset> <div class="labels"><label for="name">Name</label></div> <div class="data"><input ....</div> <div style="clear:both"/> // repeat for next fields </fieldset>
0
source

I find forms to be one of the most difficult things in css, because if you want tight control, there is often a lot of css to add that the old school HTML code will take care of you. However, if you are ready to accept a uniform, natural treatment, then the cleanest way to separate content and presentation is as follows:

 form { margin: 0; padding: 0; } fieldset { whatever treatment you want } #details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ } #details label { float: left; width: 190px; text-align: right; } #details input { margin-left: 200px; } <form> <fieldset id="details"> <div id="item1div"> <label for="item1">item1 label</label> <input type="" id="item1" /> </div> <div id="item1div"> <label for="item1">item1 label</label> <input type="" id="item1" /> </div> </fieldset> </form>
0
source

You can use tables to format forms in a table, but use CSS to add styles to forms. CSS purists are likely to say that you shouldn't, but in fact, many browsers often render CSS forms differently and can cause accessibility issues. The tabular form is much more consistent between browsers and much more accessible.

-1
source

More articles:


All Articles