PDA

Click to See Complete Forum and Search --> : Where am I going wrong????

OneCleverCookie
01-14-2006, 06:57 PM
I am trying to figure out how to put this form together without the use of a table. I'm trying to place each form element in it's own container within the PQcontainer and body class. It isn't working very well at all. The container classes just seem to stack vertically one on top of the other. Any help would be greatly appreciated.


Prequal.ccs
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
margin-left: 25px;
margin-top: 15px;
margin-right: 25px;
margin-bottom: 50px;
background-color: #FFFFFF;
}
.PQcontainer{
overflow: visable;
position: float;
visibility: visible;
z-index: 2;
height: 425px;
width: 849px;
left: 35px;
top: 75px;
color: #000000;
background-color: #ffff99;
border: 1px solid #000000;
}
.bFname{
postion:static;
overflow: hidden;
top:75px;
left:55px;
height:65px;
width:250px;
border:1px solid #000000;
z-index: 1;

}
.bMi{
postion:static;
top:75px;
left:175px;
height:65px;
width:55px;
border:1px solid #000000;
z-index: 1;
}
.bLname{
position:float;
height:65px;
width:250px;
border: 1px solid #000000;
}
.bAddress{
height:65px;
width:250px;
}
.bCity{
height:65px;
width:250px;
}
.bState{
height:65px;
width:55px;
}
.bZip{
height:65px;
width:85px;
}

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

<html>
<head>
<title>Pre-Qual Form</title>
<link href="/CSS/PreQual.css" rel="stylesheet" type="text/css" />
</head>
<body>

<form
<div class="PQcontainer">

<fieldset><legend><strong>Customer Information</strong></legend>

<div class="bFname">
<strong>First Name:</strong><br />
<input type="text" name="bFname" size="20" />
</div>

<div class="bMi">
<strong>MI:</strong><input type="text" name="bMi" size="2" />
</div>

<div class="bLname">Last Name</div>
<div class="bAddress">Address</div>
<div class="bCity">City</div>
<div class="bState">State</div>
<div class="bZip">Zip</div>

</fieldset>

<fieldset><legend><Strong>Credit Experience</strong></legend>

</fieldset>

</form>
</body>
</html>
ray326
01-14-2006, 07:18 PM
<form ...yada...>
<fieldset id="custinfo"><legend>Customer Information</legend>

<label for="bFname">First Name:<label/>
<input type="text" name="bFname" id="bFname" size="20" />

<label for="bMi">MI:</label>
<input type="text" name="bMi" id="bMi" size="2" />

... etc ...

</fieldset>
<fieldset id="credexp><legend>Credit Experience</legend>
... same pattern ...
</fieldset>
</form>

Kinda like that.
OneCleverCookie
01-14-2006, 08:47 PM
Thank you for your reply.

However,
This scenario still doesn't allow me to format the postion of each form field. Ideally, the goal is to have all of the fields and labels perfectly positioned through the use of CSS, not a table. I might be dreaming though. Any of your valuable insight is welcome.
ray326
01-15-2006, 11:02 PM
This scenario still doesn't allow me to format the postion of each form fieldSure it does. In fact it gives you more and more consitent control than a table. In some cases I also wrap the pair in a div so I can set the div's width, too. That sort of acts as a "row" to the label and input's "column".

<div><label for="bMi">MI:</label>
<input type="text" name="bMi" id="bMi" size="2" /></div>