Grow your CSS skills. Land your dream job.

Help with 6 column form layout

  • # August 8, 2010 at 2:50 am

    Hello!

    I need som help with a 6 column layout for my application.
    The form should have a fixed layout, 800 pixels.

    Example:
    [img]http://www.aranda.se/qsforms.jpg[/img]

    Column 1: Label (Fixed size)
    Column 2: Mandatory icon (visible or not dependning on if the field is mandatory)
    Column 3: Field (could be different fields, radio, dropdown, textarea….)
    Column 4: Label (Fixed size)
    Column 5: Mandatory icon (visible or not dependning on if the field is mandatory)
    Column 6: Field (could be different fields, radio, dropdown, textarea….)

    I also want borders as shown in the example image, but only 1 pixel, not two (I had som problems with that).
    All information in "cells" should be centered vertically. Mandatory icon should be centered both vertically och horizontally.
    Only css, no tables :roll:

    We are not using CSS3 yet…

    Is this enough information to get some help?

    Any help would be appreciated…

    //Randomizer

    # August 9, 2010 at 1:25 am

    I don’t see a question?

    i see a list of what you are doing but no question asking for helpp on a particular piece.

    or are you asking for someone to build it all for you?

    # August 9, 2010 at 4:02 am

    I’m not sure if this is the right way to build this with css.
    The goal is to convert all tables to css in our application so I need
    some help with the css code.

    This is what I’ve got so far:

    Code:
    <html>
    <head>
    <title>QS Forms</title>

    <style type="text/css">
    body { color:#666; font-family: arial; } /*just to make the page look nicer */

    .formheader {
    width:300px;
    border-top:1px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #999;
    background-image: url(formHeaderBg.jpg);
    background-repeat: repeat-x;

    }

    .formheader p {
    margin-top:3px;
    font-size: 13px;
    font-weight: bold;
    padding:0 3px;
    height:18px;
    }

    .row {
    width:800px;
    clear:left;
    border-top:1px solid #999;
    border-right:1px solid #999;
    background-color: #EFEFEF;
    }

    .row div {
    height:30px;
    padding:0 3px;
    float:left;

    }

    .label {
    width:150px;
    border-left:1px solid #999;
    }

    .label p {
    margin-top:7px;
    font-size: 11px;
    font-weight: bold;
    }

    .mandatory p {
    margin-top:4px;
    font-size: 18px;
    font-weight: bold;
    color:#FCB711;
    text-align:center;
    }

    .mandatory {
    width:25px;
    }

    .formfield {
    width:200px;
    }

    .formfield input,textarea {
    margin-top:3px;
    font-size: 11px;
    width:218px;
    }

    .left {
    border-left:1px solid #999;
    }

    .bottom div {
    border-bottom:1px solid #999;
    }
    </style>

    <!–[if IE]>
    <style type="text/css">
    .formfield input { margin-top:4px; }
    </style>
    <![endif]–>

    </head>

    <body>

    <div class="formheader"><p>Global settings</p></div>
    <div class="row">
    <div class="label left"><p>Label 1:</p></div>
    <div class="mandatory"><p> > </p></div>
    <div class="formfield"><textarea name="" cols="3" rows="6"></textarea></div>
    <div class="label"><p>Label 2:</p></div>
    <div class="mandatory"> <p>></p> </div>
    <div class="formfield"><input type="text" name="textfield2"/></div>
    </div>

    <div class="row bottom">
    <div class="label left"><p>Label 3:</p></div>
    <div class="mandatory"> <p>></p> </div>
    <div class="formfield"><input type="text" name="textfield3"/></div>
    <div class="label"><p>Label 4:</p></div>
    <div class="mandatory"> <p>></p> </div>
    <div class="formfield"><input type="text" name="textfield4"/></div>
    </div>

    </body>
    </html>

    When I added a textarea I’ve received som strange results with the borders.
    The css class ".row div" has a fixed height and it doesn’t "follow" the height
    of the textarea. The label and the yellow mandatory arrow should also
    be vertically centered in this case.
    Any clue here?

    [img]http://www.aranda.se/qsforms2.jpg[/img]

    //Randomizer

    # August 9, 2010 at 10:33 am

    Well dude there is alot of errors there. im guessing you are designing in Internet Explorer because it does not look like that in my Firefox.. it’s one big mess.

    Anyway i gotta go bed i had a quick look at the border left but still theres alot that needs changing. like class names cant have spaces in them.

    Code:
    <html>
    <head>
    <title>QS Forms </title>

    <style type="text/css">
    body { color:#666; font-family: arial; } /*just to make the page look nicer */

    .formheader {
    width:300px;
    border-top:1px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #999;
    background-image: url(formHeaderBg.jpg);
    background-repeat: repeat-x;

    }

    .formheader p {
    margin-top:3px;
    font-size: 13px;
    font-weight: bold;
    padding:0 3px;
    height:18px;
    }

    .row {
    width:800px;
    clear:left;
    border-top:1px solid #999;
    border-right:1px solid #999;
    border-left:1px solid #999;
    background-color: #EFEFEF;
    }

    .row div {
    height:30px;
    padding:0 3px;
    float:left;

    }

    .label {
    width:150px;

    }

    .label p {
    margin-top:7px;
    font-size: 11px;
    font-weight: bold;
    }

    .mandatory p {
    margin-top:4px;
    font-size: 18px;
    font-weight: bold;
    color:#FCB711;
    text-align:center;
    }

    .mandatory {
    width:25px;
    }

    .formfield {
    width:200px;
    }

    .formfield input,textarea {
    margin-top:3px;
    font-size: 11px;
    width:218px;
    }

    .bottom div {
    border-bottom:1px solid #999;
    }
    </style>

    <!–[if IE]>
    <style type="text/css">
    .formfield input { margin-top:4px; }
    </style>
    <![endif]–>

    </head>

    <body>

    <div class="formheader"><p>Global settings</p></div>
    <div class="row">
    <div class="label"><p>Label 1:</p></div>
    <div class="mandatory"><p> > </p></div>
    <div class="formfield"><textarea name="" cols="3" rows="6"></textarea></div>
    <div class="label"><p>Label 2:</p></div>
    <div class="mandatory"> <p>></p> </div>
    <div class="formfield"><input type="text" name="textfield2"/></div>
    </div>

    <div class="row bottom">
    <div class="label"><p>Label 3:</p></div>
    <div class="mandatory"> <p>></p> </div>
    <div class="formfield"><input type="text" name="textfield3"/></div>
    <div class="label"><p>Label 4:</p></div>
    <div class="mandatory"> <p>></p> </div>
    <div class="formfield"><input type="text" name="textfield4"/></div>
    </div>

    </body>
    </html>

    # August 10, 2010 at 6:25 am

    Hi Mr.Randomizer,

    I understood you problem and I had solved it.
    Actually i guess you working for IE but as am using MAC I don’t chance to check my code in IE so I had designed according my available browsers like Mozilla FireFox, Chrome and Safari. It works fine as per your requirements.

    Here the view of my design in all my browsers:
    [img]http://i1011.photobucket.com/albums/af231/kalyanpasupuleti/Screen_shot.jpg?t=1281435757[/img]

    And below is the code for it:

    Code:
    <html>
    <head>
    <title>QS Form</title>
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    list-style-type:none;
    }
    html, body {
    font-family:arial;
    font-size:12px;
    }
    .main-wrap {
    margin:20px auto;
    width:800px;
    }
    span.form_heading {
    display:block;
    padding:5px 5px 5px 10px;
    width:120px;
    color:#fff;
    font-weight:bold;
    font-size:14px;
    background:#888;
    }
    ul.ul_row {
    float:left;
    display:block;
    width:800px;
    border:1px solid #aaa;
    border-bottom:none;
    }
    ul.ul_row p {
    display:table-cell;
    padding:5px;
    vertical-align:middle;
    }
    p.first_cell {
    width:100px;
    font-weight:bold;
    border-right:1px solid #aaa;
    }
    p.second_cell, p.fifth_cell {
    width:50px;
    text-align:center;
    font-weight:bold;
    font-size:14px;
    color:#FCB711;
    border-right:1px solid #aaa;
    }
    p.third_cell {
    width:216px;
    border-right:1px solid #aaa;
    }
    p.third_cell input, p.sixth_cell input {
    width:100%;
    }
    p.fourth_cell {
    width:100px;
    font-weight:bold;
    border-right:1px solid #aaa;
    }
    p.sixth_cell {
    width:216px;
    }
    ul.last_row {
    border-bottom:1px solid #aaa;
    }
    .clear {
    display:block;
    clear:both;
    }
    </style>
    </head>
    <body>
    <div class="main-wrap">
    <span class="form_heading">Global Settings</span>
    <ul class="ul_row">
    <p class="first_cell">Label 1</p>
    <p class="second_cell"> > </p>
    <p class="third_cell"><input type="text"></p>
    <p class="fourth_cell">Label 2</p>
    <p class="fifth_cell"> > </p>
    <p class="sixth_cell"><input type="text"></p>
    </ul>
    <ul class="ul_row">
    <p class="first_cell">Label 3</p>
    <p class="second_cell"> > </p>
    <p class="third_cell"><textarea name="Name" rows="8" cols="25"></textarea></p>
    <p class="fourth_cell">Label 4</p>
    <p class="fifth_cell"> > </p>
    <p class="sixth_cell"><input type="text"></p>
    </ul>
    <ul class="ul_row last_row">
    <p class="first_cell">Label 5</p>
    <p class="second_cell"> > </p>
    <p class="third_cell"><input type="text"></p>
    <p class="fourth_cell">Label 6</p>
    <p class="fifth_cell"> > </p>
    <p class="sixth_cell"><input type="text"></p>
    </ul>
    <span class="clear"></span>
    </div>
    </body>
    </html>

    Well, enjoy the work ;) and cheers 8-)

    # August 10, 2010 at 7:05 pm

    @kalyan.pasupuleti
    Unfortunately a majority of people use IE and some are still on IE6, so it would behoove you to check your code on IE8, 7 and 6 or you might have some surprises.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".