Simple question about positioning

ByNary010101 · Jan 6, 2005

No this isn't a homework question, I am trying to make the conversion from desktop development to web development and I'm having a fun time. So anyway, I'm trying to get the layout of my application based mostly on CSS and not tables. A simple scenario would be a login page, I want the UserName and Password fields to be, i don't know, 200 pixels down the page and centered, I tried to use:

Code:

<style type="text/css">
  #login {position:absolute;top:200px}
  #login th {text-align:right}
  #login td {padding:0.125em}
  input {border:1px solid black}
</style>
</head>

<body>
<div id="login" align="center">
  <table>
    <tr>
      <th>Username:</th>
      <td>
	<input type="text" name="UserName" id="UserName" maxlength="10" />
      </td>
    </tr>
    <tr>
      <th>Password:</th>
      <td>
        <input type="password" name="Password" id="Password" maxlength="10" />
      </td>
    </tr>
  </table>
</div>

</body>

but it doesn't work in either IE6 or Firefox...any suggestions? Another question would be how I might be able to do this without the use of the table. Thanks for your help and sorry if this has been covered before

taylorantone · Jan 6, 2005

I guess this would be one way to do it, albeit a somewhat lame way I guess.

Code:

<html>
<head>
 <style type="text/css">
  body {text-align: center; margin-top: 200px;}
  #login {margin: 0 auto; text-align: left; position: relative; width: 250px;}
  .name {position: absolute; right: 155px;}
  input {border:1px solid black; position: relative; left: 100px; margin-bottom: 5px;}
 </style>
</head>
<body>

<div id="login">
<span class="name">Username:</span>
<input type="text" name="UserName" id="UserName" maxlength="10" />
<br />
<span class="name">Password:</span>
<input type="password" name="Password" id="Password" maxlength="10" />
</div>

</body>
</html>

taylorantone · Jan 6, 2005

Actually, change the #login width to 225px and the input left position to 75px. Makes it just big enough to hol the content, thus more accurately centered.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Simple question about positioning

ByNary010101

Programmer

taylorantone

MIS

taylorantone

MIS

Similar threads

Part and Inventory Search

Sponsor