Help with 6 column forms layout [Archive]

View Full Version : Help with 6 column forms layout

Randomizer

08-08-2010, 07:59 AM

Hello!

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

Example:
http://www.aranda.se/qsforms.jpg

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

Beverleyh

08-08-2010, 09:05 AM

What code do you have so far? Please post a link to your page or paste the full code that's you've already prepared.

Also, you haven't actually stated your problem.
Please explain which aspect you're getting stuck on or are you asking for somebody to code the table layout for you?

You might find this free/open source WYSIWYG website builder useful - Kompozer; http://www.kompozer.net-download.php
You can draw tables with it quite easily and set cell properties (centered, align left, etc). You can also quickly flick back and forth into HTML code view so you can copy the generated table code to paste into your own web page. Or open your whole web page in Kompozer in the first instance and edit it there.

Randomizer

08-08-2010, 09:49 AM

Hi!

My goal is to find the most flexible css solution for building this
type of form, no tables. I've searched and found many different
solutions...that's why I'm getting a bit confused.

The HTML:
<div id="row1">
<div style="label">Label 1:</div>
<div style="mandatory"><div>
<div style="field"><input type="text" name="textfield1"/></div>
<div style="label">Label 2:</div>
<div style="mandatory"><div>
<div style="field"><input type="text" name="textfield2"/></div>
</div>

Regarding the CSS, I'm not an expert, that's why I'm asking for your help.
How to use Float in CSS for example...

I have Dreamweaver CS4, so I'm not in need of a HTML editor, thanks anyway for the link.

Thanks again.

//Randomzizer

Beverleyh

08-08-2010, 11:25 AM

OK - I'm not a CSS expert either but this looks like a pretty good starting point;
(tested on IE6/7/8, Chrome, Firefox, Opera and Safari - Windows platform)

<html>
<head>
<title>Tableless Form Test</title>

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

.row { width:800px; clear:left; }
.row div { border-top:1px solid #999; border-right:1px solid #999; height:30px; padding:0 3px; float:left; }
.label { width:150px; }
.label p, .icon p { margin-top:6px; }
.icon { color:red; font-weight:bold; text-align:center; width:25px; }
.formfield { width:200px; }
.formfield input { margin-top:4px; }
.left { border-left:1px solid #999; }
.bottom div { border-bottom:1px solid #999; }
</style>



</head>

<body>

<div class="row">
<div class="label left"><p>Label 1:</p></div>
<div class="icon"> <p>></p> </div>
<div class="formfield"><input type="text" name="textfield1"/></div>
<div class="label"><p>Label 2:</p></div>
<div class="icon"> <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="icon"> <p>></p> </div>
<div class="formfield"><input type="text" name="textfield3"/></div>
<div class="label"><p>Label 4:</p></div>
<div class="icon"> <p>></p> </div>
<div class="formfield"><input type="text" name="textfield4"/></div>
</div>

</body>
</html>

Note the extra class of "bottom" required on the very last row and also "left" required in the first occurance of the label on each row.

Also, its not exactly 800px wide - I've just gone with the closest 5px increment on .label, .icon and .formfield widths so when combined they total something close to 800px.

Beverleyh

08-08-2010, 11:29 AM

This might also get you started with understanding floats: http://webdesign.about.com/od/advancedcss/a/aa010107.htm

Randomizer

08-08-2010, 11:34 AM

Thanks for your reply.

I will test your code.

//Randomizer

Randomizer

08-08-2010, 01:41 PM

Why using the <p> tags arround the label and mandatory?

//Randomizer

Beverleyh

08-08-2010, 04:15 PM

So you can target the text with ".icon p" and ".label p" in the CSS and give them the margin-top value that creates the centered vertical-alignment effect (its this that pushes the text away from the "cell" top border).

If you didn't use the <p>, you'd have to use internal padding on the containing div "cell" instead, and that would also increase the height of the "cell" so the text wouldn't appear to be centered vertically. The div "cells" sat in a row would then all be different heights and not look like a neat grid anymore.

Randomizer

08-08-2010, 08:17 PM

Ok, this is what I've got so far:

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



</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.

http://www.aranda.se/qsforms2.jpg

Any clue?

Thanks again for your help.

//Randomizer

Beverleyh

08-09-2010, 05:49 AM

There isn't a valign equivelant on div as there are on table cells that's why I surrounded the text in paragraph tags and gave the margin-top:6px value in the CSS but that only works visually with the current row height of 30px.

If you occasionally need different height "cells" you should add an additional class to the div "cells" in that row and assign a larger margin-top value that will push the text down further.

This is why tables are much easier to manipulate in such cases as these and why we don't see common div use like this elsewhere on the web. As seen from my test, divs CAN be used to mock up something similar but they take much more work (I know as I was sat for over an hour faffing with the CSS for you) so that's why folk tend to opt for a table when laying out forms.

Beverleyh

08-09-2010, 07:50 AM

If you occasionally need different height "cells" you should add an additional class to the div "cells" in that row and assign a larger margin-top value that will push the text down further.You need to set a larger hight on the additional class too. The current height of 30px is what dictates the left hand border - a larger height means a longer line.

Beverleyh

08-10-2010, 09:44 AM

Have you managed to tweek the CSS to suit your needs? Is this thread fully resolved now?

Let us know