Fadeslideshow - overlay?

Hi, I was wondering if someone could help me out with the awesome fadeslideshow script? I'm basically looking to have some text in a div tag overlap the slideshow slightly so that the text (and the border around it) are on top of the slideshow images.

I works fine when it's a static image via HTML, but as soon as I drop the fadeslideshow then it gets bumped behind instead. I've tried using z-index and zIndex but can't seem to get it to work. I'm not very advanced with HTML and CSS and know almost nothing about JS.

Would anyone be able to help please?


Cheers
Graham

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Opps, sorry. Here's the code in the HTML page:

Code:

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.x.co.uk/v2/assets/fadeslideshow.js">

//***********************************************
//* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
//* This notice MUST stay intact for legal use
//* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
//***********************************************

</script>

<script type="text/javascript">


var mygallery=new fadeSlideShow({
        wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
        dimensions: [1400, 450], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: [
                ["http://www.x/v2/waste-type-banner/1.jpg"],
                ["http://www.x/v2/waste-type-banner/2.jpg"],
                ["http://www.x/v2/waste-type-banner/3.jpg"],
                ["http://www.x/v2/waste-type-banner/4.jpg"],               
                ["http://www.x/v2/waste-type-banner/5.jpg"],
                ["http://www.x/v2/waste-type-banner/6.jpg"] //<--no trailing comma after very last image element!
        ],
        displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "ondemand",
        togglerid: ""
})

</script>

---

and then there's this:

Code:

---

<div id="image">
  <div id="image-wrapper">
  <div id="fadeshow1"></div>
    <div id="image-content1header"> SKIP LOADING GUIDELINES</div>
    </div>
</div>

---

With the "image-content1headeer" tag being the bit I need to be on top of the ultimateslideshow!

I know it must be possible as it's done on this site where the three columns (Acorn Group, Corporate Responsibility and Acorn News) cut into the js image part above.

aemg.co.uk


I've been trying out this dropped straight into the HTML page and it's working expect I can't get the damn div tag to centre properly. Usually the 50% left margin and halving the width works but not in this case!

Code:

---

#image #image-wrapper #image-content1header {
        position:absolute;
        top:560px;
        width:-700px;
        height:38px;
        z-index:1000;
        left: 50%;
}

---

Cheers

Do you have a link to a page you can show us? If not, could you post it as a jsfiddle?

Hi, I've managed to find the solution, was missing a CSS attribute with the old 50% trick. Cheers!