Grouping without tables

Hi all,
I'm trying to lay out 3 text boxes with associated labels horizontally,
as in the following pseudocode:

<form>
TITLE
label1 label2
label3
edit1 edit2
edit3
</form>

Specifically, I want the three text boxes spaced evenly horizontally
with their associated labels aligned on top of each.

How do I do this without tables?

Sean D.

On Thu, 11 May 2006 16:29:06 +0200, lotusny78 (AT) yahoo (DOT) com
<lotusny78 (AT) yahoo (DOT) com> wrote:

form
TITLE
label1 label2
label3
edit1 edit2
edit3
/form

Specifically, I want the three text boxes spaced evenly horizontally
with their associated labels aligned on top of each.

Hard to say without having the actual code, but maybe this mockup give you
a direction to find an answer:

form, label3, edit3 {
width:$formwidth; }

label1, label2, edit1, edit2 {
width:1/2*$formwidth; }

label3,edit3 {
text-align:center; }

label1, edit1 {
text-align:left; }

label2, edit2 {
text-align:right; }


--
______PretLetters:

weblog | http://www.pretletters.net/weblog/weblog.html |
webontwerp | http://www.pretletters.net/html/webontwerp.html |
zweefvliegen | http://www.pretletters.net/html/vliegen.html |

lotusny78 (AT) yahoo (DOT) com wrote:

How do I do this without tables?

Well you could do it with tables. If what you want more than anything
is a grid-based layout, then tables are where it's at.

If you think about how you'd like it to re-size for narrow windows, and
if you'd like the "columns" to keep their reasonable width and for one
to drop down below the others (rather than squeezing all the columns
narrower and narrower) then you could use a typical CSS 3-column
layout. Each vertical pair goes into a <div>, and each <div> gets
float:left; applied to it. The subtleties aren't trivial, so read a
good example first of how to code this (bluerobot, glish and brainjar
sites should all be read first).

What I wouldn't do is to apply float styles to the items on each row
independently. This will make them appear side-by-side, but it won't
preserve alignment of the vertical groups very well.

On 11 May 2006 07:49:53 -0700 dingbat (AT) codesmiths (DOT) com wrote:

float:left; applied to it. The subtleties aren't trivial, so read a
good example first of how to code this (bluerobot, glish and brainjar
sites should all be read first).

It would be nice, IMHO, to have a site which gave examples for each of
the common questions asked. Bluerobot has too few examples. Glish is
just too much of a blog. And Brainjar is more oriented to tutorials.
How about a genuince direct resource. It would list the various things
people ask, such as in FAQ style, and for each, both explain how it is
done, and give at least one simple example in CSS and HTML (more examples
and complex examples, in addition to the simple one, are fine, too).

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

lotusny78 (AT) yahoo (DOT) com wrote:

I'm trying to lay out 3 text boxes with associated labels horizontally,

Wrong idea, since it greatly reduces accessibility. Consider how awkward
it is when a browser reads all labels first and the user then has to
remember which field is for which data. Using <label> elements would
solve this problem only partially, so it is better not to create it in
the first place.

On Thu, 11 May 2006 20:25:06 +0300 Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:

lotusny78 (AT) yahoo (DOT) com wrote:

I'm trying to lay out 3 text boxes with associated labels horizontally,

Wrong idea, since it greatly reduces accessibility. Consider how awkward
it is when a browser reads all labels first and the user then has to
remember which field is for which data. Using <label> elements would
solve this problem only partially, so it is better not to create it in
the first place.

A better system would provide means to semantically mark things up exactly
for what they are, AND give exactly the desired visual presentation to the
full display capabilities, while still allowing tools that understand the
semantic markups to do the right thing and not confuse the user of limited
accessibility. Maybe one day we'll have that better system. CSS3 seems
to be a step in the right direction. More is needed.

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

<lotusny78 (AT) yahoo (DOT) com> wrote

Hi all,
I'm trying to lay out 3 text boxes with associated labels horizontally,
as in the following pseudocode:

form
TITLE
label1 label2
label3
edit1 edit2
edit3
/form

Specifically, I want the three text boxes spaced evenly horizontally
with their associated labels aligned on top of each.

How do I do this without tables?

Sean D.

This could symantically be a definition list. However, to lay out such you
would have to use absolute positioning (because the dt and dd elements
aren't nicely bundled together in a containing element).

eg.

html

<dl>
<dt id="1">Label 1</dt>
<dd>edit 1</dd>
<dt id="2">Label 2</dt>
<dd>edit 2</dd>
<dt id="3">Label 3</dt>
<dd>edit 3</dd>
</dl>

style

/*relative positioning sets this as the containing block*/
dl {display: block; position: relative; top: 0; left: 0; height: 3em}
/*set the height, width and margin of the blocks for nice spacing*/
dt, dd {display: block; height: 1.3em; width: 32%; margin: 0.1em 0.6%}
/*position the blocks*/
dt {position: absolute; top: 0}
dd {position: absolute; top: 1.5em}
#1, #1 + dd {left: 0}
#2, #2 + dd {left: 33.3%}
#3, #3 + dd {left: 66.7%}

"Martin Eyles" <martin.eyles (AT) NOSPAMbytronic (DOT) com> wrote:

Specifically, I want the three text boxes spaced evenly horizontally
with their associated labels aligned on top of each.
- -
This could symantically be a definition list.

Symantically indeed. I guess "symantic" is a contamination of "syntactic"
and "semantic". If you don't have a list of _terms_ with their _definitions_
(expressions that specify what the terms mean), you don't have a definition
list - semantically.

However, to lay out such you would have to use absolute positioning
(because the dt and dd elements aren't nicely bundled together in a
containing element).

The dl, dt, and dd tags easily lead into problems in styling. That's one
reason to avoid them. But using absolute positioning would be overkill here.

There's no reason not to use a table in a case like this. It falls under any
reasonable interpretation of "tabular data", and it leads into the basic
layout even without CSS, and can easily be tuned in CSS as desired. (The
original _goal_ of making a label appear above its field is wrong, though.
It's bad for accessibility and deviates the sound principle of doing as
everyone else does unless you have a good reason to do otherwise: put the
label and the field on the same line.