SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict sorin21us's Avatar
    Join Date
    Mar 2009
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS for Form fields

    I have this form http://www.asigurare-rca-online.ro/servicii/casco and I want to arrange the input text to look like this form http://avantajrca.ro/asigurari_casco.php.

    I tried many times to modify it, but, because I'm not very good with CSS please someone help me to understand what I have to modify.

    Thank you in advance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You won't be able to easily modify your example because you have put it in a table in individual rows.

    Here's a simple example in CSS that you should be able to follow:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .formtest { margin:0; }
    .formtest label {
    	display:inline-block;
    	vertical-align:middle;
    	width:90px;
    	text-align:right;
    	margin:10px 0;
    }
    .formtest input {
    	width:100px;
    	margin:10px 0;
    	vertical-align:middle;
    }
    </style>
    </head>
    <body>
    <form  class="formtest" id="form1" method="post" action="">
    		<fieldset>
    				<legend>Address Details</legend>
    				<label for="firstname">First Name:</label>
    				<input type="text" name="firstname" id="firstname" />
    				<label for="lastname">Last Name:</label>
    				<input type="text" name="lastname" id="lastname" />
    				<br />
    				<label for="address1">Address 1:</label>
    				<input type="text" name="address1" id="address1" />
    				<label for="address2">Address 2:</label>
    				<input type="text" name="address2" id="address2" />
    				<br />
    				<label for="address3">Address  3:</label>
    				<input type="text" name="address3" id="address3" />
    				<label for="address4">Address 4:</label>
    				<input type="text" name="address4" id="address4" />
    				<br />
    				<label for="city">City:</label>
    				<input type="text" name="City" id="city" />
    				<label for="state">State:</label>
    				<input type="text" name="state" id="state" />
    				<br />
    				<label class="zip" for="zip">Zip:</label>
    				<input type="text" name="zip" id="zip" />
    				<label for="tel">Telephone:</label>
    				<input type="text" name="tel" id="tel" />
    				<br />
    		</fieldset>
    </form>
    </body>
    </html>

  3. #3
    SitePoint Addict sorin21us's Avatar
    Join Date
    Mar 2009
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul. It's a module that I took from internet and came with that structure. I will try to modify it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Give it a try and if you get stuck then we'll be able to more specific help with what you have done so far


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
  •