Is it possible to keep this on the same horizontal?

[laredotornado]

Hi,

Maybe I should break down and use tables, but I wanted to query the
experts first. Below, I would like the words "First name" and "Last
Name" to appear on the same horizontal and I would like the text
fields to appear on the same horizontal. But I would like the words
to appear above the text fields. The below creates four different
lines:

<div>
<p><label for="user_ship_to_first_name">First name</label><br/>
<input id="user_ship_to_first_name" name="user[ship_to_first_name]"
size="30" type="text" /></p>

<p><label for="user_ship_to_last_name">Last name</label><br/>
<input id="user_ship_to_last_name" name="user[ship_to_last_name]"
size="30" type="text" /></p>
</div>

Is there any way to do what I'm asking without tables? Thanks, - Dave

[Rik Wasmus]

On Fri, 15 Feb 2008 19:33:22 +0100, laredotornado
<la***********@zipmail.comwrote:

Hi,

Maybe I should break down and use tables, but I wanted to query the
experts first. Below, I would like the words "First name" and "Last
Name" to appear on the same horizontal and I would like the text
fields to appear on the same horizontal. But I would like the words
to appear above the text fields. The below creates four different
lines:

<div>
<p><label for="user_ship_to_first_name">First name</label><br/>
<input id="user_ship_to_first_name" name="user[ship_to_first_name]"
size="30" type="text" /></p>

<p><label for="user_ship_to_last_name">Last name</label><br/>
<input id="user_ship_to_last_name" name="user[ship_to_last_name]"
size="30" type="text" /></p>
</div>

Is there any way to do what I'm asking without tables? Thanks, - Dave

With a lot of fiddling & floating(needed for exact size, inline-block is
not supported enough) &setting exact sizes (preferable would be in em) on
the elements offcourse it would be possible. However, it seems perfectly
justifiable to me to have a row with heading (the labels), and a
row/multiple rows with values (the inputs) as a table. To many people,
wether or not a form like this can be in a table seems an edge case, I'd
say it's very defendable here.
--
Rik Wasmus

[Jukka K. Korpela]

Scripsit laredotornado:

Below, I would like the words "First name" and "Last
Name" to appear on the same horizontal and I would like the text
fields to appear on the same horizontal.

Stop wanting that. It's against accessibility principles. Although this
is a fairly simple case, it's still wrong. Consider a person using a
speech browser: only after hearing a list of labels would he be prompted
for input. The <labelmarkup might help him, but just might. There's a
simple way to avoid the problems: put a label and the corresponding
field on one line, with nothing more on that line. (You can use a table
to arrange several such lines in a tabular manner, but that's a
different issue.)

<p><label for="user_ship_to_first_name">First name</label><br/>
<input id="user_ship_to_first_name" name="user[ship_to_first_name]"
size="30" type="text" /></p>

<p><label for="user_ship_to_last_name">Last name</label><br/>
<input id="user_ship_to_last_name" name="user[ship_to_last_name]"
size="30" type="text" /></p>
</div>

The size attributes convey a wrong message visually. Two equally wide
fields suggest comparable data. However, as a rule, a person's first
name tends to be short (and you are only prompting for _a_ name),
whereas the last name can be fairly long. This should be reflected in
the field widths, helping to user notice which one is for the last name.

On the other hand, if this is for a shipping address, you should
probably prompt for a single name, to contain the person's name as used
in postal addressing. Not all people have last names, and not all
peoples write the last name last, and not all people are unique by the
first name and the last name. It's _easier_ to have just one field for
the name if you are just going to put the name on an envelope, or
something like that. In that case, it should be a fairly long field, of
course.

Is there any way to do what I'm asking without tables?

Using or not using tables is rather irrelevant. What matters is what you
do, not how you do it.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/