Stylesheets - Forms and CSS

Author

Forms and CSS - lining stuff up

2005-10-27, 6:28 pm

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/revie...agetemplate/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

2005-10-27, 6:28 pm

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

2005-10-28, 6:39 pm

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/revie...agetemplate/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

2005-10-28, 6:39 pm

On Thu, 27 Oct 2005, kchayka wrote:

> S wrote:
>
> 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/intera...s.html#h-17.9.1)

regards

Johannes Koch

2005-10-28, 6:39 pm

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

2005-10-28, 6:40 pm

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.