Salut à tout le monde.
Pour mon problème de compatibilité entre IE6 et Mozilla, voici le code de l'ensemble de mon menu:
<html>
<div id="menu">
<dl>
<dt class="une_ligne" onMouseOver="javascript:montre();"><a href="" title="Actualités">Actualités</a></dt>
</dl>
<dl>
<dt class="une_ligne" onMouseOver="javascript:montre('smenu1');">Hebergements</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Hôtels</a></li>
<li><a href="camping.php">Campings</a></li>
<li><a href="#">Auberges</a></li>
<li><a href="#">Gîtes</a></li>
<li><a href="#">Chambres d'hôtes</a></li>
<li><a href="#">Locations saisonnières</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="une_ligne" onMouseOver="javascript:montre('smenu2');">Restauration</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Restaurants gastronomiques</a></li>
<li><a href="#">Pizzerias</a></li>
<li><a href="#">Crêperies</a></li>
<li><a href="#">Cafétérias</a></li>
<li><a href="#">Sandwicheries</a></li>
<li><a href="#">A domicile</a></li>
</dl>
<dl>
<dt class="une_ligne" onMouseOver="javascript:montre('smenu3');">Sorties</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Bars, Pubs</a></li>
<li><a href="#">Cafés, Salons de thé</a></li>
<li><a href="#">Discothèques</a></li>
<li><a href="#">Casinos</a></li>
<li><a href="#">Cinémas</a></li>
<li><a href="#">Bowling</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="deux_lignes" onMouseOver="javascript:montre('smenu4');">Sports et Détente</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Activités ludiques</a></li>
<li><a href="#">Activités sportives</a></li>
<li><a href="#">Randonnées et Découvertes</a></li>
<li><a href="#">Evénements sportifs</a></li>
</ul>
</dd>
</dl>
</div>
<head>
<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" media="screen">
<!--
body {
margin: 0;
/*padding: 0;*/
background: white;
font: 70% verdana, arial, sans-serif;
}
dl, dd, ul, li {
margin: 0 0 0 0 ;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 118px ;
} /* Ceci permet d'avoir les menus à l'horizontal*/
#menu dt {
cursor: pointer;
height: 56px;
margin: 0 0 5px 10px; /* espacement de 5px en dessus des menus et 10px à gauche */
width: 120px ;
text-align: center;
font: bold 13px/*/28px*/ verdana;
background: url(bouton.gif);
}
#menu dt.deux_lignes {
line-height : 28px;
}
#menu dt.une_ligne {
line-height : 56px;
}
#menu dd {
display: none;
width: 118px ;
margin: 0 0 0 10px;
background: #B4F0FE;
border: 1px solid gray;
} /*Rectangle définissant la zone où apparaissent les sous menus*/
#menu li { /* présentation des sous menus*/
text-align: left;
width: 118px ;
margin: 0 0 4px 0; /* on aere le texte des sous-menus de 4px */
opacity: 0.8;
}
#menu li a, #menu dt a { /* présentation du texte des sous menus*/
color: #000000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt:hover
{
background: url(bouton.gif) no-repeat 0 -56px ;/* Et ici on décale l'image du background de 56px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
font-weight: bold;
}
-->
</style>
</head>
<body>
</body>
</html>
Sur Mozilla, les boutons des menus changent de couleur, ce qui est normalement voulu dans mon code, mais sont collés les uns aux autres.
Sur IE6, les menus ne changent pas de couleurs comme si le bout de code suivant ne marchait pas
#menu dt:hover
{
background: url(bouton.gif) no-repeat 0 -56px ;/* Et ici on décale l'image du background de 56px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
par contre la pagination des boutons est correcte avec un espace marqué entre chaque bouton.
Si quelqu'un peut m'aider??
Modifié par dread (22 Dec 2006 - 16:20)
