• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

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
0
TonyReba
Asked:
TonyReba
  • 3
  • 3
1 Solution
 
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now