Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Page layout

Posted on 2013-07-01
7
Medium Priority
?
297 Views
Last Modified: 2013-07-10
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?
0
Comment
Question by:zachvaldez
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 9

Expert Comment

by:TvMpt
ID: 39289762
Hi.

You could try this page to do that

http://www.csstablegenerator.com/

The CSS Table Generator tool was written for creating a stylish table without use of images. To create pure CSS table, use the controls below. After designing the desired table, copy the CSS and HTML code from the textboxes below. For more CSS tools visit CSS Generators website.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39290037
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&
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39290110
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.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:zachvaldez
ID: 39294551
It's a good layput tool(csstable generator) but essentially uses the table-tr-td.
I would prefer pure css.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39296942
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&
0
 

Author Comment

by:zachvaldez
ID: 39307585
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: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">
                    <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..
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 820 total points
ID: 39307621
I gave you some great suggestions and you use this?https://gist.github.com/house9/892551

Your answer is understanding how to nest your div's.   You will have a container div (row) with 3 nested div's where the first 2 are floated left and the total width of the two are 100% the width of the outer div.  Then the 3rd div is 100% of the outer div.  This will give you the same effect has having td colspan="2"

<div id="main_row">
   <div id="col1_row1" class="w-70-percent ">col1 row1</div>
   <div id="col2_row1" class="w-30-percent ">col2 row1</div>
   <div id="full_row" class="100-percent">blah blah blah</div>
</div>

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question