Bonjour à tous,
Ca fait un moment que je viens lire ce forum hyper instructif. Je voudrais justement installer le menu horizontal (tiré de ce site) qui est un vrai petit bijoux, mais j'ai un véritable problème avec IE (tout est ok sur Firefox)
La mise en en forme est impeccable, mais le menu sous menu disparait lorsque l'on survole une partie du sous menu elle même survolant le texte qui est en dessous...
Je ne suis pas certain d'être très clair alors vous pouvez tester la page suivante, vous verrez rapidement de quoi il s'agit. Pour plus de lisibilité, j'ai mis une bordure à tous les div. Testez Menu 1 et Menu 2, vous verrez qu'ils disparaissent de manière anormale.
http://www.domicile-job.net/test.html
Les tests révèlent que, si je descend le div de droite, les sous menus ne survolent plus de texte et ne disparaissent par anormalement.
Je met tout le code de la page ci-dessous.
Merci d'avance à ceux qui sauront me donner des éléments de réponse.
Pour info, j'utilise un doctype strict, mais cette page n'est qu'un test... je n'ai pas vérifié la validité du code...
Ca fait un moment que je viens lire ce forum hyper instructif. Je voudrais justement installer le menu horizontal (tiré de ce site) qui est un vrai petit bijoux, mais j'ai un véritable problème avec IE (tout est ok sur Firefox)
La mise en en forme est impeccable, mais le menu sous menu disparait lorsque l'on survole une partie du sous menu elle même survolant le texte qui est en dessous...
Je ne suis pas certain d'être très clair alors vous pouvez tester la page suivante, vous verrez rapidement de quoi il s'agit. Pour plus de lisibilité, j'ai mis une bordure à tous les div. Testez Menu 1 et Menu 2, vous verrez qu'ils disparaissent de manière anormale.
http://www.domicile-job.net/test.html
Les tests révèlent que, si je descend le div de droite, les sous menus ne survolent plus de texte et ne disparaissent par anormalement.
Je met tout le code de la page ci-dessous.
Merci d'avance à ceux qui sauront me donner des éléments de réponse.
Pour info, j'utilise un doctype strict, mais cette page n'est qu'un test... je n'ai pas vérifié la validité du code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<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">
<!--
/* CSS issu des tutoriels http://css.alsacreations.com */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
width:750px;
margin-top: 85px;
z-index: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;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
body {
background-color: #F0E9DD;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 130%;
text-align: justify;
}
#conteneur {
border:1px solid #FF0000;
width:800px;
margin:0 auto;
}
#header {
border:1px solid #000000;
height: 163px;
margin-left: 10px;
margin-right: 10px;
}
#gauche {
border:1px solid #FF00FF;
float:left;
width: 190px;
padding-left: 10px;
}
#droite {
border:1px solid #00FF00;
float:right;
width: 550px;
padding-left: 10px;
padding-right: 10px;
}
#footer {
border:1px solid #000000;
clear: both;
height: 30px;
}
.TexteJustifie {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 130%;
text-align: justify;
padding-right: 10px;
padding-left: 10px;
}
a {
text-decoration: underline;
cursor: hand;
color: #006B82;
}
a:hover {
text-decoration: none;
color:#6AA8B6;
}
a:active {
text-decoration: none;
color: #6AA8B6;
}
.FondTableau {
background-image: url(../img-interface-softassur/fond-tableau.jpg);
background-repeat: repeat-y;
width: 770px;
}
h1 {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 22px;
font-weight: bold;
color: #CC0000;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #666666;
padding: 5px;
}
h2 {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #666666;
line-height: 120%;
margin: 0px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
font-weight: bold;
margin: 0px;
text-align: left;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
margin: 0px;
}
.TexteCentrePetit {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
.CadreErreur {
margin: auto;
background-color: #EFEDE7;
padding: 2px;
border: 1px solid #5B4747;
float: none;
width: 575px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 130%;
text-align: center;
color: #FF0000;
}
.CadreConfirmation {
margin: auto;
background-color: #EFEDE7;
padding: 2px;
border: 1px solid #5B4747;
float: none;
width: 575px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 130%;
text-align: center;
color: #3A682A;
}
-->
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
<li><a href="#">Sous-Menu 2.5</a></li>
<li><a href="#">Sous-Menu 2.6</a></li>
<li><a href="#">Sous-Menu 2.7</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="gauche">
<h1>Titre gauche</h1>
</div>
<div id="droite">
<h1>Titre colonne droite</h1>
</div>
<div id="footer">
<p>Texte de bas de page</p>
</div>
</div>
</body>
</html>