1 reply [Last post]
magicman
magicman's picture
Offline
newbie
Last seen: 8 years 19 weeks ago
Timezone: GMT-7
Joined: 2012-06-27
Posts: 7
Points: 12

Cannot get the ext to ride on same line as phone number. also, the submit button is to the far left. How to center it under the form or to the left edge of the forms?
http://jsfiddle.net/gS2N7/

<div id="content"> 
 
<div class="pblue">Please fill out this form on questions regarding our products and services</div>
 
<form name="contactform" method="post" action="send_form_email.php">
  <div class="block">
     <label>First and Last Name:</label>
     <input type="text" name="first_last" />
  </div>
  <div class="block">
     <label>Office Phone number:</label>
     <input type="text" name="office_phone" size="10"/>
  </div>
  <div class="block">
     <label>Ext:</label>
     <input type="text" name="extension" size="3"/>	
  </div>
  <div class="block">
     <label>Cell:</label>
     <input type="text" name="cell" size="10"/>
  </div>
  <div class="block">
     <label>Email Address:</label>
     <input type="text" name="email"/>
  </div>
  <div class="block">
     <label>Company name:</label>
     <input type="text" name="company" />
  </div>
  <div class="block">
     <label>Comments:</label>
     <textarea rows="4" cols="25" name="comments" form="usrform">
     </textarea>
   </div>
   <div class="block">
     <input type="button" class="button" value="Submit Form" />
   </div>
</form>
</div>

#content {
      background-color: #FFFFFF;
      float: none;
      height: auto;
      margin-top: 50px;
      padding: 10px 20px 20px;
      position: relative;
      width: 860px;
      margin: 0 auto;
      overflow:hidden;   
   }
 
.pblue {
      color:blue;
      font-size:150%;
      line-height:2px;
      margin-top:20px;
      margin-bottom:2px;
      padding:10px;
}
 
.block label {
      display:inline-block;
      width:400px;
      text-align:right;
  }
 
label {
      margin-bottom: 5px;
    } 

//mod edit: Use the code tags, [code] and [/code] or the "code" button to delimit source code. Fixed. ~gt

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 1 week ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well until so far I have

Well until so far I have changed the CSS code to something like this:

#content {
      background-color: #FFFFFF;
      float: none;
      height: auto;
      margin-top: 50px;
      padding: 10px 20px 20px;
      position: relative;
      width: 860px;
      margin: 0 auto;
      overflow:hidden;   
   }
 
.pblue {
      color:blue;
      font-size:150%;
      line-height:2px;
      margin-top:20px;
      margin-bottom:10px;
      padding:10px;
}
 
 
 
.block label {
      display:inline-block;
      width:400px;
  }
 
.block input {
    float: left;
}
 
.block textarea {
    float: left;
}
 
.button {
 margin-top: 75px;
}
 
label {
    margin-bottom: 5px;
    } 

As you can see I creatd some more commands to float the input and textarea to the left, this will automatically align the labels to the right from the input and the textarea.

Also created a command for your button, to get it as much as possible to the center below the textarea.
If you want to add some more commands you can take the vertical-align: center; command or use maring-left: ...px; command to align it even better.

Also if you are not happy with your text alignment you can also play around with text alignment in your css under label or .block label.

Hope this helped you.

Check Maximum Webdesign for your online solutions