probleme de menu deroulant

Sujet résolu

22 juin 2006 à 13:16:17

Bonjour les zero,

J'essaie d'installer un menu deroulant sur mon site mais j'ai des bugs qui se produisent. Voici le site.

1. Sous Firefox, tout est décalé sur la droite. Pas terrible hein :-°

?
2. Mes menus qui se déroulent décalent le site vers la bas. Je voudrais qu'ils passent au-dessus moi. J'ai bien utilisé z-index, pourtant mais cela ne change rien.

voici mes codes:
Le html d'abord:

<div id="menuhaut2">
<dl>
<dt onmouseover="javascript:montre();"><a href="index.php" title="Retour à l'accueil">ACCUEIL</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href="club.php">CLUB</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Inscriptions - Tarifs</a></li>
<li><a href="#">Dernières infos</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href="entrainement.php">ENTRAÎNEMENT</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Inscriptions - Tarifs</a></li>
<li><a href="#">Dernières infos</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');"><a href="equipe.php">EQUIPES</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Blogs des équipes</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Dernières infos</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');"><a href="competition.php">COMPETITION</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Cicrcuit du Pays de Colmar</a></li>
<li><a href="#">Dernières infos</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');"><a href="coindesperfs.php">PERFS</a></dt>
<dd id="smenu5">
<ul>
<li><a href="#">Perfs de l'année</a></li>
<li><a href="#">Archives</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu6');"><a href="webmaster.php">CREER UN SITE</a></dt>
<dd id="smenu6">
<ul>
<li><a href="#">Présentation du site - réseau</a></li>
<li><a href="#">Un club veut intégrer le réseau ?</a></li>
<li><a href="#">Dernières évolutions sur le réseau</a><li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="forum/index.php" title="La communauté">FORUM</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="intranet.php" title="Zone des admins">INTRANET</a></dt>
</dl>
</div>
<div id="fond">
Le reste du site
</div>

Le CSS ensuite:

#fond
{
width:950px;
margin:none;
padding:none;
border-collapse:collapse;
background-color:white;
z-index:1;
}
#menuhaut2 {
z-index:100;
margin:none;
padding:none;
}
#menuhaut2 dl {
float:left;
width:11%;
text-align:center;
}
#menuhaut2 dt {
cursor: pointer;
font-weight: bold;
background: #ccc;
border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#menuhaut2 dd {
display: none;
border: 1px solid gray;
}
#menuhaut2 li {
text-align: center;
background: #fff;
list-style-type: none;
}
#menuhaut2 li a, #menuhaut2 dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menuhaut2 li a:hover, #menuhaut2 li a:focus, #menuhaut2 dt a:hover, #menuhaut2 dt a:focus {
background: #eee;
}
#menuhaut2 dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

strucky

22 juin 2006 à 13:29:02

C'est toute ta page qui déconne, pas seulement le menu...

Juste une suggestion, je dois faire parti d'une minorité, mais des sites dont les liens du menu sont inaccessibles sans js, il y en a aucun dans mes bookmarks.

Encore pour IE, je m'en fou vu qu'il gère très mal les css, c'est encore acceptable, mais pour les autres navigateurs, ton menu déroulant, tu peux obtenir la même chose sans js, rien qu'avec quelques lignes de css.

gogo

22 juin 2006 à 13:32:45

Salut, Strucky.
J'avais un peu du mal avec mon menu déroulant. Je comprenais pas bien le principe. Donc je me suis rabattu sur la méthode d'Alsacreation que voici.
Et cela me fait planter tout mon site. Ca me le decale a droite. J'ai fait une petite couille v quelque-part. Mais si tuas une autre methode sans JS je suis super preneur

strucky

22 juin 2006 à 13:40:09

Tiens, sur developpez.com, il y en a un pas mal.

Bien sûr sur IE, cela ne fonctionne pas, et il faut en rester à la method JS, un simple commentaire conditionnel dans le html fera l'affaire.

gogo

22 juin 2006 à 13:44:10

OK j'essaierai plus tard. Mais j'aurais bien aimé faire marcher la methode d'alsacreation moi quand-même.

Pourquoi donc que ce site par à droite sous FF? Et surtout pourquoi donc que le menu qui se déroule décale tout mon texte vers le bas alors que j'ai mis mes jolies z-index ??

Merci d'avance.

EDIT: Je m'impressionne tous les jours. J'ai réussi !!!