[Résolu] Menu horizontal probleme avec le menu déroulant

Bonjour

j'ai un petit soucis avec le menu horizontal.

Sous Firefox le menu passe derrière l'image qui est situé en dessous et sous internet explorer l'image est carrément décalé à droite

Aperçu Firefox - clic pour zoomer


Aperçu IE7 - clic pour zoomer (j'ai seulement mis la droite du menu sur celle la pour pas faire une image trop large)


Pourtant j'ai en gros le code de base y compris les z-index...

CSS :

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; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 175px;;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #006699;
border: 1px solid gray;
margin: 1px;
color: #fff;

}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #6699cc;
}
#menu li a, #menu dt a {
color: #fff;background: #6699cc;

text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #006699;
}
#site {
position: absolute;
z-index: 1;
top : 30px;

}

Si quelqu'un voit la bétise que j'ai pu faire

Merci d'avance
Jerome

edit : Pour info j'ai essayé d'inverser les z-index comme j'étais pas sur du sens mais le résultat est le même dans les 2 cas
Modifié par Jerome38 (25 Jan 2008 - 17:43)

Bonjour Jérome,

Difficile à dire sans voir le code de ta page (et pas seulement le menu )
Une page en ligne serait un plus très acceptable
Juste une interrogation sur cette partie :

#menu dd {
[#red]display: none; [/#]  
border: 1px solid gray;
}

Pourquoi ?

Cdt,
Sylvain

Pour le display:none; à vrai dire je ne sais pas trop ca vient du code source que j'ai pris ici :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

C'est un menu déroulant en js donc il me semble qu'il sert a cacher les sous menu au départ

Pour la page en ligne c'est une page qui a un accès sécurisé et comme c'est pas à moi je peux pas trop donner l'accés

Non en gros mon code du menu correspond exactement a la source, le javascript aussi et le css en gros j'ai surtout modifié des couleurs mais bon y'a bien un soucis quelque part...
Modifié par Jerome38 (25 Jan 2008 - 17:43)

Bon en fait je viens de trouver j'avais une partie du code dans un include qui était plus loin dans le code et du coup ca comprenait pas ...

Ma faute donc (enfin comme toujours dans ces cas la )

Merci

Salut,

Jerome38 a écrit :
ca vient du code source que j'ai pris ici

Dans le tuto, il n'y a pas ce display: none;

Il faut l'enlever car ça rend ton menu inaccessible si JS est inactif alors que celui du tuto l'est...

C'est le code JS qui planque tes sous-menus au lancement de la page... Il ne faut surtout pas que ce soit fait en CSS...
Modifié par koala64 (25 Jan 2008 - 17:58)

AH ok merci pour l'info pourtant j'ai fait un copié collé

Je vais l'enlever merci

edit : si il y'est j'ai utilisé le 2eme code en fait de la page pas le premier.
Je vais quand meme l'enlever au cas ou l'utilisateur est pas javascript
Modifié par Jerome38 (25 Jan 2008 - 18:01)

erf... bon, alors faut vraiment que je me grouille de finir la mise à jour de ce tuto...

koala64 a écrit :
erf... bon, alors faut vraiment que je me grouille de finir la mise à jour de ce tuto...

Arf...ce n'est pas dans le code source de l'exemple à proprement parler, mais dans le tuto que l'erreur s'est glissée...

Oui, il va être temps !!!

Ou alors on organise le jeu des "7 erreurs" qui se se sont glissées dans les tutos, avec à la clé un demi-kiwiz à gagner ?!