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 page with some forms on it, 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 use a fixed-width font (Courier New), and then added multiple entries so that the number of chars on the left are the same, so that the alignment of the text boxes are neat.

 

EG.

 

<FormItemLeft>
Subject:
</FormItemLeft>

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

<FormItemLeft>
CC:     
</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 'forced space' (can't use the symbols here cos just get spaces!) entries after the '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.

http://alistapart.com/articles/prettyaccessibleforms

 

Welcome to the forum by the way!

http://alistapart.com/articles/prettyaccessibleforms

 

Welcome to the forum by the way!

Thanks Thomas. That page will sort me out. Much appreciated.

Cheers.

I find forms a complete nightmare and was about to link you to the same article as I'm sure that's one that Thomas posted for me a while back...it's a good article...still doesn't make me enjoy creating forms though!

I find forms a complete nightmare and was about to link you to the same article as I'm sure that's one that Thomas posted for me a while back...it's a good article...still doesn't make me enjoy creating forms though!

Aye! And the more different controls the worse. ...do I need to mention the dreaded file input field? *shivers*

 

Forms is one of them mucky areas of webdesign where we got inconsistent partial control over the elements. I found in most cases that the less I do the better it generally works.

Like making a card house. Stack it up neatly, then slowly back away from the table!