Creating a nicely Fomated Form

[Wilhelm Kutting]

Hi i like to replace my layout tabel with css-style.
Her is what it looks like now:

Name: [ ]
Adress: [ ]
Zip-Code [ ]

<-------------->
Problem

How can i get around to use a fixed with here?
And that without tables. Is that possible?

[Phil Evans]

Re: Creating a nicely Fomated Form

Wilhelm Kutting wrote:[color=blue]
> Hi i like to replace my layout tabel with css-style.
> Her is what it looks like now:
>
> Name: [ ]
> Adress: [ ]
> Zip-Code [ ]
>
> <-------------->
> Problem
>
> How can i get around to use a fixed with here?
> And that without tables. Is that possible?[/color]

There's a number of ways. Some people will say that this *is* tabular
data, and so you should use a table - you certainly wont get any stick
for taking this view. If you want to use just CSS, my current favourite
method is:

label {
display: block;
position: relative;
width: 9em;
height: 2em;
}

input {
position: absolute;
left: 10em;
}

<label for="forename">
Name
<input type="text" name="forename" id="forename" />
</label>

You can change the height of the label to change the vertical spacing of
the elements, and if your labels are longer than 9em you may want to
increase the width of the label and the left position of the input. But
that should set you on your way . . .

There are plenty of other methods too :)

P

[Brian]

Re: Creating a nicely Fomated Form

Wilhelm Kutting wrote:[color=blue]
> i like to replace my layout tabel with css-style.
> Her is what it looks like now:
>
> Name: [ ]
> Adress: [ ]
> Zip-Code [ ][/color]

This is tabular data of a sort: each row contains a label and its
associated input.
[color=blue]
> How can i get around to use a fixed with here?[/color]

Don't use fixed width; use em units.

Example with table:

http://www.tsmchughs.com/contact/

Example without table:

http://www.julietremblay.com/contact/

--
Brian (remove "invalid" to email me)