Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Laying out forms with CSS

    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

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by jkd; 09-06-2005 at 06:30 PM.

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Look ma no tables.
    Alternatively, you can use the p tag instead of br.
    CATdude about IE6: "All your box-model are belong to us"

  • #4
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Done.

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •