• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1116
  • Last Modified:

Centered Login Box

I want to have a login box appear in the center of the screen.
I have a header fixed to the top of the window and a footer fixed to the bottom.
I want my login to float in the center of the window.
The attached code works, BUT
1. I can only get it working in HTML 3.2 not XHTML with CSS.
2. I don't think I should need to use a table to do layout.

<?xml version="1.0" ?>
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">    
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Login</title>
<style type='text/css'>
label {
        float: left;
        width: 5em;
}
input {
        display: block;
}
fieldset {
        width: 25em;
}
table {
        width: 100%;
        height: 100%;
}
td {
        vertical-align: middle;
}
#header {
        position: absolute;
}
#footer {
        position: absolute;
        bottom: 0px;
}
#content {
        vertical-align: middle;
}
</style>
</head>
<body>
<div id='header'>
<h1>Heading</h1>
</div>
<div id='content'>
<table><tr><td valign='middle' align='center'>
<form id='loginform' action='/login.php'>
<fieldset>
<legend>Please identify yourself</legend>
<label for='user'>Username:</label>
<input type='text' name='user' id='user'/>
<label for='pass'>Password:</label>
<input type='password' name='pass' id='pass'/>
<label for='login'></label>
<input type='submit' name='login' id='login' value='Login' />
</fieldset>
</form>
</td></tr></table>
</div>
<div id='footer'>
<p>Copyright &copy;</p>
</div>
</body>
</html>

Open in new window

0
bevhost
Asked:
bevhost
  • 5
2 Solutions
 
asafadisCommented:
0
 
bevhostAuthor Commented:
That solution works for a know height, but it doesn't work with an unknown height.
Look at these in a web browser and you will see what I mean.
Resize the browser window and watch the effect.
0
 
bevhostAuthor Commented:
see attached screenshots
sampleLogin.jpg
sampleLoginBigger.jpg
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
David S.Commented:
> That solution works for a know height, but it doesn't work with an unknown height.

A known height of which element? I've used that technique several times. That technique is tricky though. I expect you missed a step or put in an extra element that interfered with it. Please show us the code for your try at using it.

By the way, the XML declaration (the line above the doctype) forces IE6 into quirks mode, which is usually a bad thing. (They fixed that bug in IE7.) I suggest you remove it.
0
 
bevhostAuthor Commented:
Kravimir, I was referring to the solution suggested by asafadis
The browser window is an unknown height.  
The elements on the page are also unknown size depending on the zoom and text size.

The solution provided at http://www.jakpsatweb.cz/css/css-vertical-center-solution.html places text in the middle of a table which has a fixed height.  I want to place my login box in the middle of the web browser window, which in my example is in a table set to height=100%.

This works properly when the DOCTYPE is set to HTML 3.2 but I just don't know what the right way to do this is when the DOCTYPE is set to XHTML.
0
 
bevhostAuthor Commented:
I've had a closer look at that solution and it does work for me.
I even understand how it works.  very nice.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Login</title>
<style type='text/css'>
label {
	float: left;
	width: 5em;
}
input {
	display: block;
}
fieldset {
	width: 25em;
	position: relative;
	top: -50px;
	margin-right: auto;
	margin-left: auto;
}
#header {
	position: absolute;
}
#footer {
	position: absolute;
	bottom: 0px;
}
#content {
	position: absolute;
	top: 50%;
	display: table-cell;
	vertical-align: middle;
}
</style>
</head>
<body>
<div id='header'>
<h1>Heading</h1>
</div>
<div id='content'>
<form id='loginform' action='/login.php'>
<fieldset>
<legend>Please identify yourself</legend>
<label for='user'>Username:</label>
<input type='text' name='user' id='user'/>
<label for='pass'>Password:</label>
<input type='password' name='pass' id='pass'/>
<label for='login'></label>
<input type='submit' name='login' id='login' value='Login' />
</fieldset>
</form>
</div>
<div id='footer'>
<p>Copyright &copy;</p>
</div>
</body>
</html>

Open in new window

0
 
bevhostAuthor Commented:
I didn't understand the example properly the first time,  as it was sitting inside a fixed sized container.
But I get it now.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now