please look at this link
http://www.sudhakargolakaram.co.in/files/zindex.html

the design for this page is http://www.sudhakargolakaram.co.in/files/zindex.jpg

below the top menu i have a jquery slideshow and i want the blue background image with the heading and the sample text to sit on top of the slideshow

the code for the slide show is
<div id="slideshowouter" style=" z-index: -10;">
<img src="img/image1.png" alt="" />
<img src="img/222.png" alt="" />
</div>

initially i tried adding content inside this <div id="slideshowouter"></div>
but this content was also being treated as a third image as part of the 2 images as a slideshow so i have written the content below <div id="slideshowouter"></div>

<div class="slideshow_content">
<h2>Heading</h2>
<p>sample text</p>
</div>

and to this <div class="slideshow_content"> i have given a negative top value which i do not prefer

i would like this <div class="slideshow_content"> to be inside
<div id="slideshowouter"></div> i have tried different z-index values but the heading and sample text is not sitting on top of the slideshow


also as <div class="slideshow_content"> has a blue background image as i have set a width and height the left and right column are being pushed further down



also for the footer links initially i had <div id="footer"></div> and i have set
#footer{float: left; width: 885px; text-align: center;} now when i have normal text it appears in the center, however when i added footer links as ul li these list items are by default starting from the left side so i have used only anchor tags and centered them

using ul li to a div which has text-align: center; how can i make the list items appear in the center rather than starting from the divs left edge


please advice how i can fix this

thanks

Add margin:0 auto; to the style rules for the UL and z-index only applies to positioned elements.

my question is as per the image that i mentioned which is the design for the page the content which is on the left and right side with heading and sample text are being pushed downward which is not in the design

this content is moving downward because i gave a width and height for the blue background image which sits on top of the slideshow

how do i remove this unwanted vertical gap

also i have tried ul{margin: o auto;} for the footer div which has
#footer {text-align: center;} even then when i use ul li for footer these list items start from the left edge of the footer div

please advice