jQuery slideshow in the background - Wrong CSS maybe?

Question

Hello.

I have this very simple html with a "wrapper" div and other two elements inside it.

<div id="wrapper">
    <div id="logo">
     <img src="images/myLogo.jpg" />
    </div>
    <ul id="menu">
     <li class="class_link1"><a href="#">Menu item 1</a></li>
     <li class="class_link2"><a href="#">Menu item 2</a></li>
     <li class="class_link3"><a href="#">Menu item 3</a></li>
     <li class="class_link4"><a href="#">Menu item 4</a></li>
     <li class="class_link5"><a href="#">Menu item 5</a></li>
    </ul>
</div>

With CSS, I positioned the logo and the menu in a single bar at the bottom of screen.

In my jQuery code, I insert another div (#photos) dynamically with XML right after the div#wrapper. So, my final html ends up like this:

<div id="wrapper">
    <div id="photos">
        <img src="photo1.jpg" alt="desc 1" />
        <img src="photo2.jpg" alt="desc 2" />
        ....
    </div>
    <div id="logo">
     <img src="images/myLogo.jpg" />
    </div>
   <ul id="menu">
     <li class="class_link1"><a href="#">Menu item 1</a></li>
     <li class="class_link2"><a href="#">Menu item 2</a></li>
     <li class="class_link3"><a href="#">Menu item 3</a></li>
     <li class="class_link4"><a href="#">Menu item 4</a></li>
     <li class="class_link5"><a href="#">Menu item 5</a></li>
    </ul>
</div> <!-- wrapper -->

and here is the CSS:

#wrapper{
 position: relative;
 margin: 0px auto;
 padding: 0px;
 height: 685px;
 width: 1019px;
 z-index: 0;
}

#wrapper ul#menu {
 position: absolute;
 margin: 0px;
 padding: 0px;
 list-style: none;
 clear: both;
 left: 510px;
 top: 525px;
 z-index: 1;
}

#wrapper #logo {
 position: absolute;
 height: 72px;
 width: 510px;
 left: 0px;
 top: 525px;
 z-index: 1;
}

What I need now is to make a slideshow with the div#photos in the background. The menu bar and logo must stay on top. I am using the Cycle plugin but no success so far. Any help would be really appreciated.

Thanks in advance,

Helio

Answer 1

Try giving logo a z-index of -1, that should do it.

Answer 2

#photos { z-index: 1; }
#logo { z-index: 2; }

Also, no need to be as specific as #wrapper #logo — you can have just one id per page, so #logo should be sufficient.