SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pure CSS form layout

    I got in stuck when creating a pure CSS form layout, it works fine when I have only one field in a row, but when I have more than one I have problems.

    Basically, I want to convert this form: http://mikeborozdin.com/misc/form/form.php to a CSS one.

    I attempted to convert the first box: http://mikeborozdin.com/misc/form/form1.php.

    Is there a way to align the fields?

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    239
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I must confess (oh, the shame of it) that I still use tables to format my forms.

    I don't actually thing it's a bad thing though, it seems to me that it's one of the few uses that tables are good for that don't make an unholy mess of the site and so there isn't necessarily any need to replace them with css.

    However, IF I had an easier css answer I'd use it.

    To that end the most success I have had with css and forms is to place the elements in formatted divs. This is similar to placing them in td tags BUT if you have several forms of the same type (even if the content is different) on different pages you can control them all from the css.

    I see from your source code that you have use the tables to define the size of your text inputs. In the css version use size=x to determine how big you want the input areas. That will shorten them and make them look more like the tabled version. Then you can add the divs.

  3. #3
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A form such as that is table data so therefore you should put it in a table. There is no shame is using tables for the purpose that they were made for.

  4. #4
    SitePoint Zealot milenko1054's Avatar
    Join Date
    Jan 2004
    Location
    Ohio
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The vast majority of forms aren't tabular data - but, that doesn't mean that tables aren't the most efficient way to lay them out. From a practical point of view, it simply makes more sense to spend a few minutes creating a form using a table than hours trying to make floats and clears play nice in a css layout.

    That being said, css form layout certainly is possible and involves what SubEffect suggested - place a label and a form element in a containing div or p and get them aligned with each other (specifying widths, float, and clear) inside the container. Create another container with the next label and element, then layout these two containers with each other. Rinse and repeat.



Bookmarks

Posting Permissions

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