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

Thread: Form Layout

  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Layout

    I'm trying a CSS based form layout. Trouble is i'm having difficulty getting the fields the right length. For some reason the text field and textarea are wider than the buttons and the select field. I'm assuming its something simple like padding but I cant figure out where the problem is.

    CSS - The borders are just for testing purposes
    Code:
    .form1{
     
      border:2px dashed gray;
      padding:5px;
      background-color:#efefef
    }
    .form1 .row{
    	  
    }
    .form1 .label{
      width:15%;
      border:0px solid gray;
    	padding:2px;
    	float:left; 
    	text-align:right; 
    }
    .form1 .field{
    	 
     width:80%;
      border:0px solid gray;
      float:right;
    }
    .form1 .row{
      border:1px dashed gray;
      padding:5px;
    }
    
    /* Hides from IE5-mac \*/
    * html .form1 .row {height: 1%;}
    /* End hide from IE5-mac */
    
    .form1 input, textarea, select{
      border:1px solid gray;
      background-color:#E6F4FF;
      font-family:verdana, arial, sans-serif;
      font-size:100%;
      padding:3px;
      width:90%;
      
      
    }
    
    .form1 input:hover, textarea:hover, select:hover{
      border:1px solid black;
      background-color:#ffffdd;
    }
    HTML
    Code:
    <div class="form1">
    <form  method="post" action="index.php?page=process">
    	<div class="row">
    		<div class="label">
    			<label for="project_title">	Project Title
    		</label>
    		</div>
    		<div class="field" >
    			<input id="project_title" name="project_title" type="text" value="enter text here" style="padding:0px;"/> ?
    		</div>
    		<div class="spacer">
    		</div>
    	</div>
    		<div class="row">
    		<div class="label">
    			<label for="project_type">Project Type
    		</label>
    		</div>
    		<div class="field">	
    			<select id="project_type" name="project_type" >
    				<option value="program">Program</option>
    				<option value="website">Website</option>
    				<option value="other">Other</option>
    			</select> ?
    		</div>
    		<div class="spacer">
    		</div>
    	</div>
    	<div class="row">
    		<div class="label">
    			<label for="project_description">	Description
    		</label>
    		</div>
    		<div class="field">
    			<textarea id="project_description" name="project_description" rows="5" cols="30"></textarea> ?	
    	</div>
    		<div class="spacer">
    		</div>
    	</div>
    	<div class="row">
    		<div class="field">
    			<input type="reset" name="clear" id="clear" value="Clear" />
    			<input type="submit" name="submit" id="submit" value="Submit" style="margin-top:2px;"/>
    		</div>
    		<div class="spacer">
    		</div>
    	</div>
    
    </form>
    </div>
    Cheers.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually the code seems work fine in isolation, its only when its part of the rest of the page that it buggers up. Here's the whole thing:

    http://khendar.awardspace.com/sit/in...ge=submit_idea


  •  

    Posting Permissions

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