k09
July 18, 2011, 9:09pm
1
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;
}
ralphm
July 18, 2011, 11:19pm
2
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.
k09
July 19, 2011, 7:54pm
3
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
PaulOB
July 19, 2011, 8:15pm
4
Looks ok to me - have you refreshed the page ?
ralphm
July 19, 2011, 11:12pm
6
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.