Currently, I am attempting to design a slideshow using absolute positioning to layer images on top of each other. However, I am encountering a problem where the text below the slideshow is also being stacked on top of the pictures. I have tried enclosing the images in a wrapper div with relative positioning, but this has not resolved the issue. If anyone can identify the problem, I would greatly appreciate some assistance.
HTML CODE
<div id="imageDiv">
<div id="mainImage">
<img class="imagePositioning" id="slideshowImg1" src="images/tbrownMain.jpg" alt="Image of Terrell Brown" ></img>
<img class="imagePositioning" id="slideshowImg2" src="images/giantsMain.jpg" alt="Image of Giants" ></img>
<img class="imagePositioning" id="slideshowImg3" src="images/kobeMain.jpg" alt="Image of Kobe" ></img>
<img class="imagePositioning" id="slideshowImg4" src="images/nashMain.jpg" alt="Image of Nash" ></img>
<img class="imagePositioning" id="slideshowImg5" src="images/tebowMain.jpg" alt="Image of Tim Tebow" ></img>
</div>
<div id="contentText">
<a id="introText">Tim Tebow talks about Aaron Hernandez</a>
<p id="detailsPar">Tim Tebow...</p>
</div>
<table id="mediaMenu">
<tr>
<td class="subMenu">
<a href="#" onclick="doEverything(0)">
<table>
<tr> <td class="subTitle"> Tebow Talks </td></tr>
<tr><td><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr>
</table>
</a></td>
//...4 more nested tables in same way
</tr>
</table>
</div>
CSS CODE
#mainImage {
position:relative;
}
#imageDiv {
border: 5px solid black;
width:70%;
position:relative;
}
.imagePositioning {
position:absolute;
}
#contentText {
color:orange;
float:right;
position:absolute;
left:43%;
width:26%;
top:2%;
}
#mediaMenu td {
margin:3px;
padding:0px;
width:20%;
color:blue;
font-family: Chalkduster, Verdana, Sans-serif;
text-transform:uppercase;
font-size:12px;
}