18041 sujets

Questions générales et questions de débutants

Problème z-index avec iframe et menu css javascript

Bonjour,

Voici mon problème :
J'ai un menu css javascript et une iframe ouvrant un fichier pdf.
Lors de l'ouverture du menu, celui-ci apparaît sous le iframe contenant le fichier pdf.
J'ai tout essayé et je commence à désespérer.
J'espère qu'il existe une solution et je vous remercie par avance de votre aide...

FICHIER MENU.CSS :

/*---comportement des liens de style bouton---*/

a.bouton
{
display:inline;
background:#BFDD97;
color:#FFFFFF;
text-decoration:none;
border:#BFDD97 solid 1px;
text-align:center;
font-family:verdana;
font-size:12px;
font-weight:bold;
width:100px;
}

a.bouton:hover
{
background:#99CC99;
color:#FFFFFF;
text-decoration:none;
}

/* bloc de navigation 1 */

.nav1
{
width:100%;
padding:8px;
font-size:12px;
font-family:verdana;
font-weight:bold;
position:absolute;
z-index:6;
}

ul.menulist li ul
{
display:none;
}

ul.menulist li:hover ul
{
display:block;
}

ul.menulist, ul.menulist ul
{
background:#BFDD97;
border:1px solid #FFFFFF;
border-bottom:0px;
list-style:none;
margin:0px;
padding:0px;
width:148px;
_width:150px;
}

ul.menulist ul
{
position:absolute;
top:-1px;
left:148px;
}

ul.menulist li
{
position:relative;
margin:0px;
padding:0px;
border-bottom:1px solid #FFFFFF;
}

ul.menulist a
{
display:block;
_width:100%;
color:#FFFFFF;
text-decoration:none;
padding:5px;
}

ul.menulist a:hover
{
background:#99CC99;
color:#FFFFFF;
}

ul.menulist li.smenu
{
background-image:url(images/arrow.gif);
background-position:140px;
background-repeat:no-repeat;
}

FICHIER INDEX :

<html>
<head>
<title>Planète Aventure</title>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="menu.css">
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="texte.js"></script>
</head>
<body onload="setHover()">
<table width="768" border="0" cellpadding="0" cellspacing="0" bgcolor="#F5F5F5">

<? include ("barre-haut.php"); ?>

<tr>
<td>
<table width="768" border="0" cellpadding="0" cellspacing="0">
<tr>

<? include ("colonne-gauche.php"); ?>

<td width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30">
</td>
<td width="560">
<iframe src="conditions-generales.pdf" width="560" height="850"></iframe>
</td>
<td width="30">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>

<? include ("barre-bas.php"); ?>

</table>
</body>
</html>

FICHIER MENU :

<?

include("connexion.php");

?>

<td width="168" bgcolor="#EAEAEA" valign="top">
<div id="nav1" class="nav1">
<ul class="menulist">

<?
$requete_pays="SELECT * FROM pays ORDER BY nom_pays";
$resultat_pays=mysql_query($requete_pays,$connexion);

while($res_pays=mysql_fetch_object($resultat_pays))
{
echo "<li class='smenu'><a href='index.php' title='$res_pays->nom_pays'>$res_pays->nom_pays</a></li>";

$requete_types="SELECT * FROM types WHERE id_pays='$res_pays->id_pays' ORDER BY nom_type";
$resultat_types=mysql_query($requete_types,$connexion);

echo "<ul>";

while($res_types=mysql_fetch_object($resultat_types))
{
echo "<li class='smenu'><a href='index.php' title='$res_types->nom_type'>$res_types->nom_type</a></li>";

$requete_sejours="SELECT * FROM sejours WHERE id_type='$res_types->id_type' ORDER BY nom_sejour";
$resultat_sejours=mysql_query($requete_sejours,$connexion);

echo "<ul>";

while($res_sejours=mysql_fetch_object($resultat_sejours))
{
echo "<li><a href='index.php' title='$res_sejours->nom_sejour'>$res_sejours->nom_sejour</a></li>";
}

echo "</ul>";
}

echo "</ul>";
}

mysql_close();
?>

</ul>
</div>
</td>
J'ai oublié de vous dire que j'ai essayé de mettre l'iframe dans un div en lui appliquant un z-index<5, ça ne marche pas.
J'ai essayé de mettre une position absolute et un z-index>5 à tous les éléments de mon menu, ça ne marche pas.
snif snif Smiley bawling
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
merci de vos renseignements, j'ai réédité mon message proprement, vous pouvez supprimer celui-ci.
Modérateur
bonjour,

il serait preferable d'avoir le code html rendu par le serveur .
Pour voir si il n'y a pas d'erreur dans le html , avoir le menu ...
l'ideal serait une page en ligne.

As tu testé le comportement avec un fichier ".html" ou texte ou image , chargé dans l'iframe au lieu d'un ".pdf" .

L'affichage du pdf est geré par une surcouche "logicielle" et risque d'etre tout bonement "posé" au dessus du rendu html du navigateur.
Les regles css n'ont en principe aucune emprise sur cette element exterieur.
++
Sujet clos
Aller à