homepage Welcome to WebmasterWorld Guest from 54.205.106.111
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css dropdown disappears behind javascript slideshow
z-index doesn't seem to fix it
tbestes




msg:4462233
 11:07 pm on Jun 6, 2012 (gmt 0)

There is a dropdown that appears under the "Our Work" tab, and it is visible on all pages except the home page, and I know this has to do with the javascript slideshow on the home page.

I have been able to overcome this on other sites, but was using different tools to construct the slideshow. In this case, the client requires the slideshow to pull images from a folder, and they want to be able to modify the show by simply adding/removing images from the folder. I satisfied that requirement, but now have no success with the drop down.

I played with the z-index of both the slideshow and the menu, even going so far as to force the slides BEHIND the page's background. Still, the dropdown does not appear on the home page. It's as if no matter what I do, that dropdown is still going to hide behind the slides.

Here is the relevant CSS code:
#navcontainer {
padding: 0px;
width: 780px;
height: 55px;
z-index:100;
position:relative;
}
#slideshow {
position:relative;
z-index:99;
}
/*This rule styles the sub-menu links*/
#p7PMnav ul a, #p7PMnav ul a:visited {
padding: 4px 10px 4px 16px;
background-color: #e6ad4b;
color: #fff;
}
/*the sub-menu hovers*/
#p7PMnav ul a:hover, #p7PMnav ul a:active, #p7PMnav ul a:focus {
background-color: #d28b11;
color: #FFFFFF;
letter-spacing: 0.01px;
}
/*the submenu classes */
/*The top property here and in the show class serves to fix a minor bug introduced
by the good folks at Apple in their Safari browser for Panther OS*/
#p7PMnav .p7PMhide {
left: -9000px;
border: 0;
top: 0;
}
#p7PMnav .p7PMshow {
top: auto;
left: auto;
z-index: 20000 !important;
}

And here is the getimages.php script referenced in the home page slideshow script:
<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

All other relevant code from the home page is below.

MENU BAR
<div id="navcontainer" bgcolor="#CC0000"><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="../media/navflrlft.jpg" /></td>
<td><ul id="p7PMnav">
<li><a href="../about.html" id="b1">About Us</a></li>
<li><a href="#" class="p7PMtrg" id="b2">Our Work</a>
<ul>
<li><a href="../projectmanagement.html">Project Management</a></li>
<li><a href="../consulting.html">Consulting</a></li>
<li><a href="../transportation.html">Facility Maintenance</a></li>
<li><a href="../emergency.html">Emergency Planning</a></li>
</ul>
</li>
<li><a href="../references.html" id="b3">References</a></li>
<li><a href="../contact.html" id="b4">Contact</a></li>
<li><a href="../newhome2.html" id="b5">Home</a></li>
<!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
<!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->
<!--[if IE 7]><style>#p7PMnav a{zoom:100%;}#p7PMnav ul li{float:left;clear:both;width:100%;}</style><![endif]-->
</ul></td>
<td><img src="../media/navflrrt.jpg" /></td>
</tr>
</table>
</div>

SLIDESHOW
<div id="slides">

<script src="http://www.[examplesite].com/media/slides/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "http://www.[examplesite].com/media/slides/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 4000)
}
</script>

<div>
<img id="slideshow" src="media/slides/arlington.jpg" />
</div>

</div>

 

rocknbil




msg:4462527
 4:08 pm on Jun 7, 2012 (gmt 0)

Welcome aboard tbestes, have you played with setting the z-index on #navcontainer only?

You have #navcontainer at 100 with a table nested inside it, and are attempting to get the menus themselves at a higher z-index - the problem is, the position is relative, not absolute, so it doesn't pull them out of the natural flow (e.g., it may not be working.)

First thing I'd do is lose the table used for layout (it's not needed,) and probably set position:relative on whatever container is holding #navcontainer. Setting relative on the parent will allow you to use position:absolute on #navcontainer, and it will now be positioned absolutely relative to it's parent (sounds contradictory, but it's not.) You can then set z-index to 1000 on #navcontainer which will bring the entire container up in the z-index.

Fotiman




msg:4462547
 4:39 pm on Jun 7, 2012 (gmt 0)

You could try the max z-index value of 2147483647.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved