Help with 6 column form layout - CSS-Tricks

This topic is empty.

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

Author

Posts
August 8, 2010 at 2:50 am #29863

Randomizer
Member

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

maknib
Member

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

Randomizer
Member

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

maknib
Member

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

kalyan.pasupuleti
Member

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

August 10, 2010 at 7:05 pm #81313

virtual
Participant

@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.
Author

Posts

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

The forum ‘CSS’ is closed to new topics and replies.