CODEWITHSUNDEEP
jqueryhtmlcssslider
heyred
heyred

Reputation: 2051

HTML jQuery slider appearing above content

I have a website that is currently using a Flash player that I want to replace with a jQuery Slider (need individual images to be clickable links). With that I have found a simple slider implementation online and have tested it and its working perfect.

When I replace the Flash player with the slider though, the slider is placed in the right position but all content below is moved up and appears underneath the slider.

Here is a simplified version of how it looks. The smiley face is one of a few images that appears one after the other on the slider. The Lorem text is all the content that used to be below the Flash player but has now been moved up. The Lorem text starts at Lorem Ipsum 1 but on the screen grab the first visible content is Lorem Ipsum 9. enter image description here

Below is the CSS used for the slideshow as well as a simplified version of the HTML as it currently appears - the HTML uses mainly tables (its a very old site I have inherited).

I can move the content down using absolute positioning on the content's table row but I dont think this is the best solution. Is there another way to force my content below the slider?

I have also placed the slider in its own table but that does not help either.

CSS

#slideshow {
    position:relative;
}

#slideshow A {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow A.active {
    z-index:10;
    opacity:1.0;
}

#slideshow A.last-active {
    z-index:9;
}

The HTML

<body style="font-family: Arial, Sans-serif, sans;">
    <table>
        <tr>
            <td>
                <div id="slideshow">
                    <a href="#"><img src="images/slide-1.jpg" alt="Slideshow Image 1" /></a>
                    <a href="#"><img src="images/slide-2.jpg" alt="Slideshow Image 2" /></a>
                    <a href="#"><img src="images/slide-3.jpg" alt="Slideshow Image 3" /></a>
                    <a href="#"><img src="images/slide-4.jpg" alt="Slideshow Image 4" /></a>
                    <a href="#"><img src="images/slide-5.jpg" alt="Slideshow Image 5" /></a>
                    <a href="#"><img src="images/Untitled.jpg" alt="Slideshow Image 5" /></a>
                </div>
            </td>

        </tr>

        <tr>
            <td>
                <p>Lorem ipsum 1</p>
                <p>Lorem ipsum 2</p>
                <p>Lorem ipsum 3</p>
                <p>Lorem ipsum 4</p>
                <p>Lorem ipsum 5</p>
                <p>Lorem ipsum 6</p>
                <p>Lorem ipsum 7</p>
                <p>Lorem ipsum 8</p>
                <p>Lorem ipsum 9</p>
                <p>Lorem ipsum 10</p>
                <p>Lorem ipsum 11</p>
                <p>Lorem ipsum 12</p>
                <p>Lorem ipsum 13</p>
                <p>Lorem ipsum 14</p>
                <p>Lorem ipsum 15</p>
                <p>Lorem ipsum 16</p>
                <p>Lorem ipsum 17</p>
                <p>Lorem ipsum 18</p>
                <p>Lorem ipsum 19</p>
                <p>Lorem ipsum 20</p>
                <p>Lorem ipsum 21</p>
                <p>Lorem ipsum 22</p>
                <p>Lorem ipsum 23</p>
                <p>Lorem ipsum 24</p>
                <p>Lorem ipsum 25</p>
                <p>Lorem ipsum 26</p>
                <p>Lorem ipsum 27</p>
                <p>Lorem ipsum 28</p>
                <p>Lorem ipsum 29</p>
                <p>Lorem ipsum 30</p>
                <p>Lorem ipsum 31</p>
                <p>Lorem ipsum 32</p>
            </td>
        </tr>
    </table>
</body>

Upvotes: 0

Views: 122

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://jsfiddle.net/victor_007/ohwbpa91/

add a height for your slideshow div

#slideshow {
    position:relative;
    height:480px;
}

Upvotes: 1

Related Questions