menu horisontal et ie

catseb · 5 Mai 2006

Bonjour, j'ai un souci avec un menu deroulant horizontal :

Apres avoir lu les didacticiels et les correctifs, mon code fonctionne tres bien sous firefox, mais pas sous IE ou il apparait ouvert (alors que je veux le montrer seuelement au survol de la souris).

Voici le code, j ai tout essayé, lu pas mal de choses ici mais rien, et comme je debute j 'ai grand besoin d'une explication et d aide...

J'aimerais aussi savoir s'il est ou non compatible sous netscape, merci

Merci par avance !

Le code :

<!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" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#entete {
height: 100px;
background-color: #ffff33;
}
#haut {
height: 50px;
background-color:#ff9900;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 105px;
left: 1px;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#FFFF33;
top: 5px;
}
#centre {
background-color: #FFFFFF;
margin-left: 150px;
margin-right: 0px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #ff9900;
}
p {margin: 0 0 10px 0;}
.Style1 {
color: #FFFFFF;
font-weight: bold;
}
.Style2 {color: #99FF99}
</style>
</head>

<body>

<div id="conteneur">

<div id="entete">entete <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

<div id="haut">

</div>
<div id="menu">

<dl>
<dt onmouseover="java script:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

<dl>
<dt onmouseover="java script:montre('smenu1');">Hygiène</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Soins du Corps </a></li>

<li><a href="#">Soins du Visage </a></li>
<li><a href="#">Pour l'Homme</a></li>
<li><a href="#">Joli Bébé </a></li>
<li><a href="#">Protection Solaire </a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmouseover="java script:montre('smenu2');">Bien-Etre</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Huiles Essentielles </a></li>
<li><a href="#">Huiles Végétales </a></li>
<li><a href="#">Elixirs Floraux</a></li>
<li><a href="#">Les "Floressentiels" </a></li>
<li><a href="#">Diététique</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="java script:montre('smenu3');">Beauté</dt>
<dd id="smenu3">

<ul>
<li><a href="#">Le visage </a></li>
<li><a href="#">Les yeux </a></li>
<li><a href="#">Les joues </a></li>
<li><a href="#">Les lèvres </a></li>
<li><a href="#">Peignes & Brosses </a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="java script:montre('smenu4');">Maison & Jardin </dt>
<dd id="smenu4">
<ul>
<li><a href="#">Senteurs & Décoration </a></li>
<li><a href="#">Entretien Ménager </a></li>
<li><a href="#">Le Jardin </a></li>
<li><a href="#">Le Cuir </a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="java script:montre('smenu5');">Librairie</dt>
<dd id="smenu5">
<ul>
<li><a href="#">Notre Sélection </a></li>
</ul>
</dd>
</dl>
</div>

<div id="gauche"><p>menu gauche</p>
<p>largeur fixe : 150px</p>


</div>

<div id="centre">

partie centrale qui "pousse" les colones vers le bas.<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
</div>

<div id="pied">pied de page</div>

</div>


</body>
</html>

EDIT TheRec/Modérateur : Merci d'utiliser les balises BBCode appropriées pour présenter votre code. Si tu as besoin d'aide à ce sujet utilise le lien "Aide BB Code" se trouvant en dessous de la liste d'émoticons lorsque tu rédiges un message.

Connexion

menu horisontal et ie

Sujets conseillés

catseb

Veuillez vous connecter pour commenter

Parcourir

Activité