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>

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

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

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

Here you can see for the <FormItemLeften tries '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]

Re: CSS text alignment question

On 2007-11-28, Matthew <matthew@spamki ller.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">U ser:</span>
<input type="text" name="user">

<span class="Label">P assword:</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]

Re: CSS text alignment question

On Nov 28, 10:58 am, Ben C <spams...@spam. eggswrote:

On 2007-11-28, Matthew <matt...@spamki ller.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">U ser:</span>
<input type="text" name="user">
>
<span class="Label">P assword:</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]

Re: CSS text alignment question

Ben C emailed this:

On 2007-11-28, Matthew <matthew@spamki ller.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">U ser:</span>
<input type="text" name="user">
>
<span class="Label">P assword:</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]

Re: CSS text alignment question

On Nov 28, 1:51 pm, Matthew <matt...@spamki ller.comwrote:

Ben C emailed this:
>
>
>

On 2007-11-28, Matthew <matt...@spamki ller.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">U ser:</span>
<input type="text" name="user">

>

<span class="Label">P assword:</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]

Re: CSS text alignment question


"Matthew" <matthew@spamki ller.comwrote in message
news:Ftg3j.5452 3$c_1.30740@tex t.news.blueyond er.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]

Re: CSS text alignment question

Nik Coughlin emailed this:

>
"Matthew" <matthew@spamki ller.comwrote in message
news:Ftg3j.5452 3$c_1.30740@tex t.news.blueyond er.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]

Re: CSS text alignment question

DonO emailed this:

On Nov 28, 1:51 pm, Matthew <matt...@spamki ller.comwrote:

>Ben C emailed this:
>>
>>
>>

>>On 2007-11-28, Matthew <matt...@spamki ller.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">U ser:</span>
>> <input type="text" name="user">
>> <span class="Label">P assword:</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]

Re: CSS text alignment question

In article <rsl3j.54686$c_ 1.41257@text.ne ws.blueyonder.c o.uk>,
Matthew <matthew@spamki ller.comwrote:

Nik Coughlin emailed this:

"Matthew" <matthew@spamki ller.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]

Re: CSS text alignment question


"Matthew" <matthew@spamki ller.comwrote in message
news:rsl3j.5468 6$c_1.41257@tex t.news.blueyond er.co.uk...

Nik Coughlin emailed this:

>>
>"Matthew" <matthew@spamki ller.comwrote in message
>news:Ftg3j.545 23$c_1.30740@te xt.news.blueyon der.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

[Ben C]

Re: CSS text alignment question

On 2007-11-28, Matthew <matthew@spamki ller.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">U ser:</span>
<UserFormInpu t>
<input type="text" name="user">
</UserFormInput>
>
<span class="Label">P assword:</span>
<UserFormInpu t>
<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="UserForm Input"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]

Re: CSS text alignment question

dorayme emailed this:

In article <rsl3j.54686$c_ 1.41257@text.ne ws.blueyonder.c o.uk>,
Matthew <matthew@spamki ller.comwrote:
>

>Nik Coughlin emailed this:

>>"Matthew" <matthew@spamki ller.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]

Re: CSS text alignment question

Nik Coughlin emailed this:

>
"Matthew" <matthew@spamki ller.comwrote in message
news:rsl3j.5468 6$c_1.41257@tex t.news.blueyond er.co.uk...

>Nik Coughlin emailed this:

>>>
>>"Matthew" <matthew@spamki ller.comwrote in message
>>news:Ftg3j.54 523$c_1.30740@t ext.news.blueyo nder.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]

Re: CSS text alignment question

Ben C emailed this:

On 2007-11-28, Matthew <matthew@spamki ller.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:
>>
>UserFormInpu t { float: left; }
>>
>and then reference it with:
>>
><form>
> <span class="Label">U ser:</span>
> <UserFormInpu t>
> <input type="text" name="user">
> </UserFormInput>
>>
> <span class="Label">P assword:</span>
> <UserFormInpu t>
> <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="UserForm Input"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]

Re: CSS text alignment question

In article <Hjx3j.54873$c_ 1.49757@text.ne ws.blueyonder.c o.uk>,
Matthew <matthew@spamki ller.comwrote:

dorayme emailed this:

In article <rsl3j.54686$c_ 1.41257@text.ne ws.blueyonder.c o.uk>,
Matthew <matthew@spamki ller.comwrote:

Nik Coughlin emailed this:
>"Matthew" <matthew@spamki ller.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