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="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript: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="javascript: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="javascript: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="javascript: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="javascript: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>
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="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript: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="javascript: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="javascript: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="javascript: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="javascript: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>
.
