cant get form fields to line up

Discussion in 'HTML & Website Design' started by dougvcd, Jun 11, 2007.

  1. #1
    cant get my field in form to line up
    any help please
    css file

    /*
    CSS for caravan exchange site
    */
    
    p {
       font-weight:bold;
       color: blue;
    }
    
    body {
     font-family: Verdana, Helvetica, Arial, sans-serif;
     background-color:#CCCCCC;
     padding: 15px;
     line-height: 125%;
     border: 4px solid navy;
    }
    
    h1 {
        font-family: "Trebuchet MS", Arial, Helvetica, ,sans-serif;
    } 
    
    #mainnavigation {
        background-color:#6699CC;
    	color: navy;
    	font-weight: bold;
    	width: 200px;
    	height: 170px;
    }
    
    form.register fieldset {   
      border: 2px solid navy;   
      padding: 10px; 
    }  
    
    form.register legend {   
      font-weight: bold;   
      font-size: small;   
      color: navy;   
      padding: 5px; 
    }
    
    form.register {   
      padding: 0;   
      margin: 0;   
      margin-top: -15px;
      line-height: 150%;
    }
    
    form.register label {
      font-weight: bold;
      font-size: small;
      color: blue;
    }
    
    form.register label.fixedwidth {   
      display: block;   
      width: 240px;   
      float: left; 
    }
    
    form.register .buttonarea input {   
      background: navy;
      color: white;   
      font-weight: bold;   
      padding: 5px;   
      border: 1px solid white; 
    }
    
    form.register .buttonarea {   
      text-align: center;   
      padding: 4px;   
      background-color: #0066FF; 
    }
    HTML:
    and this is the form

    <!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" xml:lang="en" lang="en">
    <head>
      <title>Caravan Holidy Exchange - The static caravan owners club</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="style1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div id="header">
      <div id="sitebranding">
      <h1>Caravan-Holiday-Exchange.com</h1>
     </div>
      <div id="tagline">
      <p>The static caravan owners club</p>
      </div>
     </div> <!-- end of header div -->
    <h1>Register</h1>
     <div id="mainnavigation">
     <h3>Site Navigation</h3>
       <ul>
           <li><a href="index.html" herf="index.html">Home</a></li>
         <li><a href="about.html" herf="about.html">About Us</a></li>
         <li><a href="contact.html" herf="contact.html">Contact Us</a></li>
         <li><a href="register.html" herf="form2.html">Register</a></li>
       </ul>
       </div> <!-- end of navigation div -->   
        <form enctype="multipart/form-data" action="add.php" method="POST"> 
        <legend>Registration Form</legend>
    Name: <input type="text" name="name" size=40><br>
    Username: <input type="text" name="username" size=34><br>
    Password: <input type="text" name="password" size=35><br> 
    E-mail: <input type="text" name = "email" size=39><br>
    Park Name: <input type="text" name="parkname" size=33><br>
    Park Location: <input type="text" name="parklocation" size=29><br>
    Caravan Details: <input type="text" name="caravandetails" size=26><br>
    Photo: <input type="file" name="photo"><br> 
    <input type="submit" value="Add"> 
    </form>
    
    </html>
    HTML:
    its seems as soon as i add this line every thing goes wrong
    <form enctype="multipart/form-data" action="add.php" method="POST">
    cheers
    Doug
     
    dougvcd, Jun 11, 2007 IP
  2. ziffgone

    ziffgone Peon

    Messages:
    63
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi Doug,

    Try this...

    Add this to your css:
    #info input {
      float:right;
    }
    #info br {
      clear:right;
    }
    HTML:
    And encase your form fields in this div:
    <div id="info" style="width:360px;">
    <input type="text" name="name" size=40>Name: <br>
    <input type="text" name="username" size=34>Username: <br>
    <input type="text" name="password" size=35>Password: <br> 
    <input type="text" name = "email" size=39>E-mail: <br>
    <input type="text" name="parkname" size=33>Park Name: <br>
    <input type="text" name="parklocation" size=29>Park Location: <br>
    <input type="text" name="caravandetails" size=26>Caravan Details: <br>
    <input type="file" name="photo">Photo: <br> 
    <input type="submit" value="Add"> 
    </div>
    HTML:
    Hope that helps. :)

    Regards,
    Perry.
     
    ziffgone, Jun 11, 2007 IP
  3. dougvcd

    dougvcd Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    cheers that worked ok
    can you tell me how to get it center of page too
    thanks
    Doug
     
    dougvcd, Jun 12, 2007 IP