Forms and CSS - lining stuff up

[S]

Hello

Is there a recommended way to line up form fields with their labels so
that the label column is right justified and the fields are left justified?

Example:

http://www.dorseygraphics.com/review...getemplate/for
m.jpg

I need the labels to sit next to their respective fields and buttons, but
they need to be right justified. I'm not quite sure how to line this up
using CSS.

Any suggestions are appreciated.

Thanks,

---------------S

[kchayka]

S wrote:

Is there a recommended way to line up form fields with their labels so
that the label column is right justified and the fields are left justified?

Forms are considered by many to be tabular data. Use a table.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Gus Richter]

S wrote:

Hello

Is there a recommended way to line up form fields with their labels so
that the label column is right justified and the fields are left justified?

Example:

http://www.dorseygraphics.com/review...getemplate/for
m.jpg

I need the labels to sit next to their respective fields and buttons, but
they need to be right justified. I'm not quite sure how to line this up
using CSS.

Any suggestions are appreciated.

Thanks,

---------------S

This should get you started:

..sectionwrapper { /* position as needed, etc. */ }
..wrapper { margin-bottom:-12px; }
/* to change the value for white space between lines to your preference */
..leftcell { width:100px; text-align:right; }
..rightcell { position:relative;left:2em;top:-1.2em; } /* positions the
fields */
/* named them leftcell and rightcell to visualyze as tables */
/* values should be changed to your needs - if needed at all - just try
it */
<div class="sectionwrapper">
<div class="wrapper">
<div class="leftcell">Name:</div>
<div class="rightcell"><input size="25" name="namequest"></div>

</div>
<div class="wrapper">
<div class="leftcell">Description:</div>
<div class="rightcell"><input size="25" name="descquest"></div>
</div>
/* .....etc........ */
</div>

--
Gus

[Alan J. Flavell]

On Thu, 27 Oct 2005, kchayka wrote:

S wrote:

Is there a recommended way to line up form fields with their
labels so that the label column is right justified and the fields
are left justified?

Forms are considered by many to be tabular data. Use a table.

It's a defensible option, for sure. But putting the label text and
the form control into different table cells prevents the use of the
implicit association variant of the <label> markup. So it's a
compromise.

In fact, the HTML spec picks up this point in so many words, when
describing the implicit association:

| Note that this technique cannot be used when a table is being used
| for layout, with the label in one cell and its associated control
| in another cell.

(from http://www.w3.org/TR/html401/interac....html#h-17.9.1)

regards

[Johannes Koch]

Alan J. Flavell wrote:

But putting the label text and
the form control into different table cells prevents the use of the
implicit association variant of the <label> markup.

Which IMHO is a strange thing. A text within a p element is part of the
paragraph, a text within a h1 is part of the headline, a text within a
caption is part of the caption, a form control within a label is part of
the label ... ooops.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[kchayka]

Alan J. Flavell wrote:

putting the label text and
the form control into different table cells prevents the use of the
implicit association variant of the <label> markup.
Well then, use the explicit variant! :)

IE doesn't support the implicit variety, anyway, at least not without
including an explicit "for".
So it's a compromise.

I don't see it as such, though it is nice to have a choice. Use whatever
variant works best for your particular case.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.