CSS Forum

**raptrex** · 06-25-2006, 12:10 PM

ok my links show up at the bottom of the screen
when its suppose to be in the div header

Code:

<head> <style>
body {
  background: #000;
}

#header {
  background: #8B2500;
  height: 120px;
}

/*- Main Menu in Header */

ul.menu {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 90%;
    }

ul.menu li {
    display: inline;
    margin: 0;
    }

ul.menu,
ul.menu li a {
    padding: 100px 15px 6px;
    }

ul.menu li a {
    font: 1em Verdana, Helvetica, Arial, Sans-Serif;
    color: #EAEAEA;
    margin: 0;
    }

ul.menu li a:hover {
    background: #333;
    color: #eee !important;
    text-decoration: none;
    }

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
    color: #333 !important;
    background: #EAEAEA;
    text-decoration: none;
    }
    
    
</style>

   </head>

   <body>

<div id="header">
<ul class="menu">
<li class="current_page_item"><a href="#">Home</a></li>
<li class="page_item"><a href="#">Downloads</a></li>
<li class="page_item"><a href="#">Staff</a></li>
<li class="page_item"><a href="#">About</a></li>
</ul>
</div>

   </body>
</html>

**vangogh** · 02:05 PM

I think it's because of the absolute positioning of the menu at bottom:0. That should mean it will sit at the bottom of the nearest containing element that is also postioned or failing to find another positioned containing element at the bottom of the body. Since no containing element (in this case the header) has been positioned the positioning of the menu is in relation to the body of the document.

I think if you add position:relative to #header the links will show where you intended.

**raptrex** · 06-25-2006, 04:14 PM

thank you very much it works

**vangogh** · 06-25-2006, 11:54 PM

Glad to help.