Skip navigation
Currently Being Moderated

Overlapping image hidden in HTML/CSS slideshow

May 3, 2013 9:42 AM

Tags: #image #css #overlap #slideshow #hidden #z-index

I'm attempting to create a simple slideshow with HTML / CSS / Jquery. I followed this tutorial -

http://www.html5marketplace.com/slideshow/

 

Here's my page (the slideshow is on the bottom image):

 

http://beta.deltsig.com/photos.html

 

If you hover over the left or right side of the bottom image, you'll see you can advance the images upon clicking. So the slideshow is functional - however there are supposed to be forward/back arrow buttons on the left and right that are hidden for some reason. (These are in the image file "slideshow-btns.png").

 

I tried changing the z-index on the button and adding one to the slideshow itself, but it did nothing. Here's a sample of the button style:

 

#container .prevButton{

          height:72px;

          width:68px;

          position:absolute;

          background:url('slideshow/slideshow-btns.png') no-repeat;

          top:50%;

          margin-top:-36px;

          cursor:pointer;

          z-index:6000;

          background-position:left top;

          left:0

}

 

Any idea how I can get it to show?

 
Replies
  • Currently Being Moderated
    May 3, 2013 2:03 PM   in reply to x_defect

    No slideshow that I can see.  Are you sure you uploaded the correct page?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 2:44 PM   in reply to x_defect

    OK.  Start by fixing your code errors. 

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbeta.deltsig. com%2Fphotos.html

     

    You have a malformed comment starting on  line 27 and ending on line 51 that's causing some problems.

     

     

     

     

     

     

    <!--begin comment


    end comment-->

     

     

     

    Nancy O.

     

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points