SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help to align login form....

    I need help for a design please...

    My source:
    HTML Code:
    <!DOCTYPE html>
    <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <link rel="stylesheet" href="stylesheet.css" type="text/css">
     <title>..... removed per OP request .....</title>
     </head>
     <body>
      <div id="loginform">
       <form action="login.php" method="post" name="login">
        <table width="30%">
         <tr>
          <td><center><label for="Username">Username:</label></center></td>
          <td><center><input name="Username" class="inputbox" alt="Username" type="text" value="Username" onclick='value=""'></center></td>
         </tr>
         <tr>
          <td><center><label for="Password">Password:</label></center></td>
          <td><center><input name="Password" class="inputbox" alt="Password" type="password" value="Password" onclick='value=""'></center></td>
         </tr>
         <tr>
          <td><center><p><a href="forgot.php">Forgot your password?</a></p></center></td>
          <td><center><input name="Submit" class="button" value="Login" type="submit"></center></td>
         </tr>
        </table>
       </form>
      </div>
     </body>
    </html>
    The result is....(capture.png) Attachment 59552

    I want...(capture-1.png) Capture-1.png

    Thanks!!
    Attached Images Attached Images
    Last edited by Mittineague; Jul 7, 2012 at 09:17. Reason: per OP request

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    It'd probably be good to see the CSS that you're using.

    From what I can see, the problem isn't in CSS, just in the table. If you (although using a table to change the way that your site is aesthetically displayed is a bad idea) just put the submit button in the first <TR>, and the "Forgot your password?" text in the second <TR>, you'll be fine (with the corresponding <TD> tags, etc.). But again, don't use tables to display stuff - if you show us your CSS, then we can help you fix it.

    ~TehYoyo

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Both images are the same, but I assume you just want the buttons aligned side-by-side .

    To do this you'll just need to alter your HTML . THis is untested but it should work.

    Code:
    <!DOCTYPE html>
    <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <link rel="stylesheet" href="stylesheet.css" type="text/css">
     <title>AleaPay - The Aleatory Pay - The Easiest Way To Make Money!</title>
     </head>
     <body>
      <div id="loginform">
       <form action="login.php" method="post" name="login">
        <table width="30%">
         <tr>
          <td><center><label for="Username">Username:</label></center></td>
          <td><center><input name="Username" class="inputbox" alt="Username" type="text" value="Username" onclick='value=""'></center></td>
          <td><center><p><a href="forgot.php">Forgot your password?</a></p></center></td>
         </tr>
         <tr>
          <td><center><label for="Password">Password:</label></center></td>
          <td><center><input name="Password" class="inputbox" alt="Password" type="password" value="Password" onclick='value=""'></center></td>
          <td><center><input name="Submit" class="button" value="Login" type="submit"></center></td>
         </tr>
        </table>
       </form>
      </div>
     </body>
    </html>
    You should note that <center> is deprecated, though that's a separate thing . You shouldn't also be using tables to lay this out, but again...here is just the code to make it work like you want .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •