PDA

Click to See Complete Forum and Search --> : newbee: input login password not lining up

gohan
10-05-2007, 04:42 PM
I want the input username, password, remember me to be in one line, lined up in to right hand corner. That's not what I am getting. All the input forms are one line at the top left hand corner. Here is my html and css code.

div#login-form {position:relative; top: 25px; right: 10px; width: 600px; height: 30px; margin: 0; }
div#login {position:relative; }
div#password {position:relative; }
div#username {position:relative; }
div#remember {position:relative; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" href="main_temp.css" type="text/css" />
</head>
<body>
<div id="login-form" >
<form action="/login" id="login" method="post">
<label for="username">Username</label>
<input type="text" name="username" id="username"size="15" tabindex="1"/>

<label for="password">Password</label>
<input type="password" name="password" id="password" size="15" tabindex="2" />

<label for="remember">Remember Me</label>
<input type="checkbox" name="remember" id="remember" tabindex="3" checked="checked" />
<input type="submit" value="Go" tabindex="4" />
</form>
</div>
</body>
</html>
coothead
10-06-2007, 05:13 AM
Hi there gohan,

try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="main_temp.css" type="text/css">

<style type="text/css">
#login {
float:right;
margin:25px 10px 0 0;
width:600px;
}
</style>

</head>
<body>

<form id="login" action="/login" method="post">
<div>
<label for="username">Username</label>
<input type="text" name="username" id="username"size="15" tabindex="1"/>
<label for="password">Password</label>
<input type="password" name="password" id="password" size="15" tabindex="2" />
<label for="remember">Remember Me</label>
<input type="checkbox" name="remember" id="remember" tabindex="3" checked="checked" />
<input type="submit" value="Go" tabindex="4" />
</div>
</form>

</body>
</html>
I would also suggest that you do not use the xhtml11.dtd.

As liorean at codingforums.com writes...
You're better off not pretending this is XHTML, really.
If you're serving it as "text/html" then it is, for all practical purposes, HTML, not XHTML.

Not pretending the document is XHTML and instead using HTML4.01 makes the document smaller, with no ill effects at all.

HTML4.01 and XHTML1.0 are practically identical in what elements they allow and what their element
content models are, but they are not compatible in some ways with regards to how empty elements are
handled, with regards to style sheets, with regard to the DOM, and with regards to stuff like CDATA blocks
and with regards to case sensitivity.
coothead