A Truly Centered Stylesheet?
Could it really be? It appears so. It took me some time to get it horizontally centered, but it looks good in both IE6 and Firefox1.
The code:
Sources:
Yuhu's Definitive Solution with Unknown Height
W3C Centering Things
The code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Vertically and Horizontally Centered CSS Page</title>
<style type="text/css">
/* test styling */
div#content {border: 1px solid black;} /* just borders to see it */
#body { background:#333; }
#outer { background:#666; }
#middle { background:#999; }
#inner { background:#ccc; }
/* css vertical centering:
source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
body, html {height: 100%; margin:0; padding:0;}
#outer {height: 400px; overflow: hidden; position: relative;}
#outer {height: 100%; width:100%; overflow: visible;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
#content {
margin-left: auto; margin-right: auto;
background:ivory;
width:750px;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<div id="content">
References:<br />
<a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">
Yuhu's Definitive Solution with Unknown Height
</a><br />
<a href="http://www.w3.org/Style/Examples/007/center.html">
W3C Centering Things
</a><br />
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Vertically and Horizontally Centered CSS Page</title>
<style type="text/css">
/* test styling */
div#content {border: 1px solid black;} /* just borders to see it */
#body { background:#333; }
#outer { background:#666; }
#middle { background:#999; }
#inner { background:#ccc; }
/* css vertical centering:
source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
body, html {height: 100%; margin:0; padding:0;}
#outer {height: 400px; overflow: hidden; position: relative;}
#outer {height: 100%; width:100%; overflow: visible;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
#content {
margin-left: auto; margin-right: auto;
background:ivory;
width:750px;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<div id="content">
References:<br />
<a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">
Yuhu's Definitive Solution with Unknown Height
</a><br />
<a href="http://www.w3.org/Style/Examples/007/center.html">
W3C Centering Things
</a><br />
</div>
</div>
</div>
</div>
</body>
</html>
Sources:
Yuhu's Definitive Solution with Unknown Height
W3C Centering Things
posted by Tom at
7:32 AM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home