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

Thread: form layout

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    form layout

    I have a long form that I want to give a layout rather than have it all in one column. But I cant seem to do it, should I use tables for layout? What I want is two columns to add bits of the form to.
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>Volunteering Form</title>
    <link href="styles/layout.css" rel="stylesheet" type="text/css" />
    <link href="styles/mainstyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header">
    <div id="left_header"><h1 id="logo"><a href="" title="Lee Oasis Furniture Project"><em title="Lee Oasis Home Page"></em>Lee Oasis Furniture Project</a></h1>
    </div><!--left_header-->
    <div id="right_header">
    <p class="logtitle">Recycle and donate<br />unwanted furniture<br/>Tel: 020 8857 
    0043<br /><span class="caps">Lewisham Area</span></p></div><!--right_header-->
    </div><!--header-->
    <div class="clear"></div><!--clear-->
    <div id="nav"><a id="top"></a>
    
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="dropin.html">Drop-in</a></li>
    <li><a href="furniture.html">Furniture Project</a></li>
    <li class="current"><a href="volunteer.html">Volunteer</a></li>
    <li><a href="news.html">News/Events</a></li>
    <li id="last"><a href="appeals.html">Appeals</a></li>
    </ul>
    </div><!--nav-->
    <div class="textbox_outer">
    <div class="textbox_inner">
    <h2>Volunteer</h2>
    <div id="formdiv">
    <div id="formlside">
    <form action="mailto:" method="POST" enctype="multipart/form-data" name="form_to_email">
    <p><label>Your Name:</label><br />
    <input type="text" size="30" name="name" /><br />
    <label>Your Address:</label><br />
    <textarea name="address" rows="5" cols="30">
    </textarea><br /></p>
    <div id="formrside"><p><label>Telephone:</label><br />
    <input type="text" size="30" name="telephone" /><br /><br />
    <label>Email:</label><br />
    <input type="text" size="30" name="email" /><br /><br />
    <label>What would you like to do/skills offered:</label><br />
    <textarea name="skills" rows="5" cols="30">
    </textarea></p>
    <p>How much time do you have available?<br />
    <label>Hours per week/month?</label><br /> 
    <input type="text" size="30" name="time" /><br /><br />
    <label>On Occassional Basis?</label><br />
    <input type="text" size="30" name="occassional" /></p>
    <p>I understand the general policy of Lee Oasis and agree with its aims and 
    ethos. I have also read the relevant Health and Safety and/or Child Protection 
    Policy as it applies to me; and agree to abide by it.</p>
    <p><label>Signed (Add name and submit form):</label>
    <input type="text" size="30" name="signed" /><br /><br />
    <label>Date:</label><br/>
    <input type="text" size="30" name="date" /><br /><br />
    <input type="submit" value="email_form" /></p>
    </form></div>
    <img alt="arrow up icon image" height="14" src="images/arrow_up.jpg" width="11" /> <a href="#top">Top</a>
    
    </div><!--textbox_outer-->
    <div class="clear"></div><!--cleardiv-->
    <div id="footer">
    <p></p>
    </div><!--footer-->
    </div><!--container-->
    </body>
    </html>
    I just have this css but it is not making two columns.
    Code:
    #formdiv {width: 80%; float:left; display:inline;}
    #formlside {width: 40%; float:left; display:inline;}
    #formrside {margin-left: 400px; float:right;}
    I want the form to be as accessible and semantic as possible
    Last edited by quartzy; 12-16-2010 at 01:55 AM.


 

Posting Permissions

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