how to align to text input type using css

deepbluegene · #1 (**permalink**) 04-13-09, 12:37 AM

Hi
i am using a form in my page's right sidebar where user has to enter username and password. how i can align them using css. i have done that before but have forgot how i did that time. very stupid of me .

please help

RichyRich38 · #2 (**permalink**) 04-13-09, 05:19 AM

Hi do you have some code we can see???

dgreenhouse · #3 (**permalink**) 04-14-09, 06:18 PM

Hate to tell you, but tables are back in... :-)

Probably float a div with a 2 column by 3 row table inside of it.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title> Float a div right </title>
    <style>
      #authenticate {
        float: right;
      }
    </style>
  </head>
  <body>
    <div id="authenticate">
      <form method="post" action="login.php" >
        <table border="0">
          <tr><td>User Name</td><td><input type="text" name="user"></td></tr>
          <tr><td>Password</td><td><input type="password" name="password"</td></tr>
          <tr><td>&nbsp;</td><td><input type="submit" value="Login"></td></tr>
        </table>
      </form>
    </div>
  </body>
</html>

deepbluegene · #4 (**permalink**) 04-16-09, 11:57 PM

Sorry folks. i dropped the idea of aligning for the moment.but thanks for your help.sorry for late reply.
thanks

fleep · #5 (**permalink**) 04-18-09, 12:19 PM

Quote:

Originally Posted by dgreenhouse

Hate to tell you, but tables are back in... :-)

Really? What for?

dgreenhouse · #6 (**permalink**) 04-20-09, 07:39 AM

It was kind of a joke... But not totally...

... People pulling their hair out and spending oodles of hours trying to get CSS to
line up cross browser. I've met a lot of designers who've given up and gone
back to tables in a number of cases. Can't blame them...

Quote:

Originally Posted by fleep

Really? What for?

harish · #7 (**permalink**) 04-27-09, 12:31 AM

Hope this code will help you...

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Design 4</title>
</head>
<style>
.note{
    font-family:tahoma;
    font-size:10px;
    color:#333333;
}
.input{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:12px;
    border:1px #6a6a6a solid;
}
.text{
    font-family:tahoma;
    font-size:11px;
    font-weight:bold;
    color:#6a6a6a;
    background-color:#EAEAEA;
}
.btn{
    font-weight:bold;
}

</style>
<body>
<table width="550px">
    <tr>
        <td>
<table border="0" cellpadding="2" width="100%" cellspacing="0">
                <tr>
                    <td colspan="3" style="border-bottom:1px #666666 solid; font-family:tahoma; font-weight:bold; color:#666666; font-size:14px">
                        Already registered? Login Here                  </td>
                </tr>
                <tr height="10px">
<td class="text">&nbsp;</td>               
                    <td style="border-left:1px #666666 solid; font-size:1px" rowspan="6">&nbsp;</td>
                    <td style="font-size:1px;">&nbsp;</td>
                </tr>
                <tr>
                    <td class="text" align="right"><span style="color:#FF0000">*</span> Email</td>             
                    <td><input size="35" maxlength="50" class="input" type="text"></td>
                </tr>
                <tr>
                    <td align="right" width="32%" class="text"><span style="color:#FF0000">*</span>Password</td>
                    <td width="68%"><input size="35" maxlength="50" class="input" type="text"></td>
                </tr>
                <tr>
                   <td align="right" class="text">&nbsp;</td>
                   <td style="font-size:14px"><input type="checkbox" /> Save my email and password</td>
                </tr>        
                <tr>
                    <td class="text">&nbsp;</td>
                    <td>
                        <input value="Continue &gt;&gt;" class="btn" type="submit">&nbsp;&nbsp;
                        <input value="Reset" class="btn" type="reset">&nbsp;&nbsp;&nbsp;                   </td>
                </tr>
                <tr>
                    <td class="text">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="3" style="border-top:1px #666666 solid;font-size:1px;">&nbsp;</td>
                </tr>
            </table>
            <br />
            <table border="0" cellpadding="2" width="100%" cellspacing="0">
                <tr>
                    <td colspan="3" style="border-bottom:1px #666666 solid; font-family:tahoma; font-weight:bold; color:#666666; font-size:14px">
                        Create Account - Register
                    </td>
                </tr>
                <tr height="10px">
                    <td class="text">&nbsp;</td>               
                    <td style="border-left:1px #666666 solid; font-size:1px" rowspan="13">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td align="right" width="32%" class="text"><span style="color:#FF0000">*</span>Your Name</td>
                    <td width="68%"><input size="35" maxlength="50" class="input" type="text"></td>
                </tr>
                <tr>
                   <td align="right" class="text"><span style="color:#FF0000">*</span>E-Mail ID</td>
                   <td><input size="50" maxlength="50" class="input" type="text"></td>
                </tr>
                <tr>
                   <td align="right" class="text">Alternate E-Mail ID</td>
                   <td><input size="50" maxlength="50" class="input" type="text"></td>
                </tr>        
                <tr>
                   <td align="right" class="text" valign="bottom">Your Phone</td>
                   <td>
                        <span>
                            <small class="note">Country Code&nbsp;-&nbsp;City Code&nbsp;&nbsp;-&nbsp;&nbsp;Phone Number</small>
                        </span><br>
                            <input size="6" class="input" type="text">&nbsp;-&nbsp;
                            <input size="4" class="input" type="text">&nbsp;-&nbsp;
                            <input size="23" class="input" type="text">
                  </td>
                </tr>
                <tr>
                    <td align="right" class="text">Mobile Phone </td>
                    <td><input size="35" class="input" type="text"></td>
                </tr>
               
                <tr>
                    <td align="right" class="text"><span style="color:#FF0000">*</span>Your Postal Address</td>
                    <td><textarea cols="37" rows="3" class="input"></textarea></td>
                </tr>
                <tr>
                    <td align="right" class="text"><span style="color:#FF0000">*</span>Country </td>
                   
                    <td>
                    <select class="input">
                     <option value="x" selected="selected">--------------- Select One --------------</option>
                    </select>
                  </td>
                </tr>
               
                <tr>
                    <td align="right" class="text"><span style="color:#FF0000">*</span>Password</td>
                    <td><input size="25" class="input" type="password"></td>
                </tr>

                <tr>
                    <td align="right" class="text"><span style="color:#FF0000">*</span>Re - Enter Password</td>
                    <td><input size="25" class="input" type="password"></td>
                </tr>

                <tr>
                    <td class="text"></td>
                    <td><input value="1" type="checkbox">&nbsp;&nbsp;<b>I accept the <a href="#">Terms of Use</a></b></td>
                </tr>
                <tr>
                    <td class="text"></td>
                    <td height="30">
                        <input value="Continue &gt;&gt;" class="btn" type="submit">&nbsp;&nbsp;
                        <input value="Reset" class="btn" type="reset">&nbsp;&nbsp;&nbsp;
                   </td>
                </tr>
                <tr>
                    <td class="text">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="3" style="border-top:1px #666666 solid;font-size:1px;">&nbsp;</td>
                </tr>
               
            </table>
        </td>
    </tr>
</table>
</body>
</html>