Laying out forms with CSS

missing-score · 08-13-2005, 11:31 AM

Hello

, I am needing a bit of help laying out forms with CSS, and making them look nice at the same time..

I want the name of the field in a label to be on the left hand side, and the form field itself to be on the right. The field names on the left and fields on the right should line up with eachother (horizontally), and also line up vertically with other field names, fields...

The thing is, I have tried laying it out like this but found it very hard to get it looking how I want, when it did look right I was using alot of CSS styles and markup that I probably didnt need. Also, when my page was viewed without styles everything looked very messed up..

I am thinking of using tables to lay out the form, but I would like to give CSS one more go before I resort to using tables. Note that in this situation, having a usable site is important, (eg: accessible), but it is also very important that the form look good aswell.

Thanks
Matt

mark87 · 08-13-2005, 01:07 PM

A form layout with tables is usually not very frowned upon, as much as using a whole layout anyway. Designing a form with CSS is pretty hard.

Here's some examples of forms I've made with no tables.

Edit: removed per request

Don't know if they'll give you any ideas or not, so have a look at these links too -

http://www.cssdrive.com/index.php/ex...bleless_forms/

http://www.notestips.com/80256B3A007F2692/1/NAMO-5PQ38F

mrruben5 · 08-13-2005, 04:41 PM

Look ma no tables.
Alternatively, you can use the p tag instead of br.

missing-score · 08-13-2005, 10:06 PM

Thanks mark87, the link you posted to CSS Drive is exactly what I was looking for! It's helped me to improve on my existing forms which were a mess of double nested <div> elements!

Also, on first testing in IE5 my design actually works properly!

mark87 · 09-03-2005, 10:43 AM

Hi, Sorry but can a mod edit my post above with the links in please? - no edit button is showing up!

I need the first 2 links to be deleted if poss (acc en do) because search engines are bringing up this page and I don't really want it to. Thanks!

jkd · 09-06-2005, 06:31 PM

Done.

mark87 · 09-06-2005, 09:43 PM

Thanks!