divs and css for a long form

Hi folks, can you please help me on how to set up the html and css body parts to design a from with a long number of fields,

what would be a good measure on the css for the body and what elements do I need?

Should I stick with tables or is it better to use only div

page:
https://lo5.medseek.com/lfserver/UH_Pre-Registration_Form
LVL 9
TonyRebaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NrisimhaCommented:


Dear TonyReba,

Here is a my HTML with basic design and calculating with functions in Javascript.
I had to translate it from Croatian into English.

It is very useful to learn how to make a Form with CSS and how to use a Javascript functions for calculating.

Very, very useful

good luck

Nrisimha



form.html
0
TonyRebaAuthor Commented:
am trying to mimic a page form from: https://lo5.medseek.com/lfserver/UH_Pre-Registration_Form

But I dont know how to make the tables style match up, the div is not expanding to the table header my markup is as follow and css .
css
body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width:90%;
}
.textbox
{
    margin-left: 2px;
}

.Grid
{
	table-layout: fixed;
}

.GridColumn
{
	white-space: pre-wrap; /* css-3 */
	white-space: pre-line;
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word;
	
}

.headerform
{
    background-color: #009797;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
}

.headerform p
{
    background-color: #009797;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-transform: none;
}


#confirmationNumber
{ float:right;
  width:305px;
  position:relative;
    top: -101px;
    left: -7px;
    height: 43px;
}

table
{
}
 th,td {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #000000;
    }
    tr {
        border: 1px solid gray;
    }
    td {
        width:200px;
        padding:3px;
    }
    th {
        background-color:#D2E0E8;
        color:#003366
    }
    table {
        border: 1pt solid gray;
    }

Open in new window

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Debug="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>DHR Physician Concerns Page</title>
    <style type="text/css">
        .style1
        {
            width: 160px;
            height: 121px;
        }
        .style2
        {
            color: #FF0000;
        }
        .style3
        {
            font-size: medium;
        }
        </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="MainDiv">
    <div id="header">
        <div id="logo">
        
            <img alt="DHR Logo" class="style1" src="Images/logoDHR_rg.png" />&nbsp;&nbsp;&nbsp; <strong>
            <span class="style3">Complete and submit the Online Pre-Registration Form</span></strong>
            
            </div>

            <div id="confirmationNumber">
            
                <span class="style2">Fields marked in red are required.</span><br />
                Confirmation Number
                <asp:TextBox ID="txtConfirmation" runat="server" Width="100px"></asp:TextBox>
            
            </div>
          <br />
        This form is for procedures that have already been scheduled and should be 
        completed at least 2business days in advance. If you have any questions, please 
        call 706/774-2125. 
        <br />
        <br />
          
          </div>
            <div id="mainDiv">

            <table style="width:100%;">
            <tr>
            <th>
            <div id="headerform" class="headerform">
                    PAtient information<p>Please enter your full legal name</div>

            
            </th>
            </tr>
            <tr>
                <td>
                    Last Name<br />
                </td>
                <td>
                    First Name</td>
                <td>
                    Middle Name</td>
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>

                
     
    <!-- End of Main Div-->
    </div>
    </form>
   
           
</body>
</html>

Open in new window

0
sunu340Commented:
Are u talking about the "PAtient information" part which is inside headerform div.

If I am correct then just put <th colspan="3"> (line 55 in html code u provided) in th enclosing div..It will expand.
All other rows have 3 columns so its important to add colspan in row which contain less than 3 columns..

Hope this helps :)
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

TonyRebaAuthor Commented:
Would it be better to use tables as I am using or can I create the same look using divs and css?
0
sunu340Commented:
U can use anything depending on ur requirement..but using a table will be easier for u to maintain and arrange..
0
TonyRebaAuthor Commented:
I need to do a layout exactly as the one  in:

page:
https://lo5.medseek.com/lfserver/UH_Pre-Registration_Form

But I need to have a width and height on the body that is compatible with 1024 and 1280 , screens , can you give me some tips?
0
sunu340Commented:
To have the exact layout,u can use the same css property that is used there i.e.
width:8.5in; in each of the enclosing div.

or u can specify the width element in
body{

} as well.

If u want ur form to resize in every screen(1024 or 1280) then u can use width:50%(or may be any other value depending on ur requirement) as well.
But providing a % value will not be a wise option.Its always better to provide fixed numeral like 8.5in or whatever ur measurement is.

Hope this helps :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.