Form - CSS

Hello,

I am creating a form based an ordered list.
I want to have two columns:
- Left column with labels and 20% width.
- Right column with inputs with 80% width.

The total width is defined by a div that contains the list ... or by
the list itself.

In this moment I have a few problems:
1. The inputs don't take the total width;
2. The labels get outside of the container on the left;
3. The required icon does not take a space to the input;
4. The input button is not aligned with other inputs.

Could someone please help me out in solving these problems and
improving my code?

I created a sample project and uploaded it to:
http://www.27lamps.com/Labs/Form/Form.html

Any help would be great!

Thank You,
Miguel

John Hosking

Guest

n/a Posts

June 27th, 2008
07:19 PM
#2

Re: Form

shapper wrote:

Quote:

Originally Posted by

>
I am creating a form based an ordered list.

What for? Why are they ordered? (From the URL, I see you remove the
numbering anyway.) Anyway, a lot of folks use tables for forms.

Quote:

Originally Posted by

I want to have two columns:

Did you say "columns?" Then I recommend a <table>.

Quote:

Originally Posted by

- Left column with labels and 20% width.
- Right column with inputs with 80% width.
>
The total width is defined by a div that contains the list ... or by
the list itself.
>
In this moment I have a few problems:
1. The inputs don't take the total width;

Your input's width is 80%.

Quote:

Originally Posted by

2. The labels get outside of the container on the left;

Your li's margin-left is 8em, which is too small.

Quote:

Originally Posted by

3. The required icon does not take a space to the input;

I don't know what this means.

Quote:

Originally Posted by

4. The input button is not aligned with other inputs.

So give it some margin-left, like around 1.5em.

But this is all guesswork, both for me and for you. You're mixing
container widths and font-size ems and percentages and pixels. Even if
you get everything looking nice, it's sure to break at a different font
size.

So, again, I recommend a <table>.

Quote:

Originally Posted by

>
Could someone please help me out in solving these problems and
improving my code?
>
I created a sample project and uploaded it to:
http://www.27lamps.com/Labs/Form/Form.html

Step One: http://validator.w3.org/
Step Two: http://jigsaw.w3.org/css-validator/

--
John
Pondering the value of the UIP: http://improve-usenet.org/