positioning: div box moves off screen [Archive]

k_rizza

11-05-2008, 10:21 AM

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>

pankaj.ghadge

11-05-2008, 12:14 PM

Where is u r footer class .............................................

k_rizza

11-05-2008, 06:29 PM

I mislabeled the class when I was copying things over for posting. Good catch and thanks for letting me know.

I edited the original post.

olveyphotodesign

11-05-2008, 07:22 PM

Change your div's from classes to ids. I believe the z-index attribute is designed for ids and not classes. Also remember that ids should only be used once on each page. Looking at your code I think that's not an issue.

k_rizza

11-05-2008, 08:01 PM

I switched the appropriate 'class' to 'id' and I lost my formatting settings. I know I could use 'id' and create 'p' settings for the formatting, but given my situation I will not actually be making functional use of the 'z-index'

Snookerman

11-05-2008, 08:41 PM

If you change from class to id, you must change the css from .name to #name