CSS text alignment question

Ben C emailed this:

On 2007-11-28, Matthew <matthew (AT) spamkiller (DOT) com> wrote:
Ben C emailed this:
[...]
You could use floats. Something like this:

.Label
{
float: left;
clear: left;
width: 10em;
margin-left: 10px;
}
input { float: left; }

...

form
span class="Label">User:</span
input type="text" name="user"

span class="Label">Password:</span
input type="text" name="password"
/form

Use margin-left on .Label, not position: relative, if you want to indent
them a bit.

To adjust the spacing between labels and text inputs, just change the
width of .Label. So don't use position: relative at all.
Thanks very much for your help. That works very well.

One question what is the purpose of the line...

input { float: left; }

...it does not seem to make any difference to how the layout looks - I've
tried it with that line in and out of the css file?

It depends how much width is available. If there's quite a bit, then if
you don't float the inputs you could end up with two labels one
underneath each other on the left, but the two text inputs side by side
on the same line.

The inputs are inline, so they just line up from left to right like
words until there isn't enough space. Floats do the same kind of thing,
but setting "clear: left" on the labels prevents that. It means that
each label has to go below any preceding left floats, so they stack up
vertically.

A float can never go higher than a float that appears earlier in the
document. So if the inputs are also floated, they have to go next to
their corresponding labels (or below them if there isn't enough width
available) but never above them. An inline box on the other hand can and
will go above a float that appeared earlier if there's enough width.

I see. Many thanks for the detailed explanation.

Is there any reason why I can't enclose the inputs like this (in case in
future I wish to have different behaviour for different inputs in the same
stylesheet? EG:

Instead of:

input { float: left; }

doing this:

UserFormInput { float: left; }

and then reference it with:

<form>
<span class="Label">User:</span>
<UserFormInput>
<input type="text" name="user">
</UserFormInput>

<span class="Label">Password:</span>
<UserFormInput>
<input type="text" name="password">
</UserFormInput>
</form>

Or am I designing that incorrectly?

Thanks again Ben.

"Matthew" <matthew (AT) spamkiller (DOT) com> wrote

Nik Coughlin emailed this:

"Matthew" <matthew (AT) spamkiller (DOT) com> wrote in message
news:Ftg3j.54523$c_1.30740 (AT) text (DOT) news.blueyonder.co.uk...
Hi,

I'm mainly a coder, PHP at the moment, but from time to time need to
design and use some css.

I've a css text alignment issue. Mostly to align text neatly in the past
I've used tables. But now I know I should be getting into the 21st C and
using css properly.

Here are 2 mock up pages with some forms on them, obviously I want the
text boxes aligned neatly. The first page shows a nice alignment, the
second does not, take a look.

http://tinyurl.com/2ef9o5
http://tinyurl.com/27rf4e

Some people would say that a form with labels *is* tabular data and that
a table is therefore appropriate.

...but they would be wrong and have failed to understand what the term
'tabular data' means. :-)

The W3C created the HTML table model to "arrange data - text, preformatted
text, images, links, forms, form fields, other tables, etc. - into rows and
columns of cells." They specifically state that tables are not to be used
for layout.

Tabular data indicates a logical relationship between cells. So, that in
mind, how is this not a logical relationship?

<tr>
<th>Name</th>
<td><input type="text" name="name"></td>
</tr>

Cheers

On 2007-11-28, Matthew <matthew (AT) spamkiller (DOT) com> wrote:
[...]

Is there any reason why I can't enclose the inputs like this (in case in
future I wish to have different behaviour for different inputs in the same
stylesheet? EG:

Instead of:

input { float: left; }

doing this:

UserFormInput { float: left; }

and then reference it with:

form
span class="Label">User:</span
UserFormInput
input type="text" name="user"
/UserFormInput

span class="Label">Password:</span
UserFormInput
input type="text" name="password"
/UserFormInput
/form

Or am I designing that incorrectly?

You can't just make up elements, you need to stick to HTML. There's no
such element as UserFormInput in HTML.

But you can give elements whatever class attributes like you like, so
<input class="UserFormInput"> is the way to do it. Then in the
stylesheet,

.UserFormInput { float: left; }

These are the elements to choose from:

http://www.w3.org/TR/html401/index/elements.html

Then you have to validate (http://validator.w3.org/), because not all
nesting combinations of elements are allowed, and you don't want the
browser unpredictably re-arranging things (which it will do if the HTML
isn't valid).

dorayme emailed this:

In article <rsl3j.54686$c_1.41257 (AT) text (DOT) news.blueyonder.co.uk>,
Matthew <matthew (AT) spamkiller (DOT) com> wrote:

Nik Coughlin emailed this:
"Matthew" <matthew (AT) spamkiller (DOT) com> wrote in message

Some people would say that a form with labels *is* tabular data and that
a table is therefore appropriate.
...but they would be wrong and have failed to understand what the term
'tabular data' means. :-)

They would be wrong? OK, what is the deep meaning of "tabular"
that excludes a layout being tabular in which the item in a
column in one row relates as indicator of type of information to
be typed into a field in a cell on the same row in an adjoining
column, both columns able to be meaningfully headed?

I have no interest in taking part in a semantic discussion about this. If
you wish to consider layouts as tabular data that's your business.

Nik Coughlin emailed this:

"Matthew" <matthew (AT) spamkiller (DOT) com> wrote in message
news:rsl3j.54686$c_1.41257 (AT) text (DOT) news.blueyonder.co.uk...
Nik Coughlin emailed this:

"Matthew" <matthew (AT) spamkiller (DOT) com> wrote in message
news:Ftg3j.54523$c_1.30740 (AT) text (DOT) news.blueyonder.co.uk...
Hi,

I'm mainly a coder, PHP at the moment, but from time to time need to
design and use some css.

I've a css text alignment issue. Mostly to align text neatly in the
past
I've used tables. But now I know I should be getting into the 21st C
and
using css properly.

Here are 2 mock up pages with some forms on them, obviously I want
the text boxes aligned neatly. The first page shows a nice
alignment, the second does not, take a look.

http://tinyurl.com/2ef9o5
http://tinyurl.com/27rf4e

Some people would say that a form with labels *is* tabular data and
that a table is therefore appropriate.

...but they would be wrong and have failed to understand what the term
'tabular data' means. :-)

The W3C created the HTML table model to "arrange data - text,
preformatted text, images, links, forms, form fields, other tables, etc.
- into rows and columns of cells." They specifically state that tables
are not to be used for layout.

Tabular data indicates a logical relationship between cells. So, that
in mind, how is this not a logical relationship?

tr
th>Name</th
td><input type="text" name="name"></td
/tr

That 'argument' can be applied to any layout issue. A photograph on a web
page has a 'logical relationship' to the text below it which says who the
photograph is of. Just cos something has a logical relationship with
something else does not mean you should use tables to format its layout.

Ben C emailed this:

On 2007-11-28, Matthew <matthew (AT) spamkiller (DOT) com> wrote:
[...]
Is there any reason why I can't enclose the inputs like this (in case in
future I wish to have different behaviour for different inputs in the same
stylesheet? EG:

Instead of:

input { float: left; }

doing this:

UserFormInput { float: left; }

and then reference it with:

form
span class="Label">User:</span
UserFormInput
input type="text" name="user"
/UserFormInput

span class="Label">Password:</span
UserFormInput
input type="text" name="password"
/UserFormInput
/form

Or am I designing that incorrectly?

You can't just make up elements, you need to stick to HTML. There's no
such element as UserFormInput in HTML.

But you can give elements whatever class attributes like you like, so
input class="UserFormInput"> is the way to do it. Then in the
stylesheet,

.UserFormInput { float: left; }

These are the elements to choose from:

http://www.w3.org/TR/html401/index/elements.html

Then you have to validate (http://validator.w3.org/), because not all
nesting combinations of elements are allowed, and you don't want the
browser unpredictably re-arranging things (which it will do if the HTML
isn't valid).

I just realized I forgot to reply to this post, oops, sorry. Many thanks
again for your help.

In article <Hjx3j.54873$c_1.49757 (AT) text (DOT) news.blueyonder.co.uk>,
Matthew <matthew (AT) spamkiller (DOT) com> wrote:

dorayme emailed this:
In article <rsl3j.54686$c_1.41257 (AT) text (DOT) news.blueyonder.co.uk>,
Matthew <matthew (AT) spamkiller (DOT) com> wrote:

Nik Coughlin emailed this:
"Matthew" <matthew (AT) spamkiller (DOT) com> wrote in message

Some people would say that a form with labels *is* tabular data and that
a table is therefore appropriate.
...but they would be wrong and have failed to understand what the term
'tabular data' means. :-)

They would be wrong? OK, what is the deep meaning of "tabular"
that excludes a layout being tabular in which the item in a
column in one row relates as indicator of type of information to
be typed into a field in a cell on the same row in an adjoining
column, both columns able to be meaningfully headed?

I have no interest in taking part in a semantic discussion about this. If
you wish to consider layouts as tabular data that's your business.

You misread what I said. I do not consider it wise in general to
layout web pages with tables. Look again at the wording of my
question and think about it, and have a discussion with your
self, no need to close your mind or discuss it with me.

--
dorayme

In article <Lqx3j.54876$c_1.49871 (AT) text (DOT) news.blueyonder.co.uk>,
Matthew <matthew (AT) spamkiller (DOT) com> wrote:

[in reply to Nick]

A photograph on a web
page has a 'logical relationship' to the text below it which says who the
photograph is of. Just cos something has a logical relationship with
something else does not mean you should use tables to format its layout.

The entry criteria for proper use of tables is not any sort of
logical relationship between parts but quite specific ones. You
are missing this point.

--
dorayme