18073 sujets

Questions générales et questions de débutants

[Résolu]Menu Vertical VD2: sous menus masqués par div adjacent sous IE

Bonjour à tous.
J'essaie d'utiliser le menu:
http://css.alsacreations.com/modelesmenus/vd2.htm
J'ai positionné un div a droite de mon menu.
Sous FF, les sous menus apparaissent au-dessus du contenu de ce div (c'est l'effet recherché).
Sous IE, ils sont masqués par le div.
J'ai fait l'experience aussi en modifiant directement la page vd2.htm, meme résultat.
Quelqu'un a t'il une idée ?
Merci
Salut,

Tu peux peut-être ajouter dans la partie CSS 
 z-index:1;
à #menu

ou une autre valeur

A+ Smiley smile
Modifié par Alan (11 Mar 2006 - 17:53)
Salut, merci de ton aide
Dans dd, z-index était a 100.
J'ai essayé ta modif dans dd, et dans #menu ensuite.
Rien n'y fait, ce satané IE se moque de moi.
merci, a+
Modifié par tio (11 Mar 2006 - 17:58)
Et si tu mets le z-index: 100 sur #menu plutôt que sur #menu dd ?

Tu utilises des calques Dreamweaver ? (je pose la question car celui ajoute du z-index à ses calques)

Sinon tu peux donner le code concerné, ça devrait pas être dur de régler le problème
Modifié par Alan (11 Mar 2006 - 18:05)
Re.
Ca ne change rien non plus...
Je n'utilise pas Dreamweaver, je fais un site avec phpedit comme éditeur,
mais tout le layout est fait à la mimine d'après les tutos du site.
Et ce z-index est le seul de tout mon css.
(peut etre est ce pour ca ?)
J'ai fait un test avec le tuto, en mettant la div en position absolue à côté et le z-index que j'avais dit

Exemple ici

Comme tu vois ça marche bien sous IE. Donc même si tu reprends le même code pour le menu, ça doit dépendre du reste. Et donc c'est difficile à dire (du moins pour moi) sans avoir plus de code.

A noter qu'avec le z-index: 100 sur #menu dd, ça ne marchait effectivement pas sous IE : exemple.
Modifié par Alan (11 Mar 2006 - 18:55)
Alors voila:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0025)http://localhost/shop.php -->
<HTML lang=fr xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Bienvenue sur le site de </TITLE><LINK
href="sit test_fichiers/vl.css" type=text/css rel=stylesheet>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language=javascript src="sit test_fichiers/js"></SCRIPT>

<SCRIPT type=text/javascript>
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=15; i++) {
		if (document.getElementById("smenu"+i)) {document.getElementById("smenu"+i).style.display="none";}
	}
if (d) {d.style.display="block";}
}
//-->
</SCRIPT>

<META content="MSHTML 6.00.2900.2838" name=GENERATOR></HEAD>
<BODY>
<DIV id=global>
<DIV id=header></DIV>
<DIV id=haut>
<UL class=menuhaut>
  <LI><A href="http://localhost/shop.php?mode=A"><IMG
  src="sit test_fichiers/accueil1.gif"></A> </LI>
  <LI><A href="http://localhost/shop.php?mode=P">Promos</A> </LI>
  <LI><A href="http://localhost/shop.php?mode=N">Neuf</A> </LI>
  <LI><A href="http://localhost/shop.php?mode=O">Occasions</A> </LI>
  <LI><A href="http://localhost/shop.php?mode=R">Recherche</A> </LI>
  <LI><A href="http://localhost/marques.php">Nos Marques</A> </LI>
  <LI><A href="http://localhost/visite.php">Visite Shop</A> </LI>
  <LI><A href="http://localhost/meteo.php">Météo</A> </LI>
  <LI><A href="http://localhost/contact.php">Contact</A> </LI></UL></DIV>
<DIV id=main>
<DIV id=gauche>
<DL id=menu>
  <DT onmouseover="javascript:montre('smenu1');"
  onmouseout=javascript:montre();><A
  href="http://localhost/shop.php?mode=A">Tous les produits</A>
  <DT onmouseover="javascript:montre('smenu2');"
  onmouseout=javascript:montre();><A
  href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=10_12_13">Flotteurs</A>
  </DT>
  <DD id=smenu2 onmouseover="javascript:montre('smenu2');"
  onmouseout=javascript:montre();>
  <UL>
    <LI><A
    href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=13">Vague</A>
    </LI>
    <LI><A
    href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=10">Slalom</A><
    li> </LI>
    <LI><A
    href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=12">Freeride</A><
    li> </LI></UL>
  <DT onmouseover="javascript:montre('smenu3');"
  onmouseout=javascript:montre();><A
  href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=14_15_16">Voiles</A>
  </DT>
  <DD id=smenu3 onmouseover="javascript:montre('smenu3');"
  onmouseout=javascript:montre();>
  <UL>
    <LI><A
    href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=16">Vague</A>
    </LI>
    <LI><A
    href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=14">Slalom</A><
    li> </LI>
    <LI><A
    href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=15">Freeride</A><
    li> </LI></UL>
  <DT onmouseover="javascript:montre('smenu4');"
  onmouseout=javascript:montre();><A
  href="http://localhost/shop.php?mode=A&amp;cat=2&amp;subcat=17">Mats</A>
  </DL></DIV>
<DIV id=milieu>A</DIV>
<DIV id=droite></DIV></DIV>
<DIV id=bas>
<DIV id=panier></DIV>
<DIV id=pied></DIV></DIV></DIV></BODY></HTML>

et le css

* {
margin: 0;
padding: 0;
border: 0;
/*font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;*/
}

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 0.8em;

margin: 0;
padding: 0;
background-image:url(images/background.jpg);
height:100%;
}


#header {
height: 50px;

background-image:url(images/bando1.gif);
}

#global {
position: relative;
width: 980px;
/*left: 50%;
margin-left: -515px;
*/margin-top:0px;
margin-left:auto;
margin-right: auto;

}


#haut {
height: 50px;

background-image:url(images/bando2.gif);
}


.menuhaut {
list-style-type: none;
margin: 0;
padding:0;

}

.menuhaut li {
float:left;
margin-right:1px;
}


.menuhaut a {

width: 100px;
height: 22px;
display: block;
text-align: center;
border: none;
text-decoration: none;

}
.menuhaut a img {border: none;}

.menuhaut a:hover {
text-decoration: none;
}


#main{
width: 980px;
height:500px;
}



#gauche {
position: absolute;
height: 500px;
width:150px;
/*background-color: yellow;*/
}


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
z-index:1;

}


#menu dt {
cursor: pointer;
/*background: #A9BFCB;*/
min-height: 20px;
/*line-height: 20px;*/
margin: 2px 0;
border: 1px solid red;
text-align: center;
font-weight: bold;

}

#menu dd {
position: absolute;

left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
/*color:red;*/
border: 1px solid yellow;
font-weight: bold;

}

#menu ul {

padding: 2px;
}
#menu li {
border: 1px solid yellow;
text-align: center;
font-size: 100%;
height: 18px;
line-height: 18px;

}
#menu li a {
color: yellow;
text-decoration: none;
display: block;
}
#menu dt a {
color: red;
text-decoration: none;
display: block;
}

#menu li a:hover {
color: yellow;
text-decoration: underline;

}


/*p {margin: 0 0 10px 0;}*/
#milieu{
position: absolute;
margin-left: 150px;
height: 500px;
width: 680px;
background-color:red;

}

#milieu2{
position: absolute;
margin-left: 150px;
height: 500px;
width: 830px;
background-color:red;

}


#droite{
position: absolute;
margin-left: 830px;

height: 500px;
width: 150px;
background-color:blue;
}
#bas{
width: 980px;
height:70px;
}




#panier {
position: absolute;

width: 150px;
height:70px;
background-image:url(images/panier1.gif);


}

#pied {
position: absolute;
margin-left: 150px;
height: 70px;
background-image:url(images/bck-menu.jpg);
width:830px;
}

désolé, ca fait beaucoup de code...
Modifié par tio (11 Mar 2006 - 20:07)
Merci,
Avec z-index: -1; sur #milieu ça marche bien : 
#milieu{
	position: absolute;
	margin-left: 150px;
	height: 500px;
	width: 680px;
	background-color:red;
	z-index: -1;
}

Sinon il y a des petites erreurs dans les <li> du menu.

Bonne soirée
Modifié par Alan (11 Mar 2006 - 20:14)
En effet, avec #menu z-index à 1 et #milieu z-index à -1,
ça marche bien, sous IE.
Et sous FF, #milieu n'est pas affiché...
J'ai corrigé les erreurs de balises li, merci
Ok Smiley smile
Bon enlève le z-index sur #menu et sur #milieu, et mets juste z-index: 1 sur #gauche : 
#gauche {
position: absolute;
height: 500px;
width:150px;
z-index: 1;
/*background-color: yellow;*/
}
Je viens de tester et c'est ok pour tous.. enfin Smiley smile
Merci!!!! Ca marche!!
En appliquant a un div de meme niveau hierarchique, c bon!!!
a+ Smiley cligne
et encore merci
Modifié par tio (11 Mar 2006 - 20:41)
Sujet clos
Aller à