Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Aligning form fields

    Can anybody share some advice on how I can align my text with my form fields. This is what I have;


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    #midright1 {width:205px; height:130px; margin-bottom:10px; margin-left:10px; padding:5px; font-size:100%; clear:both; }
    .emailtext {margin-top:16px;}
    .firstname {margin-right:6px; float:right; }
    .email {margin-right:6px; float:right; margin-bottom:4px; margin-top:4px;}
    </style>

    </head>

    <body>

    <div id="midright1">
    <span style="font-weight: bold;">Free Report</span><hr />why do my form fields not align?<br /><br />
    <span style="font-weight: bold;">Name </span> <input type="text" name="firstname" class="firstname"/><br/>
    <span style="font-weight: bold" class="emailtext";>Email</span> <input type="text" name="email" class="email" /> <input type="submit" value="submit" /></div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    no css

    Code:
    <div id="midright1">
    <span style="font-weight: bold;">Free Report</span> why do my form fields not align?<br>
    <strong>Name:</strong><input type="text" name="firstname" class="firstname"/><br>
    <strong>Email:</strong><input type="text" name="email" class="email"/> <input type="submit" value="submit" />
    </div>

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Im not really sure what is meant by your answer.
    I need to use CSS to posistion the field boxes to where I want them.

    Now my task is to alight the text so that they are level with the boxes.

  • #4
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    Looks like .firstname needs float:left instead of float:right, clear:both removed from #midright1 and used instead in a div between table rows, .emailtext needs float:left, and both type="text" input fields float:right. That is, if I understand what you are trying to accomplish.

    Something like this might work.

    Code:
    <!-- inline CSS can be transferred to style sheet -->
    <div style="width:205px;">
    <div style="float:left; padding-top:3px;">Name:</div>
    <div style="float:right;"><input type="text" style="width:150px;"></div>
    <div style="clear:both; height:4px;"></div>
    <div style="float:left; padding-top:3px;">Email:</div>
    <div style="float:right;"><input type="text" style="width:150px;"></div>
    <div style="clear:both;"></div>
    <input type="submit" style="margin-top:4px;">
    </div>

    Will
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a look at http://www.alistapart.com/articles/p...ccessibleforms

    That will help you to setup an accessible form too.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •