Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hey. I am trying to layout a form, but I am getting jagged edges.

    Lets say I need someone's name, username, email address and password.

    I have the text on the same line as the form element, such as
    Code:
    Name: <input type="text" size="20" name="your_name" id="your_name" />
    And so on, but then, because Name: is only 5 characters, and say Password: is 9, it all becomes jaggy.

    Using tables (2 td's) would solve this but I prefer CSS, besides the form is very small (data required wise) so I do not want loads of excess code if this could be done without it.

    So, is there a way to line all the form elements up?

    I thought of just putting a <br /> after the form elements identifier text, but I am not keen on that way.

    Also, cross-browser?

    Thanks in advamce.

  2.  

  3. #2
    Senior Member
    Join Date
    Jul 2005
    Location
    S.Wales, UK
    Posts
    250
    Member #
    10742
    Create a style with a fixed width, let's say 100 pixels for example and a float left.

    Then wrap the name is a span and apply the class to it

    eg:
    <div style="width:100px;float:left">
    <label for="clientname" >Your name</label>
    </div>
    <input name="clientname" type="text" id="clientname" size="25" />
    <br/>

    See here for an example:
    http://www.complete-sports.com/contact.asp
    Paul Creedy
    Visit my community site at: www.rhonddacynontaff.com
    My hosting: www.rcthosting.com
    My Content Management product: www.dynamiccontenteditor.com

  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Thanks a lor Mr C. The only problem with that was, form element went onto next line.

    No biggy though, I just display: inline'd it

    Cheers

  5. #4
    Senior Member
    Join Date
    Jul 2005
    Location
    S.Wales, UK
    Posts
    250
    Member #
    10742
    Glad to be of help.
    Paul Creedy
    Visit my community site at: www.rhonddacynontaff.com
    My hosting: www.rcthosting.com
    My Content Management product: www.dynamiccontenteditor.com


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com