SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Brisbane, Australia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    z-index + jQuery Cycle

    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
    Code HTML4Strict:
    <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
    Code CSS:
    #rotatorarea {
    	width:900px;
    	height:340px;
    	background: url('/media/images/rotator-overlay.png') top no-repeat;
    	position: relative; 
    }
    #rotator {
    	list-style: none;
    }

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Maybe you need to clarify. What goes on what? Where is the logo code?

    A link would be better.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Brisbane, Australia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Maybe you need to clarify. What goes on what? Where is the logo code?

    A link would be better.
    Sorry, the logo is within the rotatorarea div (it is the rotator-overlay.png).

    Here is a link: Home - North Byron Events


    Thanks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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:

    Code:
    <div id="rotatorarea">
      <div class="logo">
        <img src="/media/images/rotator-overlay.png" />
      </div>
      <ul>
    </ul>
    </div>
    And then style like this:

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

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Brisbane, Australia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's perfect, thankyou so much.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •