SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2006
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code CSS:
    .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;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could add a height to the slideshow div:

    Code:
    #slideshow {
      background-color: #000000;
      height: 130px;
      position: relative;
    }
    Be aware that you should only have one H1 per page in an XHTML page.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2006
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could add a height to the slideshow div:

    Code:
    #slideshow {
      background-color: #000000;
      height: 130px;
      position: relative;
    }
    Hi,
    Didn't make a difference. Not sure why the text appears behind the images as it is outside of the #slideshow div.

    Code HTML4Strict:
    				<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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Looks ok to me - have you refreshed the page ?

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2006
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Looks ok to me - have you refreshed the page ?
    OK now

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by k09 View Post
    Not sure why the text appears behind the images as it is outside of the #slideshow div.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •