Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS and HTML Coding Help (Web Forms)

    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
    --------------------------------------------------------------------------------------
    <html>

    <head>

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

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

    <div id="links">
    <ul>
    <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>
    </ul>
    </div>

    <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>
    <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>

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

    <form name="volunteerForm" id="volunteerForm"
    action="http://www.thelighthouse.org/cgi-bin/donation"
    method="post">

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

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

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

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

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

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

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

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

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

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

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

    </fieldset>

    <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>
    </select>
    </label>

    <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>

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

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

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

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

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

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

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

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

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

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

    </fieldset>

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

    </fieldset>

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

    </form>


    </div>

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

    </div>
    </body>

    </html>
    -------------------------------------------------------------------------------------
    vforms.css

    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}
    -------------------------------------------------------------------------------------
    Attached Files Attached Files

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

    Code:
    <form action="yourformResults.html" method="post" name="form">
        <table>
          <tr>
            <th bgcolor="#CCCCCC">First Name</th>
            <td><input type="text" name="FirstName" /></td>
          </tr>
          <tr>
            <th bgcolor="#CCCCCC">Last Name</th>
            <td><input type="text" name="LastName"  /></td>
          </tr>
          <tr>
            <th bgcolor="#CCCCCC">Email Address</th>
            <td><input type="text" name="Email" /></td>
          </tr>
          <tr>
            <th bgcolor="#CCCCCC">State</th>
            <td><input name="State" type="text" /></td>
          </tr>
          <tr>
          <td><input type="submit" name="button" id="button" value="Submit" /></td>  
          <td><input type="submit" name="button2" value="Reset" /></td>    
          </tr>
        </table>
      </form>
    Last edited by teedoff; 11-10-2010 at 03:01 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •