CSS - Text Hidden Behind JQuery Images

Hi,

In the changing images at the bottom of my site, how do I get the text to appear below the images and not be hidden behind?

Thanks.


.homeSubContentMain{
	float:left;
	width:840px;
	padding-left:10px;
	padding-top:10px;
	}

.homeSubContent3{
	float:left;
	width:204px;
border:#71a200 solid 1px;
	margin-right:4px;
	height: 280px;
	}

#slideshow{
    position:relative;
		background-color:#000;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
border: none;padding:0;margin:0;
}

#slideshow IMG.active {
    z-index:10;
}

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

You could add a height to the slideshow div:

#slideshow {
  background-color: #000000;
  [COLOR="Red"]height: 130px;[/COLOR]
  position: relative;
}

Be aware that you should only have one H1 per page in an XHTML page.

Hi,
Didn’t make a difference. Not sure why the text appears behind the images as it is outside of the #slideshow div.


				<div class="homeSubContent3">
				<div id="slideshow">
						 <img src="<?php bloginfo('template_directory'); ?>/images/sub_martin.jpg" alt="Martin" width="204" height="130" />
						 <img src="<?php bloginfo('template_directory'); ?>/images/sub_sean.jpg" alt="Sean" width="204" height="130" />
						 <img src="<?php bloginfo('template_directory'); ?>/images/sub_owen.jpg" alt="Owen" width="204" height="130" />
						 <img src="<?php bloginfo('template_directory'); ?>/images/sub_gordon.jpg" alt="Gordon" width="204" height="130" class="active" />
				</div>
				  <h1>Participants</h1>
				  <p>Read about all our participants in the AT Network.</p>
					  <p><a href="http://theatnetwork.com/?page_id=54"><img class="buttons" src="<?php bloginfo('template_directory'); ?>/images/readMoreBtn.jpg" alt="Read about our participants." width="101" height="18" /></a></p>
				</div>

Thanks

Looks ok to me - have you refreshed the page ?

OK now :smiley:

Because the images were placed absolutely (and thus outside the document flow) the following items didn’t know they were there, and were slipping up underneath. So setting a height on the container pushed them down.

You still shouldn’t be using all those H1s, though. You should only have one per page.