How to add a side menu(nav-menu) over an existing background image

Question

I'm creating a website and so far I've included the header contents and footer. Now i've been asked to add a side menu on top of the existing background image. I tried using

      <%@ include file="sidemenu.jsp"%> 

But it doesn't add over the existing <div> component, rather it pushes the div down so that it goes outside the background image.

Could you please tell me how to achieve this??

Answer 1

Basically if you want to put something on top of another, you can use position relative/absolute like example below:

<div id="bg">
    <div class="sidebar">side menu goes here</div>
</div>

#bg{
    position:relative;
}
.sidebar{
    position:absolute;
    top:0;
    left:0; /* assign the element to the left */
}

Answer 2

Let's see an example: Example

HTML:

<div id="mainDiv">
    <div id="header">This is my header</div>
    <div id="menu">
            <li>My first option</li>
            <li>My second option</li>
    </div>
    <div id="footer">My footer</div>
</div>

CSS:

mainDiv {
    width: 1024px;
    height: auto;
    background: #ccc;
}

#header {
    width: 100%;
    height: 20px;
    background: yellow;
}

#menu {
    width: 200px;
    height: 50px;
    background: red;
}

#footer {
    width: 100%;
    height: 20px;
    background: black;
    color: white;
}

As you can see in that example, I've added a main DIV with a gray background. I understand that in your case that DIV containes an IMAGE instead.

The red square is your menu, you can modify that DIV with your include tag.

In yellow you have the header and in black the footer.

I don't know if this can help you to archieve what you want.