CSS text alignment question

[Matthew]

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

My form alignment uses 2 css entries:

ItemLeft
{
position: relative;
left: 10px;
}

ItemRight
{
position: relative;
left: 75px;
}

To achieve the first page -the one neatly aligned- I used a fixed-width
font (Courier New), and then added multiple entries so that the number
of chars in the text on the left is the same, so that the alignment of the
text boxes is neat.

EG.

<FormItemLeft>
Subject:
</FormItemLeft>

<FormItemRight>
<input name="subject" type="text" /<br />
</FormItemRight>

<FormItemLeft>
CC:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</FormItemLeft>

<FormItemRight>
<input name="cc" type="text" /<br />
</FormItemRight>

Here you can see for the <FormItemLeftentries 'Subject:' is 8 chars and
'CC:' is 3, so I've added 5 &nbsp; entries after 'CC:'.

Obviously this is a work-around which is rather amateurish and it does not
work with non-fixed-width fonts. My instinct was to use a table, but this
is exactly what css is supposed to stop.

How do I get my alignment to work with non-fixed-width fonts, no forced
spaces, and no tables? I just can't seem to find the right way to do this.

Thanks all.

[Ben C]

On 2007-11-28, Matthew <ma*****@spamkiller.comwrote:

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

My form alignment uses 2 css entries:

ItemLeft
{
position: relative;
left: 10px;
}

ItemRight
{
position: relative;
left: 75px;
}

To achieve the first page -the one neatly aligned- I used a fixed-width
font (Courier New), and then added multiple entries so that the number
of chars in the text on the left is the same, so that the alignment of the
text boxes is neat.

[...]

Obviously this is a work-around which is rather amateurish and it does not
work with non-fixed-width fonts. My instinct was to use a table, but this
is exactly what css is supposed to stop.

How do I get my alignment to work with non-fixed-width fonts, no forced
spaces, and no tables? I just can't seem to find the right way to do 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.

[DonO]

On Nov 28, 10:58 am, Ben C <[e-mail]:

On 2007-11-28, Matthew <[e-mail]:

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

My form alignment uses 2 css entries:

ItemLeft
{
position: relative;
left: 10px;
}

ItemRight
{
position: relative;
left: 75px;
}

To achieve the first page -the one neatly aligned- I used a fixed-width
font (Courier New), and then added multiple entries so that the number
of chars in the text on the left is the same, so that the alignment of the
text boxes is neat.

[...]

Obviously this is a work-around which is rather amateurish and it does not
work with non-fixed-width fonts. My instinct was to use a table, but this
is exactly what css is supposed to stop.

How do I get my alignment to work with non-fixed-width fonts, no forced
spaces, and no tables? I just can't seem to find the right way to do 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.

I've been doing something similar with...
#loginForm label {
float:left;
width: 6em;
}

Where I put an ID of "loginForm" in the form tag and then do this...
<p>
<label>item here</label<input type... />
</p>

That way I can control the vertical spacing with CSS on the paragraph
tags...

HTH.

D.

[Matthew]

Ben C emailed this:

On 2007-11-28, Matthew <ma*****@spamkiller.comwrote:

>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

My form alignment uses 2 css entries:

ItemLeft
{
position: relative;
left: 10px;
}

ItemRight
{
position: relative;
left: 75px;
}

To achieve the first page -the one neatly aligned- I used a fixed-width
font (Courier New), and then added multiple entries so that the number
of chars in the text on the left is the same, so that the alignment of the
text boxes is neat.

[...]

>Obviously this is a work-around which is rather amateurish and it does not
work with non-fixed-width fonts. My instinct was to use a table, but this
is exactly what css is supposed to stop.

How do I get my alignment to work with non-fixed-width fonts, no forced
spaces, and no tables? I just can't seem to find the right way to do 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?

Thanks again.

[DonO]

On Nov 28, 1:51 pm, Matthew <[e-mail]:

Ben C emailed this:

On 2007-11-28, Matthew <[e-mail]:

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

My form alignment uses 2 css entries:

ItemLeft
{
position: relative;
left: 10px;
}

ItemRight
{
position: relative;
left: 75px;
}

To achieve the first page -the one neatly aligned- I used a fixed-width
font (Courier New), and then added multiple entries so that the number
of chars in the text on the left is the same, so that the alignment of the
text boxes is neat.

[...]

Obviously this is a work-around which is rather amateurish and it does not
work with non-fixed-width fonts. My instinct was to use a table, but this
is exactly what css is supposed to stop.

How do I get my alignment to work with non-fixed-width fonts, no forced
spaces, and no tables? I just can't seem to find the right way to do 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?

Thanks again.

I think you were asking Ben C. but I may be able answer...

Having "float:left" for two items next to each other should hopefully
keep them on the same line next to one another I believe. I think it's
somewhat optional in the case of form elements like the one's we've
described above though.

FWIW... I'm a PHP programmer primarily as well, having to learn to use
CSS where I would have been using tables in the past, so I feel your
pain. Luckily, I work with a designer who has more experience using
CSS so I've picked up a lot. The A List Apart website has been pretty
helpful too.

Good luck.
D.

[Nik Coughlin]

"Matthew" <ma*****@spamkiller.comwrote in message
news:Ft*******************@text.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.

[Matthew]

Nik Coughlin emailed this:

>
"Matthew" <ma*****@spamkiller.comwrote in message
news:Ft*******************@text.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. :-)

[Matthew]

DonO emailed this:

On Nov 28, 1:51 pm, Matthew <[e-mail]:

>Ben C emailed this:

>>On 2007-11-28, Matthew <[e-mail]:
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
My form alignment uses 2 css entries:
ItemLeft
{
position: relative;
left: 10px;
}
ItemRight
{
position: relative;
left: 75px;
}
To achieve the first page -the one neatly aligned- I used a fixed-width
font (Courier New), and then added multiple entries so that the number
of chars in the text on the left is the same, so that the alignment of the
text boxes is neat.
[...]
Obviously this is a work-around which is rather amateurish and it does not
work with non-fixed-width fonts. My instinct was to use a table, but this
is exactly what css is supposed to stop.
How do I get my alignment to work with non-fixed-width fonts, no forced
spaces, and no tables? I just can't seem to find the right way to do 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?

Thanks again.

I think you were asking Ben C. but I may be able answer...

Having "float:left" for two items next to each other should hopefully
keep them on the same line next to one another I believe. I think it's
somewhat optional in the case of form elements like the one's we've
described above though.

FWIW... I'm a PHP programmer primarily as well, having to learn to use
CSS where I would have been using tables in the past, so I feel your
pain. Luckily, I work with a designer who has more experience using
CSS so I've picked up a lot. The A List Apart website has been pretty
helpful too.

Thanks for the help and the pointer to 'a list apart', look what's on that
site, a page dedicated to my question called, 'Prettier Accessible Forms',
here's the URL:

http://alistapart.com/articles/prettyaccessibleforms

Cheers all.

[dorayme]

In article <rs*******************@text.news.blueyonder.co.uk> ,
Matthew <ma*****@spamkiller.comwrote:

Nik Coughlin emailed this:

"Matthew" <ma*****@spamkiller.comwrote 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?

--
dorayme

[Nik Coughlin]

"Matthew" <ma*****@spamkiller.comwrote in message
news:rs*******************@text.news.blueyonder.co .uk...

Nik Coughlin emailed this:

>>
"Matthew" <ma*****@spamkiller.comwrote in message
news:Ft*******************@text.news.blueyonder.c o.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

[Ben C]

On 2007-11-28, Matthew <ma*****@spamkiller.comwrote:
[...]

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).

[Matthew]

dorayme emailed this:

In article <rs*******************@text.news.blueyonder.co.uk> ,
Matthew <ma*****@spamkiller.comwrote:

>Nik Coughlin emailed this:

>>"Matthew" <ma*****@spamkiller.comwrote 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.

[Matthew]

Nik Coughlin emailed this:

>
"Matthew" <ma*****@spamkiller.comwrote in message
news:rs*******************@text.news.blueyonder.co .uk...

>Nik Coughlin emailed this:

>>>
"Matthew" <ma*****@spamkiller.comwrote in message
news:Ft*******************@text.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.

[Matthew]

Ben C emailed this:

On 2007-11-28, Matthew <ma*****@spamkiller.comwrote:
[...]

>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.

[dorayme]

In article <Hj*******************@text.news.blueyonder.co.uk> ,
Matthew <ma*****@spamkiller.comwrote:

dorayme emailed this:

In article <rs*******************@text.news.blueyonder.co.uk> ,
Matthew <ma*****@spamkiller.comwrote:

Nik Coughlin emailed this:
"Matthew" <ma*****@spamkiller.comwrote 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

[dorayme]

In article <Lq*******************@text.news.blueyonder.co.uk> ,
Matthew <ma*****@spamkiller.comwrote:

[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