PDA

View Full Version : Forms and fieldsets- why am I getting this odd result?


BGCarrera32
07-01-2010, 03:55 AM
Hi:

I am new here and used the search function but no luck.
I need a little help with using fieldsets in CS4 when building forms. I am taking a distance class through a college, and am perplexed as to the results I am getting.

Basically, I created a form using a 3 column table in DW. The result I am after looks correct in the design screen of DW. I have a couple of fieldsets in the rightmost columns but when viewed in a browser my fieldsets are stretching way wide and crowding out the left and center columns. Do I need to lock my table values somehow, or what might be causing this?

Thanks for any help!

BGCarrera32
07-01-2010, 04:05 AM
I hate trolls...

edbr
07-01-2010, 04:11 AM
me too! troll go sleep now.
as for your form need code or links, post your code in [code] tags (go advanced)

BGCarrera32
07-01-2010, 04:19 AM
edbr- first off, thanks, second, I have no idea exactly what you are saying.
I am happy to cut and paste my code into the this thread, but need specific instructions if you want me to get it in a scroll like box like I saw in your link.

me = newbie :wink:

edbr
07-01-2010, 04:26 AM
no prob, below the message box click on Go advanced , then click the # sign and put your code between and

BGCarrera32
07-01-2010, 04:29 AM
Thank you-thank you! I sure would like to understand this...

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColFixCtrHdr #container {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.oneColFixCtrHdr #header {
background: #DDDDDD;
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding-top: 0;
padding-right: 50px;
padding-bottom: 0;
padding-left: 50px;
height: auto;
background-color: #FFF;
margin: 0px;
}
.oneColFixCtrHdr #footer {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style></head>

<body class="oneColFixCtrHdr">

<div id="container">
<div id="header"><img src="images/techheader.jpg" width="900" height="200" alt="2010 UND Tech Symposium form" />
<!-- end #header -->
</div>
<div id="mainContent">
<h1>Register today!</h1>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="10">
<tr>
<td colspan="2">Personal Information</td>
<td width="400">Student Profile</td>
</tr>
<tr>
<td width="200"><label for="firstname">First Name</label></td>
<td><input type="text" name="firstname" id="firstname" /></td>
<td width="400" rowspan="3"><fieldset>
<legend>Tell us about yourself:</legend>
<table width="400">
<tr>
<td><label>
<input type="radio" name="status" value="prospect" id="status_0" />
Prospective Student</label></td>
<td><label>
<input type="radio" name="status" value="staff" id="status_3" />
Staff Member</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="status" value="current" id="status_1" />
Current Student</label></td>
<td><label>
<input type="radio" name="status" value="faculty" id="status_4" />
Faculty Member</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="status" value="former" id="status_2" />
Former Student</label></td>
<td><label>
<input type="radio" name="status" value="other" id="status_5" />
Other</label></td>
</tr>
</table>
</fieldset>
</tr>
<tr>
<td width="200"><label for="lastname">Last name</label></td>
<td><input type="text" name="lastname" id="lastname" /></td>
</tr>
<tr>
<td width="200"><label for="address1">Street Address 1</label></td>
<td><input type="text" name="address1" id="address1" /></td>
</tr>
<tr>
<td width="200"><label for="address2">Street Address 2</label></td>
<td><input type="text" name="address2" id="address2" /></td>
<td width="400" rowspan="3"><fieldset>
<legend>Are you a student or graduate of the Technology Department at ABC?</legend>
<table width="200">
<tr>
<td><label>
<input type="radio" name="studentstatus" value="yes" id="studentstatus_0" />
Yes</label></td>
<td><label>
<input type="radio" name="studentstatus" value="no" id="studentstatus_1" />
No</label></td>
</tr>
</table>
</fieldset></td>
</tr>
<tr>
<td width="200"><label for="city">City</label></td>
<td><input type="text" name="city" id="city" /></td>
</tr>
<tr>
<td width="200"><label for="state">State</label></td>
<td><input type="text" name="state" id="state" /></td>
</tr>
<tr>
<td width="200"><label for="zipcode">Zip Code</label></td>
<td><input type="text" name="zipcode" id="zipcode" /></td>
<td width="400">&nbsp;</td>
</tr>
<tr>
<td width="200"><label for="homephone">Home Phone #</label></td>
<td><input type="text" name="homephone" id="homephone" /></td>
<td width="400">&nbsp;</td>
</tr>
<tr>
<td width="200"><label for="workphone">Work Phone #</label></td>
<td><input type="text" name="workphone" id="workphone" /></td>
<td width="400">&nbsp;</td>
</tr>
<tr>
<td width="200"><label for="cellphone">Cell Phone #</label></td>
<td><input type="text" name="cellphone" id="cellphone" /></td>
<td width="400">&nbsp;</td>
</tr>
<tr>
<td width="200"><label for="email">E-mail address</label></td>
<td><input type="text" name="email" id="email" /></td>
<td width="400">&nbsp;</td>
</tr>
<tr>
<td colspan="3" align="left">&nbsp;</td>
</tr>
<tr>
<td colspan="3"><p>At this year's symposium, we are offering a catered lunch. The cost is $10 and payable at the event. Should we reserve a lunch for you?</p>
<table width="200">
<tr>
<td><label>
<input type="radio" name="lunch" value="yes" id="lunch_0" />
Yes</label></td>
<td><label>
<input type="radio" name="lunch" value="no" id="lunch_1" />
No</label></td>
</tr>
</table>
<p>&nbsp;</p></td>
</tr>
<tr>
<td colspan="3">Would you like to receive our electronic newsletter?
<table width="200">
<tr>
<td><label>
<input type="radio" name="newsletter" value="yes" id="newsletter_0" />
Yes</label></td>
<td><label>
<input type="radio" name="newsletter" value="no" id="newsletter_1" />
No</label></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3">Would you like to be added to our e-mail list to learn about future events?
<table width="200">
<tr>
<td><label>
<input type="radio" name="emaillist" value="yes" id="emaillist_0" />
Yes</label></td>
<td><label>
<input type="radio" name="emaillist" value="no" id="emaillist_1" />
No</label></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3">Would you like to donate $5 to the Dr. Lynda Kenney retirement fund?
<table width="200">
<tr>
<td><label>
<input type="radio" name="retirement" value="yes" id="retirement_0" />
Yes</label></td>
<td><label>
<input type="radio" name="retirement" value="no" id="retirement_1" />
No</label></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="submit" id="submit" value="Submit" />
<input type="reset" name="reset" id="reset" value="Reset" /></td>
</tr>
</table>
</form>
<p>&nbsp;</p>
<!-- end #mainContent --></div>
<div id="footer">
<p><img src="images/footer.jpg" width="900" height="75" alt="Footer" /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

edbr
07-01-2010, 04:56 AM
the problem is that the tables all have set widths or the cells . nested tables like that are a curse and you should not waste time learnibng them. layout should be divs( layers if you will) using css. in fact you can set widths for labels and form element .if the course you are following is promoting tables for layout i would ask for a refund if i were you

BGCarrera32
07-01-2010, 05:14 AM
LOL..I would ask for a refund but need the course credits...2 lessons to go
The whole class has been goofiness like this.
Big pain in the rear
Thanks for looking though.

best regards-
BG

edbr
07-01-2010, 05:18 AM
try remaking your table then with better widths and copy/paste your field items into it

BGCarrera32
07-01-2010, 05:38 AM
I guess I don't understand what you mean by better widths.
Incidentally, at the top of my table column I will see a little box that has a number with the column width in it. Sometimes it will have 2 numbers, one in parenthesis like 380(400). What does that mean, or why 2 sets of numbers>

Thanks again

edbr
07-01-2010, 06:12 AM
they are column spans. the make up of a table (basic) is
<table>

<tr> <td> </td> <td> /<td></tr>

</table>so if you have
<table width= "800px">

<tr> <td width="500px">&nbsp; </td> <td width="300px"> &nbsp; </td></tr>

</table>
you will get table 800px wide
tr is a row
containing first cell <td> 500px wide
second 300 px wide
so im saying make your table to the layout you want to see

&nbsp; is just a space BTW