Home/ Questions/Q 693737
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T02:47:04+00:00

I am not an expert web-dev so please bear with me here. I would

  • 0

I am not an expert web-dev so please bear with me here.

I would like to display a banner style header for a page with the top part taken up by an image that is 275×116 and then a horizontal menu bar (styled using ul items) appearing at 70% from the top of the banner.

How would I set this up so that the banner appears underneath my navigation? Currently, a portion of the left side of my menu bar sits underneath the image but I’d like it to be the opposite so the menu bar is above the image, some thing like this:

   ============= <start of header> ===========
   --------
   |  img   |
   |        |
   |      Horizontal menu 
   |        |
   --------
   ============= <end of header> ===========

My css:

#header
{
    background-color: green;        
    border: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;    
    height: 120px;
}

#logo
{
    background: green url(images/logo.png) no-repeat scroll 0 0;
    margin: 0px 0px;
    border: 1px solid white;    
    left: 20px;
    top: 20px;
    width: 275px;
    height: 116px;
    position: absolute; 
    z-index: -1000;
}

.container {
    border:1px solid grey;
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

My Html:

<body>

<div id="header">
   <div id="logo">
   </div>

   <div class="container" id="primaryNavbar">
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Books</a></li>
       <li><a href="#">Shows</a></li>
       <li><a href="#">Movies</a></li>
     </ul>                  

    <div class="clear">&nbsp;</div>                 

    </div> <!-- end of container -->

</div> <!-- end of header -->
</body>

I thought that setting the position to “absolute” for the logo element and adding in a very low z-index would achieve this but that isn’t the case here.

Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Append these items to your existing styles:

    #header
{
    position: relative; //this will keep your absolute items inside of this container
}

#logo
{
    z-index: 1;
}

.container {
    z-index: 2;
    position: absolute;
}

.container ul li {
    float: left;
}
    • 0