SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Elements on the same line in a form?

    Hello All,

    I've created a form, which is nearly there, but can't get elements to appear on the same line. Here's what Ideally want it to look like:



    Here's my code. Can anyone help? Thanks

    HTML Code:
    <html>
    <head>
    <title>Form Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    p{margin:0}
    form {
       font-family: Georgia, serif;
       font-size: 0.6em;
       color: #999;
       background-color: #fff;
     }
     
     form label {
       font-family: Verdana, sans-serif;
      font-weight: bold;
      color: #660000;
       width: 100px;
      float:left;
      text-align:right;
      padding-right:10px;
     }
     
     form fieldset {
       border: 1px solid #ccc;
       padding: 0 20px;
     }
     form p{line-height:1.8em;margin:7px 0}
     form legend {
       font-family: arial, sans-serif;
       font-weight: bold;
       font-size: 90&#37;;
       color: #666;
       background: #eee;
       border: 1px solid #ccc;
       border-bottom-color: #999;
       border-right-color: #999;
       padding: 4px 8px;		
     }
     
     form input, form select {
    	font-size: 0.9em;
     }
    </style>
    </head>
    
    <body bgcolor="#FFFFFF">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <form action=""  method="get" id="form_results" >
      <fieldset>
      <legend>Basic Details: </legend> 
      <p> <label for="location">Location</label> 
        <select name="location_details" id="location_details">
          <option value="1">Reading</option>
          <option value="2">Twyford</option>
        </select>
      </p>
      <p> 
        <label for="min_price">Minimum Price</label> 
        <input type="text" name="min_price" id="min_price" value="" />
    	<label for="max_price">Maximum Price</label> 
        <input type="text" name="max_price" id="max_price" value="" />
      </p>
      </fieldset> 
     <p></p>
      
      <fieldset>
      <legend>Type &amp; Price Order</legend> 
        <p>
    	  <label for="closed">New Home: </label>  <input type="radio" name="new_home" value="radiobutton" id="new_home" />
    	  <label for="closed">Old Home: </label>  <input type="radio" name="old_home" value="radiobutton" id="old_home" />
    	</p>
        <p>
         <label for="closed">Price Asc: </label>  <input type="radio" name="price_asc" value="radiobutton" id="price_asc" />
    	 <label for="closed">Price Dec: </label>  <input type="radio" name="price_dsc" value="radiobutton" id="price_dsc" />
        </p>
      </fieldset> 
     <p></p>
        <fieldset>
      <legend>Looking for...</legend> 
        <p>
    	  <label for="sales">Sales: </label>  <input type="radio" name="sales" value="radiobutton" id="sales" />
    	  <label for="lettings">Lettings: </label> <input type="radio" name="lettings" value="radiobutton" id="lettings" />
    	</p>
      </fieldset> 
    </form>
    </body>
    </html>

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the inputs too can be float:left.
    And with a "p{clear:left}".
    Happy ADD/ADHD with Asperger's

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll take a look at this when I get home in about an hour (trying to dodge an incoming major snowstorm).


Bookmarks

Posting Permissions

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