2010-02-09 8 views
0

J'essaie de faire en sorte que cette barre de lancement jquery soit au sommet de tous les temps. Je rencontre des problèmes sur une page spécifique qui utilise jquery innerfade ici: http://ithacacigars.com/cigars.php Pour une raison quelconque, il se glisse derrière les images.Problèmes de positionnement Css

<?php include('perch/runtime.php'); ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- 
Design by Davey Whitney 
[email protected] 
--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<link rel="stylesheet" type="text/css" href="http://ithacacigars.com/style.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="http://ithacacigars.com/navstyle.css" media="screen" /> 
<title>Ithaca Cigars</title> 

<script type="text/javascript" src="http://ithacacigars.com/js/jquery.js"></script> 
<script type="text/javascript" src="http://ithacacigars.com/js/jquery.innerfade.js"></script> 
<script type="text/javascript"> 
     $(document).ready(
       function(){ 

        $('.ciglog').innerfade({ 
         speed: 1000, 
         timeout: 5000, 
         type: 'sequence', 

        }); 
      }); 
</script> 


<script type="text/javascript"> 
$(document).ready(function() { 
    $("ul.menu_body li:even").addClass("alt"); 
    $('img.menu_head').click(function() { 
    $('ul.menu_body').slideToggle('medium'); 
    }); 
    $('ul.menu_body li a').mouseover(function() { 
    $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50); 
    }); 
    $('ul.menu_body li a').mouseout(function() { 
    $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50); 
    }); 
}); 
</script> 

<script language="javascript"> 
image1 = new Image(); 
image1.src = "http://ithacacigars.com/images/homeon.png"; 

image2 = new Image(); 
image2.src = "http://ithacacigars.com/images/newon.png"; 

image3 = new Image(); 
image3.src = "http://ithacacigars.com/images/contacton.png"; 

image4 = new Image(); 
image4.src = "http://ithacacigars.com/images/navigateon.png"; 
</script> 

</head> 

<body> 
<div id="wrapper"> 

<div id="column"> 
    <div id="header"> 
     <img src="http://ithacacigars.com/images/header.png" /> 
    </div> 
    <div id="content"> 
     <div id="nav"> 
     <div class="container"> 

<a href="http://ithacacigars.com/" onmouseover="image1.src='http://ithacacigars.com/images/homeon.png';" 
onmouseout="image1.src='http://ithacacigars.com/images/home.png';"> 
<img name="image1" src="http://ithacacigars.com/images/home.png"></a> 

<a href="http://ithacacigars.com/whatsnew.php" onmouseover="image2.src='http://ithacacigars.com/images/newon.png';" 
onmouseout="image2.src='http://ithacacigars.com/images/new.png';"> 
<img name="image2" src="http://ithacacigars.com/images/new.png"></a> 

<a href="http://ithacacigars.com/contact.php" onmouseover="image3.src='http://ithacacigars.com/images/contacton.png';" 
onmouseout="image3.src='http://ithacacigars.com/images/contact.png';"> 
<img name="image3" src="http://ithacacigars.com/images/contact.png"></a> 

<img src="http://ithacacigars.com/images/navigate.png" width="184" height="32" class="menu_head" /> 
<ul class="menu_body"> 
<li><a href="http://ithacacigars.com/cigars.php">Cigars</a></li> 
<li><a href="http://ithacacigars.com/pipe.php">Pipe Tobacco</a></li> 
<li><a href="http://ithacacigars.com/roll.php">Roll Your Own</a></li> 
<li><a href="http://ithacacigars.com/acessories.php">Acessories</a></li> 
</ul> 
    </div> 

</div> 
    <div id="client"> 
     <ul class="ciglog"> 
       <li><img src="http://ithacacigars.com/images/cigarbarone.png" /></li> 
       <li><img src="http://ithacacigars.com/images/cigarbartwo.png" /></li> 
       <li><img src="http://ithacacigars.com/images/cigarbarthree.png" /></li> 
       <li><img src="http://ithacacigars.com/images/cigarbarfour.png" /></li> 
     </ul> 
     <p class="cigarlist"> 
     <?php perch_content('Cigars'); ?> 
     </p> 
    </div> 
</div> 
</div> 
</div> 

<div id="footer"> 
</div> 
</body> 

</html> 

ici est le tout, mais pour css le menu déroulant:

html, body { 
    background-color:#1C130B; 
} 

a { 
    text-decoration:none; 
} 

#wrapper { 
    margin:0 auto; 
} 

#column { 
    margin:0 auto; 
    width:790px; 
} 

#header { 

} 

#nav { 
    margin:0 0 0 20px; 
    width:770px; 
    height:35px; 
} 

.newbutton { 
    float:right; 
    width:130px; 
} 

#content { 
    background-image:url('http://ithacacigars.com/images/contentbox.png'); 
    background-repeat:no-repeat; 
    width:770px; 
    height:770px; 
    margin:40px 0 0 0; 

} 

#client { 
    width:700px; 
    height:550px; 
    margin:20px 0 0 30px; 
    font-weight: bold; 
} 

#portfolio .innerfade li img { 
    margin:0 0 0 120px; 
    height:350px; 
} 

#talk img{ 
    margin:20px 25px 0 0; 
} 

p .cigarlist { 
    width:350px; 
    height:550px; 
    font-weight:bold; 
    float:left; 
} 


.ciglog { 
    width:350px; 
    height:350px; 
    float:right; 
    position:relative; 
    display:block; 
} 

#footer { 
    width:100%; 
    height:200px; 
    background-color:#AE401E; 
} 

Css pour la liste déroulante:

@charset "utf-8"; 
/* CSS Document */ 


ul, li{margin:0; padding:0; list-style:none;} 

.container img { 
    border:1px solid #998675; 
} 

.menu_head{border:1px solid #998675; margin:0 0 0 200px;} 

.menu_body {position:absolute; margin:0 0 0 553px; display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;} 
.menu_body li{background:#493e3b;} 
.menu_body li.alt{background:#362f2d;} 
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;} 
.menu_body li a:hover{padding:15px 10px; font-weight:bold;} 

Toute aide serait grandement appréciée!

Répondre

3

Définissez le z-index de classe menu_body à une valeur supérieure à 4.

+0

Cela semble l'avoir fait! Merci pour l'aide. – Davey

2

Avez-vous essayé d'ajouter un z-index à l'élément que vous voulez sur le dessus?

+0

Si vous allez à la page qu'il a liée, vous remarquerez qu'il a défini l'index z pour les images qui s'évanouissent, ce qui les force à ajouter du contenu statique. –

+0

Je n'ai pas défini d'index z pour les images de fondu. – Davey