CSS text alignment question

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 <FormItemLeft> entries '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.

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

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.

On Nov 28, 10:58 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

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



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.

Ben C emailed this:

On 2007-11-28, Matthew <matthew (AT) spamkiller (DOT) com> wrote:
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.

On Nov 28, 1:51 pm, Matthew <matt... (AT) spamkiller (DOT) com> wrote:

Ben C emailed this:



On 2007-11-28, Matthew <matt... (AT) spamkiller (DOT) com> wrote:
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.

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

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.

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

DonO emailed this:

On Nov 28, 1:51 pm, Matthew <matt... (AT) spamkiller (DOT) com> wrote:
Ben C emailed this:



On 2007-11-28, Matthew <matt... (AT) spamkiller (DOT) com> wrote:
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.

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?

--
dorayme

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.