Creating a nicely Fomated Form

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Wilhelm Kutting

    Creating a nicely Fomated Form

    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

    #2
    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

    Comment

    • Brian

      #3
      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:


      Example without table:


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

      Comment

      Working...