SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with input form field layout

    Hi

    Can someone please have a look at this page and see how I can line up the input field of the form I have lined up the labels but the input fields all seem to be in different lines due to each label being a different size.

    Also the radio buttons are the same.

    http://www.istl.com/css/contactus.html


    Thanks

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a down and dirty solution I came up with. Hope this helps.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    HTML Code:
    <html>
    <head>
    <title>Untitled</title>
    <style>
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	body {
    		font: 11px verdana, sans-serif;
    	}
    	input {
    		margin: 0;
    		padding: 0;
    		font: 11px verdana, sans-serif;
    	}
    	label {
    	width: 100px;
    	}
    </style>
    </head>
    <body>
    <div id="enquiry"><h2>Enquiry</h2>
         Please fill in the fields on the form below and click the 'submit'
         button to contact IST Media. One of our members of staff will
         respond to your enquiry as soon as possible. <br /><br />
    			<form id="contact-form" method="post" action="">
    			<label  for="firstname">First Name</label><input type="text" name="textfield" /><br />
    		 <label for="company">Company</label><input type="text" name="textfield" /><br />
    		 <label for="email">Email</label><input type="text" name="textfield" /><br />
    		 <label for="telephone">Telephone</label><input type="text" name="textfield" /><br />
    		 <label for="comments">Comments</label><textarea name="textarea"></textarea><br /><br />
    			<p>Recieve Latest News Via Email:</p><br />
    		 <input name="Yes" type="radio" value="" /><label for="yes">Yes</label>
    			<input name="No" type="radio" value="" /><label for="no">No</label><br /><br />
         <input type="submit" name="Submit" value="Submit" />
         </form>
      </div>
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may want to fiddle with the size specified for label. You may not need that much space.

    Also, I don't know if you necessarily need a label for "yes" and "no". If so then I would make it a bit smaller than the other label sizes. Create another class to handle those specific labels.


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
  •