Solved

Centered Login Box

Posted on 2008-06-25
7
1,108 Views
Last Modified: 2013-11-19
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
Comment
Question by:bevhost
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
7 Comments
 
LVL 11

Accepted Solution

by:
asafadis earned 300 total points
ID: 21864526
0
 
LVL 19

Author Comment

by:bevhost
ID: 21864885
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
 
LVL 19

Author Comment

by:bevhost
ID: 21865058
see attached screenshots
sampleLogin.jpg
sampleLoginBigger.jpg
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 42

Assisted Solution

by:David S.
David S. earned 200 total points
ID: 21871485
> 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
 
LVL 19

Author Comment

by:bevhost
ID: 21872205
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
 
LVL 19

Author Comment

by:bevhost
ID: 21872315
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
 
LVL 19

Author Closing Comment

by:bevhost
ID: 31470494
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS overflow problem 21 42
problems with widget background image 9 35
ASP.NET, Globalization, language indexes, translation, conversion. 2 69
center text in div with CSS3 2 30
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question