View Full Version : CSS and HTML Coding Help (Web Forms)

11-10-2010, 09:09 AM
I'm having trouble with having my grid display correctly for my web form. The idea is to have 3 rows with 3 columns, with the text to the right of each check box. Field set box needs to be 450px wide and 120px tall. I will post the .htm file and the corresponding .css file. I'm thinking it has something to do with the relative positioning of id="interestFields" on my stylesheet. Everything else appears as it should. Thank you.

Top Coordinates of interest1-3 20px; int4-6: 50px; int7-9: 80px
Left Coords: int 1,4,7: 0px; int 2,5,8: 140px; int 3,6,9: 280px


<title>Lighthouse Volunteer Form</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="vforms.css" rel="stylesheet" type="text/css" />

<div id="head"><img src="lhouse.jpg" alt="The Lighthouse" /></div>

<div id="links">
<li><a href="#">home</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">upcoming events</a></li>
<li><a href="#">community links</a></li>
<li><a href="#">staff</a></li>
<li><a href="#">donations</a></li>
<li><a href="#">volunteers</a></li>
<li><a href="#">contact info</a></li>

<div id="mainContent">
<div id="leftColumn">
<p>Thank you for considering donating your time and talents to The
Lighthouse. While we always welcome financial support, we cannot
continue to serve the public without volunteers like you.
<p>Please fill out the form on this page indicating your interests
and talents. Everyone has something to offer, so don't be shy.
And remember, we can always teach you, so don't let inexperience
keep you away.</p>
<p>While you are helping others, you too will gain from the experience.
Many of our volunteers have been with us for years. One of our
volunteers told me the other day, "Terry, The Lighthouse has
given more to me than I have ever given to it."</p>
<p>Welcome to the team!</p>
<p>&mdash; Terry Ives<br />
&nbsp;&nbsp;&nbsp; Director, <i>The Lighthouse</i></p>
<p>P.S. Please consider a <a href="#">financial donation</a>
to help us continue to support our neighbors in the community.</p>

<div id="rightColumn">
<h1>Volunteer Form</h1>
<p><span>*</span> indicates required information</p>

<form name="volunteerForm" id="volunteerForm"

<input type="hidden" name="eMail" id="eMail"
value="stevejones@thelighthouse.org" />

<fieldset id="contactFields">
<legend>Contact Information</legend>

<input type="checkbox" id="ageOK" name="ageOK" />
I am 16 or older<span>*</span>

<label class="blockLabel">
First Name<span>*</span>
<input type="text" id="fName" name="fName" />

<label class="blockLabel">
Last Name<span>*</span>
<input type="text" id="lName" name="lName" />

<label class="blockLabel">
Street Address 1<span>*</span>
<input type="text" id="street1" name="street1" />

<label class="blockLabel">
Street Address 2
<input type="text" id="street2" name="street2" />

<label class="blockLabel">
<input type="text" id="city" name="city" value="St. Peters" />

<label class="blockLabel">
<input type="text" id="state" name="state" maxlength="2" value="MO" />

<label class="blockLabel">
<input type="text" id="zip" name="zip" maxlength="10" />

<label class="blockLabel">
<input type="text" id="phone" name="phone" />


<fieldset id="volunteerInfo">
<legend>Volunteer Information</legend>

<label class="blockLabel">
How did you hear about The Lighthouse?
<select id="infoSource" name="infoSource">
<option value="talk">Word of Mouth</option>
<option value="ads">TV or Radio Ad</option>
<option value="internet">The Internet</option>
<option value="phonebook">The Phone Book</option>
<option value="schools">College/High School</option>

<fieldset id="experience">
<legend>Have you volunteered before?</legend>

<label for="prevYes">Yes</label>
<input type="radio" id="prevYes" name="prevExp" value="yes" />
<label for="prevNo">No</label>
<input type="radio" id="prevNo" name="prevExp" value="no" />


<fieldset id="interestFields">
<legend>I can help with the (check all that apply)</legend>

<input type="checkbox" id="interest1" name="babysitting" />

<input type="checkbox" id="interest2" name="cleaning" />

<input type="checkbox" id="interest3" name="clerical" />
Clerical Duties

<input type="checkbox" id="interest4" name="events" />
Event Planning

<input type="checkbox" id="interest5" name="mailing" />

<input type="checkbox" id="interest6" name="maintenance" />

<input type="checkbox" id="interest7" name="food" />
Meal Preparation

<input type="checkbox" id="interest8" name="tutoring" />

<input type="checkbox" id="interest9" name="web" />
Web Site


<label for="comments" class="blockLabel">Tell us about yourself</label>
<textarea id="comments" name="comments" rows="5" cols="55">


<input type="submit" value="I'm Ready to Volunteer" />
<input type="reset" value="Cancel" />



The Lighthouse &bull;
150 Cavates Rd. &bull;
St. Peters, MO 63376 &bull;
(636) 555 - 4477



fieldset {background-color: rgb(237, 233, 223); padding: 10px;
margin-bottom: 10px}

#volunteerForm span {color: red}

label.blockLabel {display: block; position: relative; width: 450px;
margin: 12px 0px}

label.blockLabel input {position: absolute; left: 140px}

#fName, #lName {width: 250px}
#street1, #street2 {width: 350px}
#phone, #city {width: 150px}
#state {width: 40px}
#zip {width: 80px}

#experience {width: 450px; padding: 5px}

#interestFields {position: relative; width: 450px; height: 120px;
padding: 5px}

#interest1 {position: absolute; top: 20px; left: 0px}
#interest2 {position: absolute; top: 20px; left: 140px}
#interest3 {position: absolute; top: 20px; left: 280px}
#interest4 {position: absolute; top: 50px; left: 0px}
#interest5 {position: absolute; top: 50px; left: 140px}
#interest6 {position: absolute; top: 50px; left: 280px}
#interest7 {position: absolute; top: 90px; left: 0px}
#interest8 {position: absolute; top: 90px; left: 140px}
#interest9 {position: absolute; top: 90px; left: 280px}

11-10-2010, 03:56 PM
Tables can and are usually used for forms. Create a table 3 column x 3 rows, wrap your table in a form and then add your fields as table data.(<td>)

You can set the table widths and all that once the initial form and table are built.

Here is one I have, with my personal stuff removed, but you get the idea.

<form action="yourformResults.html" method="post" name="form">
<th bgcolor="#CCCCCC">First Name</th>
<td><input type="text" name="FirstName" /></td>
<th bgcolor="#CCCCCC">Last Name</th>
<td><input type="text" name="LastName" /></td>
<th bgcolor="#CCCCCC">Email Address</th>
<td><input type="text" name="Email" /></td>
<th bgcolor="#CCCCCC">State</th>
<td><input name="State" type="text" /></td>
<td><input type="submit" name="button" id="button" value="Submit" /></td>
<td><input type="submit" name="button2" value="Reset" /></td>

11-10-2010, 05:52 PM
Thank you for the response and I'll keep it in mind, however, this is for an assignment so it needs to be a done a certain way. Our teacher has given us free roam to talk to or grab resources to learn from wherever and I've exhausted everything else and the teacher isn't responding. This is an online class with the paper due tonight. Thanks anyway for the table idea, I will probably incorporate that into my own website for our final project.