hello
- overbooké en ce moment -. il faut voir quelles sont les versions de navigateurs incriminés. Du peu que j'en ai vu, ça semble passer correctement sous firefox3 et IE8.
Le phénomène vient principalement des navigateurs qui gèrent mal les CSS, et même quasiment exclusivement de ça.
Après, 2 cas de figure se présentent :
- les navigateurs incriminés sont minoritaires en parts de marché (par exemple internet explorer 6, ou encore Galéon comparé à IE8 et firefox 3)
- les navigateurs sont encore bien présents (par exemple internet explorer 7)
Quoiqu'il en soit, l'idéal est de modifier le code car le web, c'est la pluralité, c'est l'accès universel en s'affranchissant des barrières des (in)capacités humaines. Et bienvenue dans le merveilleux monde des respects du code par les navigateurs...
Ce qu'il faut faire, c'est y aller par étapes. Je pense que les <div> ne sont pas les meilleurs choix, pourquoi pas une liste de ul ?
typiquement ul /li (accueil) / li (activités)... </ul>
et chaque li auraut un sous-UL pour présenter les sous menus.
Il y a un tuto qui marche plutôt bien que tu peux aussi trouver par ici :
<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 */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
position: relative;
margin: 0 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
background-color: #ccc;
position: absolute;
bottom:1.5em;
width:100%;
}
#menu li {
text-align: center;
}
#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;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<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">
<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">
<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>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<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>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
(je n'arrive plus à trouver le lien sur le site d'alsacreations ...)
PHP Astux
