Need help with hopefully a small issue.

[Cyrusis]

I inquired on here a few days ago in regards to my slider. SB65 guided me and fixed most of my problems but I'm still having an issue with the new slider I implemented. The positioning is really strange, it doesn't seem to bump the rest of the content down, instead it kind of floats and overlaps over the rest.

Here's the code:

<script type="text/javascript">
function cycleImages(){
      var $active = $('#cycler .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 7000);
})
</script>

<style type="text/css">
#cycler{position:relative;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}
</style>

And here's the HTML i'm using:

<div id="cycler">
<img class="active" src="images/slider-3.jpg" alt="My image" />
<img src="images/slider-1.jpg" alt="My image" />	
<img src="images/slider-2.jpg" alt="My image" />			
</div>

Not sure what I'm missing but I do know that this method is browser friendly, I just need to find out how to position it properly and move the rest of the website content down below the slider.


Thank you so much!

[SB65]

Give #cycler a width and height and centre it:

#cycler {
    height: 300px;
    margin: 0 auto;
    position: relative;
    width: 940px;
}

[Cyrusis]

Thanks SB65! That seemed to do the trick, only thing, although the pixel measurements are accurate, it didn't line up with the header as perfectly as the other one. I just resized the header to fix that though and it looks fine now.

Thanks again!