www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Tableless Forms

  1. #1
    Join Date
    Jul 2010
    Posts
    25

    Angry CSS Tableless Forms

    This is style I've created with the intention of positioning in the following layout with the widths below:

    label1 inputtextbox1 label2 inputtextbox2
    200px 260px 200px 260px

    Style follows:

    <style type="text/css">
    #mainFormContainer{left:2px; top:388px; position:relative; height:424px; width:920px;}
    label#fname{left:0px; top:90px; position:absolute; font-weight:400; text-align:center; width:200px;}
    input, textarea#firstname{left:200px; top:90px; position:absolute; width:260px;}
    label#sname{left:460px; top:90px; position:absolute; font-weight:400; text-align:center; width:200px;}
    </style>

    label1, input textbox1 and label2 so far are perfectly positioned exactly how I want it to be, but when I created the style for input textbox2, it moves the position of input textbox1

    style used for input textbox2 being:

    input, textarea#surname{left:660px; top:90px; position:relative; width:260px;}

    They've even got id's to differentiate between input textbox1 and input textbox2so why is it repositioning input textbox1?
    Any ideas? solutions, corrections of styles much appreciated

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You really do not need to use the positioning.

    form {
    width:920px;
    height:auto;
    padding:0;
    margin:10px;
    overflow:hidden;
    }

    form p{
    float:none;
    clear:both;
    margin:0.5em 0;
    padding:0;
    }

    form label{
    width:200px;
    height:auto;
    text-align:right:
    margin:0 5px 5px 0;
    padding:0 0 5px;
    float:left;
    clear:left;
    }

    form input{
    width:200px;
    height:18px;
    float:left;
    clear:none;
    }

    /* class for submit button */
    form input.btn{
    width:70px;
    height:35px;
    margin:5px 0 0;
    padding:0 10px;
    line-height:32px;
    text-align:center;
    }

    if you are using check boxes and radio buttons you can define the following CSS classes

    form input.checkbox, form input.radio{
    width:15px;
    height:15px;
    float:left;
    clear:none;
    margin:5px 10px 0 0;
    padding:0;
    }

    It's best to create an external form.css stylesheet will all the above styles you can reuse in pretty much all your web design projects.
    If you want to position the label above its corresponding field, then you can just add the following CSS rules:
    clear:both;
    text-align:left; /* to flush the text label to the left */

    You could also choose to not float both label and field.
    In that case just use the following CSS rule:
    float:none;

    You can wrap each label & field in a <p>...</p>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles