zachvaldez
asked on
Page layout
I will be developing a page for registration and a
questionnaire survey and this involves a few columns
and multi rows.
I'm looking for a page layout that I can use that has flexibility
for adding columns and rows that I can insert to a master page.
I'd prefer to use CSS than table layout.
Can someone provide?
questionnaire survey and this involves a few columns
and multi rows.
I'm looking for a page layout that I can use that has flexibility
for adding columns and rows that I can insert to a master page.
I'd prefer to use CSS than table layout.
Can someone provide?
If it is a form, then you should use the <fieldset> tag to group different parts of the form and you can label the groups with the <legend> tag to help guide the user.
Within the field sets you can style the and position the individual elements with CSS, and the positional relationship of the sections of the form can be established using CSS on the fieldsets.
I have a couple of pieces on my site that might help for reference:
This one demonstrates dynamic positioning with fieldsets
and this explores some styling options for forms
If you post some code or a link with specific issues, we can give you more detailed help.
Cd&
Within the field sets you can style the and position the individual elements with CSS, and the positional relationship of the sections of the form can be established using CSS on the fieldsets.
I have a couple of pieces on my site that might help for reference:
This one demonstrates dynamic positioning with fieldsets
and this explores some styling options for forms
If you post some code or a link with specific issues, we can give you more detailed help.
Cd&
For using columns with css, instead of reinventing the wheel, check out some of these grid systems.
http://www.blueprintcss.org/ the easiest but getting a little out dated. Great for fixed layouts, not so much for responsive.
http://960.gs/
http://twitter.github.io/bootstrap/
http://foundation.zurb.com/
My current favorites are bootstrap and foundation. They do contain a lot of js/jquery and extra files, but this is part of what helps make this great for mobile.
http://www.blueprintcss.org/ the easiest but getting a little out dated. Great for fixed layouts, not so much for responsive.
http://960.gs/
http://twitter.github.io/bootstrap/
http://foundation.zurb.com/
My current favorites are bootstrap and foundation. They do contain a lot of js/jquery and extra files, but this is part of what helps make this great for mobile.
ASKER
It's a good layput tool(csstable generator) but essentially uses the table-tr-td.
I would prefer pure css.
I would prefer pure css.
If you are not going to post a link, then we can't help much beyond posting links. We need to see what you have to give specific help.
Cd&
Cd&
ASKER
I started like this:
<div id="container">
<div class="rows">
<div class="row">
<div class="column w-70-percent">
<asp:Label ID="Label1" runat="server" Text="Workflow"></asp:Labe l>
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<div class="clear-row">
</div>
</div>
<div class="row">
<div class="column w-70-percent">
<asp:Label ID="Label2" runat="server" Text="XFR File#:"></asp:Label>
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<div class="clear-row">
</div>
</div>
<div class="row">
<div class="column w-70-percent">
Row 3 / Column 1
</div>
<div class="column w-30-percent">
Row 3 / Column 2
</div>
<div class="column w-30-percent">
Row 3 / Column 3
</div>
<div class="column w-30-percent">
Row 3 /Column 4
</div>
<div class="clear-row">
</div>
</div>
<div class="row">
<div class="column w-70-percent">
Row 4 / Column 1
</div>
<div class="column w-30-percent">
Row 4 / Column 2
</div>
<div class="column w-30-percent">
Row 4 / Column 3
</div>
<div class="column w-30-percent">
Row 4/Column 4
</div>
<div class="clear-row">
</div>
</div>
<div class="row">
<div class="column w-70-percent">
Row 5 / Column 1
</div>
<div class="column w-30-percent">
Row 5 / Column 2
</div>
<div class="column w-30-percent">
Row 5 / Column 3
</div>
<div class="column w-30-percent">
Row 5/Column 4
</div>
<div class="clear-row">
</div>
</div>
</div>
</div>
css
div.rows div.row {
clear:both;
border-bottom: 1px dashed black;
width: 100%;
/*height: 51px;*/
height: 22px;
}
div.rows div.column {
float: left;
height: 33px;
}
div.rows div.clear-row {
line-height: 0px;
font-size: 0px;
clear:both;
}
.w-70-percent {
width: 32%;
border: 1px solid black;
}
.w-30-percent {
width: 22%;
border: 1px solid black;
}
#container {
/*margin: 20px;*/
width:746px;
border: 2px solid black;
}
.clear-row
{
width: 482px;
}
.row
{
width: 887px;
What Id like to do is in some cases I need a comment field which will join two divs of columns with a larger area t enter info..
<div id="container">
<div class="rows">
<div class="row">
<div class="column w-70-percent">
<asp:Label ID="Label1" runat="server" Text="Workflow"></asp:Labe
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<div class="clear-row">
</div>
</div>
<div class="row">
<div class="column w-70-percent">
<asp:Label ID="Label2" runat="server" Text="XFR File#:"></asp:Label>
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<div class="clear-row">
</div>
</div>
<div class="row">
<div class="column w-70-percent">
Row 3 / Column 1
</div>
<div class="column w-30-percent">
Row 3 / Column 2
</div>
<div class="column w-30-percent">
Row 3 / Column 3
</div>
<div class="column w-30-percent">
Row 3 /Column 4
</div>
<div class="clear-row">
</div>
</div>
<div class="row">
<div class="column w-70-percent">
Row 4 / Column 1
</div>
<div class="column w-30-percent">
Row 4 / Column 2
</div>
<div class="column w-30-percent">
Row 4 / Column 3
</div>
<div class="column w-30-percent">
Row 4/Column 4
</div>
<div class="clear-row">
</div>
</div>
<div class="row">
<div class="column w-70-percent">
Row 5 / Column 1
</div>
<div class="column w-30-percent">
Row 5 / Column 2
</div>
<div class="column w-30-percent">
Row 5 / Column 3
</div>
<div class="column w-30-percent">
Row 5/Column 4
</div>
<div class="clear-row">
</div>
</div>
</div>
</div>
css
div.rows div.row {
clear:both;
border-bottom: 1px dashed black;
width: 100%;
/*height: 51px;*/
height: 22px;
}
div.rows div.column {
float: left;
height: 33px;
}
div.rows div.clear-row {
line-height: 0px;
font-size: 0px;
clear:both;
}
.w-70-percent {
width: 32%;
border: 1px solid black;
}
.w-30-percent {
width: 22%;
border: 1px solid black;
}
#container {
/*margin: 20px;*/
width:746px;
border: 2px solid black;
}
.clear-row
{
width: 482px;
}
.row
{
width: 887px;
What Id like to do is in some cases I need a comment field which will join two divs of columns with a larger area t enter info..
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You could try this page to do that
http://www.csstablegenerator.com/