Once I set the div.container to position: relative; my footer div moved off screen. I know it is there because a select-all and copy grabs the text. When I remove the positioning the div shows up but the relative positioning is lost.
Thanks in advance for any help.
P.S. All testing is done in the latest Firefox.
CSS code:
body {background-color: #FFFFFF; padding: 0px; margin: 0px;}
div.container
{
width: 800px;
padding: 0px; margin: 0px;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
position: relative;
}
/* Content boxes */
div.header
{
width: 800px; height: 150px;
padding-bottom: 5px; text-align: left; vertical-align: top;
font-size: 12pt; white-space: nowrap; background-color: #FFFFFF;
position: absolute; top: 0px; left: 0px;
z-index: 1;
}
div.menu
{
width: 140px; /* The width is -10px to accomodate padding */
padding: 5px; text-align: center; vertical-align: top;
font-size: 14pt; font-weight: bold; white-space: nowrap; background-color: #FFFFFF;
position: absolute; top: 155px; left: 0px; /* The top is is +5px to accomodate header padding */
z-index: 2;
}
div.content
{
width: 640px; /* The width is -10px to accommodate padding */
padding: 5px; text-align: left; vertical-align: top;
font-size: 12pt; white-space: nowrap; background-color: #FFFFFF;
position: absolute; top: 155px; left: 150px; /* The top is is +5px to accommodate header padding */
z-index: 3;
}
div.footer
{
width: 800px;
padding-top: 5px; text-align: center; vertical-align: bottom;
font-size: 10pt; white-space: nowrap; background-color: #FFFFFF;
position: absolute; bottom: 0px; left: 0px;
z-index: 4;
}
/* Menu Settings */
a.menu,a.menu:link,a.menu:visited
{
color: #000000;
text-decoration: none;
}
a.menu:hover {text-decoration: underline;}
----------------------------------------------------
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Template, Inc: Template</title>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div class="container">
<div class="header"><img src="img/logo-c.jpg"></div>
<div class="menu">
<a class="menu" href="index.html">Home</a><br>
<a class="menu" href="clients/index.html">Login</a><br>
<a class="menu" href="services/index.html">Services</a><br>
<a class="menu" href="products/index.html">Products</a><br>
<a class="menu" href="aboutus/index.html">About Us</a><br>
<a class="menu" href="contacts/index.html">Contact Us</a>
</div>
<div class="content">
Where the content goes.<br><br><br><br><br><br>
</div>
<div class="footer">
© Template, Inc. 2008
</div>
</div>
</body>
</html>
Bookmarks