Z-index + jQuery Cycle

JavaScript
1

Hi,

I have a rotator going using jquery cycle plugin. I want to overlay the logo ontop of this rotator but the z-index doesn’t seem to be working. Any ideas what I might be doing wrong? The rotatorarea div is still below the cycle list (rotator ul)

Thanks

HTML


<div id="rotatorarea">
<ul id="rotator">
    <li><img src="/media/images/rotator/pic2.jpg" width="900" height="340"  /></li>
    <li><img src="/media/images/rotator/pic3.jpg" width="900" height="340"  /></li>
    <li><img src="/media/images/rotator/pic4.jpg" width="900" height="340"  /></li>
    <li><img src="/media/images/rotator/pic5.jpg" width="900" height="340"  /></li>
    <li><img src="/media/images/rotator/pic6.jpg" width="900" height="340"  /></li>
    <li><img src="/media/images/rotator/pic7.jpg" width="900" height="340"  /></li>
    <li><img src="/media/images/rotator/pic8.jpg" width="900" height="340"  /></li>
</ul>
</div>

CSS


#rotatorarea {
	width:900px;
	height:340px;
	background: url('/media/images/rotator-overlay.png') top no-repeat;
	position: relative; 
}
#rotator {
	list-style: none;
}

jQuery Call

	
// ROTATOR
	// ----------------------------------------------------------->
	$('ul#rotator').cycle({ 
		delay:  2000, 
		speed:  500
	});
2

Maybe you need to clarify. What goes on what? Where is the logo code?

A link would be better.

3

Sorry, the logo is within the rotatorarea div (it is the rotator-overlay.png).

Here is a link: Home - North Byron Events

Thanks

4

Because it’s a background image, the logo can’t appear in front of the other content.

What you could do instead is place an extra div inside the “rotatorarea” div like so:

<div id="rotatorarea">
  [COLOR="Blue"]<div class="logo">
    <img src="/media/images/rotator-overlay.png" />
  </div>[/COLOR]
  <ul>
</ul>
</div>

And then style like this:

#rotatorarea {position:relative}
.logo {
  position:absolute; 
  top: 0; 
  left: 0; 
  width: 900px; 
  height: 347px;
  z-index:10;
}
5

That’s perfect, thankyou so much.