title: jQuery slideshow in the background - Wrong CSS maybe?
body: <p>I have this very simple html with a "wrapper" div and other two elements inside it.</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="logo"&gt;
       &lt;img src="images/myLogo.jpg" /&gt;
      &lt;/div&gt;
      &lt;ul id="menu"&gt;
       &lt;li class="class_link1"&gt;&lt;a href="#"&gt;Menu item 1&lt;/a&gt;&lt;/li&gt;
       &lt;li class="class_link2"&gt;&lt;a href="#"&gt;Menu item 2&lt;/a&gt;&lt;/li&gt;
       &lt;li class="class_link3"&gt;&lt;a href="#"&gt;Menu item 3&lt;/a&gt;&lt;/li&gt;
       &lt;li class="class_link4"&gt;&lt;a href="#"&gt;Menu item 4&lt;/a&gt;&lt;/li&gt;
       &lt;li class="class_link5"&gt;&lt;a href="#"&gt;Menu item 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With CSS, I positioned the logo and the menu in a single bar at the bottom of screen.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="photos"&gt;
          &lt;img src="photo1.jpg" alt="desc 1" /&gt;
          &lt;img src="photo2.jpg" alt="desc 2" /&gt;
          ....
      &lt;/div&gt;
      &lt;div id="logo"&gt;
       &lt;img src="images/myLogo.jpg" /&gt;
      &lt;/div&gt;
     &lt;ul id="menu"&gt;
       &lt;li class="class_link1"&gt;&lt;a href="#"&gt;Menu item 1&lt;/a&gt;&lt;/li&gt;
       &lt;li class="class_link2"&gt;&lt;a href="#"&gt;Menu item 2&lt;/a&gt;&lt;/li&gt;
       &lt;li class="class_link3"&gt;&lt;a href="#"&gt;Menu item 3&lt;/a&gt;&lt;/li&gt;
       &lt;li class="class_link4"&gt;&lt;a href="#"&gt;Menu item 4&lt;/a&gt;&lt;/li&gt;
       &lt;li class="class_link5"&gt;&lt;a href="#"&gt;Menu item 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; &lt;!-- wrapper --&gt;
  </code></pre>
  
  <p>and here is the CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>What I need now is to make a slideshow with the div#photos in the <strong>background</strong>. 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.</p>
  
  <p>Thanks in advance,</p>
  
  <p>Helio</p>