Bonjour,
Voila j'ai un probleme sur mes liens actifs qui semble venir des z-index
Voila, j'ai deux div
#page qui contient un menu deroulant
#centre qui contient ma page et liens
Sous Firefox et Opera les liens contenus dans centre sont inactifs (recouvert par #page)
Lorsque je les rends actifs en jouant sur les z-index, IE ne me donne plus mes sous menus,(ils sont alors sous #centre)
je vous mets mon code css et html de la version ou le deroulant est actif sous IE
mais avec le lien inactif pour Firefox et opera
...toute suggestion sera la bienvenue !
yvo
mon fichier css
ma page
Modifié par yvo (12 Nov 2005 - 18:57)
Voila j'ai un probleme sur mes liens actifs qui semble venir des z-index
Voila, j'ai deux div
#page qui contient un menu deroulant
#centre qui contient ma page et liens
Sous Firefox et Opera les liens contenus dans centre sont inactifs (recouvert par #page)
Lorsque je les rends actifs en jouant sur les z-index, IE ne me donne plus mes sous menus,(ils sont alors sous #centre)
je vous mets mon code css et html de la version ou le deroulant est actif sous IE
mais avec le lien inactif pour Firefox et opera
...toute suggestion sera la bienvenue !
yvo
mon fichier css
html,body{
padding:0;
margin:0;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CFC8A4;
background-color: #333333;
margin-left: 0px;
margin-top: 0px;
color: #000000;
}
a:visited {color:#E18532; text-decoration:none}
a:link {color:#E18532; text-decoration:none}
a:hover {color:#CFC8A4; text-decoration:none}
#page {
position:absolute;
left:0px;
top:100px;
width:800px;
height:300px;
border:0px
none #000000;
z-index:2;
}
#centre {
position:absolute;
left:150px;
top:100px;
width:650px;
height:480px;
background-color:#333335;/*GRIS LEGEREMENT DIFFERENT*/
border-top-style: solid;
border-top-color: #43400C;
border-top-width: thin;
border-left-color: #43400C;
border-left-style: solid;
border-left-width: thin;
z-index:1;
}
.menu{
position:absolute;
top:50px;
left:4px;
/* solve a Opera7/IE display bug */
width:142px;
width/**/:140px;
margin:1px;
padding:0;
z-index:auto;
}
.menu span{
display:none;
}
.menu ul{
margin:0;
padding:0;
position:absolute; /* important */
width:142px;
width/**/:140px;
}
.menu li ul{
visibility:hidden;
}
.menu li ul{
margin-left:140px; /* be careful */
margin-top:-20px;
z-index:auto;
}
.menu a{
text-align:center;
display:block;
width:140px;
text-decoration:none;
margin:0;
padding:3px 0 3px 0;
background-image: url(../images/look/bouton.gif);
}
.menu a:hover{
background-image: url(../images/look/s_bouton.gif);
}
/* for a mozilla better display with key nav */
.menu a:focus{
/* background-color: #aaf; */
}
.menu span{
/* hide some accessibility stuff */
display:none;
}
.menu li{
width:140px;
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
z-index:auto;
}
/* IE PC selector */
* html .menu li {
display:inline; /* solve a IE PC list bug */
float:none; /* solve a IE5 clav nav bug */
}
ma page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>ESSAI</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<link href="css/essai.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/dynMenu.js"></script>
<script type="text/javascript" src="js/browserdetect.js"></script>
<script type="text/javascript" src="js/preload.js"></script>
</head>
<body>
<div id="page">
<ul id="menu">
<li><a href="index.php">Accueil</a>
<ul>
<li><a href="news.php">News du Site</a></li>
</ul>
</li>
<li><a href="/galerie/category.php">Galeries</a>
</li>
<li><a href="#" >Infos</a>
<ul>
<li><a href="#">Matériel</a></li>
<li><a href="#">Digiscopie</a></li>
<li><a href="#">Infos Site</a></li>
<li><a href="#">Plan du Site</a></li>
</ul>
</li>
<li><a href="/galerie/search.php">Recherches</a>
</li>
<li><a href="#menu2" >Liens</a>
<ul>
<li><a href="liens_ornitho.php">Ornithologiques</a></li>
<li><a href="#">Entomoloqiques</a></li>
<li><a href="#">Naturalistes</a></li>
<li><a href="#">Photographes</a></li>
<li><a href="#">Annuaires</a></li>
<li><a href="#">Ressources Web</a></li>
</ul>
</li>
<li><a href="#menu2">Contact</a>
</li>
</ul>
<script type="text/javascript">
initMenu();
</script>
</div>
<div id="centre"><a href="http://google.fr"> <br />
<br />
<br />
<br />
<br />
<br />
<br />
tutu</a>est normalement un lien actif....
</div>
</body>
</html>
Modifié par yvo (12 Nov 2005 - 18:57)
en fait c'etait une page de test que j'ai supprimé...
