28172 sujets

CSS et mise en forme, CSS3

Menu css horizontal, pbm sous IE8

Bonjour,
Je souhaite utiliser un menu horizontal basé sur un script en css.
J'ai fait "validé" mon script css par W3c (je ne sais pas ce que ca vaut ?).
Cependant mon menu ne fonctionne pas sous IE8.
Lorsque je survol avec la souris les élément du menu, les sous menus ne s'affichent pas.
Avec google chrome c'est ok.

voici le fichier css:

body { 
width : 80%; 
margin : center; 
/*min-width : 1120px; 
max-width : 2000px; */
} 
a { 
text-decoration : none; 
} 
a:link { 
color : #0080e0; 
} 
a:visited { 
color : #0000a0; 
} 
a:active { 
color : #ff0080; 
} 
a:hover { 
text-decoration : none; 
color : #0080e0; 
} 
.divlink a { 
display : block; 
width : 157px; 
height : 28px; 
font-family : MV boli; 
background : transparent url("./styles/menu1.png") no-repeat; 
} 
.divlink a:hover { 
background : transparent url("./styles/menu.png") no-repeat; 
} 
ul { 
list-style : none; 
padding : 0; 
margin : 0; 
font-family : MV boli; 
} 
#nav a { 
font-weight : bold; 
color : #ffffff; 
} 
#nav a { 
text-decoration : none; 
} 
#nav li li a { 
display : block; 
font-weight : normal; 
color : #0000a0; 
} 
#nav li li a:hover { 
display : block; 
width : 157px; 
background : transparent url("./styles/smenu_sel2.png") no-repeat; 
} 
li { 
float : left; 
position : relative; 
width : 157px; 
text-align : center; 
cursor : default; 
border : 1px solid #969696; 
} 
li#first { 
border-left-width : 2px; 
} 
li#last { 
border-right-width : 2px; 
} 
li ul { 
display : none; 
position : absolute; 
top : 100%; 
left : 0; 
font-weight : bold; 
background-color : #fff; 
border-right : 1px solid #666666; 
border-left : 1px solid #666666; 
border-bottom : 1px solid #666666; 
} 
li > ul { 
top : auto; 
left : 0; 
width : 157px; 
} 
li li { 
display : block; 
background : transparent url("./styles/smenu_def.png") no-repeat; 
border : 0; 
width : 157px; 
} 
li:hover ul { 
display : block; 
}
li.over ul { 
display : block; 
} 
.tab { 
margin-left : 5em; 
} 
.tab3 { 
margin-left : 3em; 
}


Ainsi que le menu:

<div id="nav">

<li id="first">
<div class="divlink"><a href="" >Théorie</a></div>
<ul>
<li><a href="http://www.o2mer.net/introduction.php" >Introduction</a></li>
<li><a href="http://www.o2mer.net/cycle_azote.php" >Cycle azote</a></li>
<li><a href="http://www.o2mer.net/methodes.php" >les méthodes</a></li>
</ul>
</li>

<li>
<div class="divlink"><a href="" >Mise en place </a></div>
<ul>
<li><a href="http://www.o2mer.net/materiel.php" >J   : Le matériel </a></li>
<li><a href="http://www.o2mer.net/eau.php" >J+1 : L'eau</a></li>
<li><a href="http://www.o2mer.net/pv.php" >J+2 : Pierres vivantes</a></li>
<li><a href="http://www.o2mer.net/sable.php" >J+10: Le sable</a></li>
<li><a href="http://www.o2mer.net/mep_invertebres.php" >J+30: Invertébrés</a></li>
<li><a href="http://www.o2mer.net/poissons.php" >J+60: Les poissons</a></li>
</ul>
</li>
</div>


Je débute en css, donc l'erreur est surement 'grosse', mais je n'ai rien trouvé malgré de nombreuses recherche sur internet. Dans le css, j'ai un 
li ul { 
display : none; 
...}

J'ai l'impression que ce morceau de code est mal interprété par IE.

Voila, j’espère avoir correctement décrit mon problème, et remercie par avance toute personne qui pourrait m'apporter des éléments de réponse.
cordialement,
ludo.
bonjour,

je pense que ton problème est du au ul principal qui manque.

de même il faudrait que tu rajoutes les ul entre les li dans ta css

exemple : 


#nav li li a:hover {  
display : block;  
width : 157px;  
background : transparent url("./styles/smenu_sel2.png") no-repeat;  
}


en 


#nav li ul li a:hover {  
display : block;  
width : 157px;  
background : transparent url("./styles/smenu_sel2.png") no-repeat;  
}
Bonjour silentauben,
merci pour ta réponse.
j'ai ajouter le <ul></ul> principal qui effectivement manquait.
j'ai modifié ma css comme tu me l'as conseillé.
mais ca ne marche toujours pas sous ie.
Sous chrome ca reste bon.

voici donc mon nouveau menu:

<div id="nav">
<ul>
<li id="first">
<div class="divlink"><a href="" >Théorie</a></div>
<ul>
<li><a href="http://www.o2mer.net/introduction.php" >Introduction</a></li>
<li><a href="http://www.o2mer.net/cycle_azote.php" >Cycle azote</a></li>
<li><a href="http://www.o2mer.net/methodes.php" >Les méthodes</a></li>
</ul>
</li>

<li>
<div class="divlink"><a href="" >Mise en place </a></div>
<ul>
<li><a href="http://www.o2mer.net/materiel.php" >J   : Le matériel </a></li>
<li><a href="http://www.o2mer.net/eau.php" >J+1 : L'eau</a></li>
<li><a href="http://www.o2mer.net/pv.php" >J+2 : Pierres vivantes</a></li>
<li><a href="http://www.o2mer.net/sable.php" >J+10: Le sable</a></li>
<li><a href="http://www.o2mer.net/mep_invertebres.php" >J+30: Invertébrés</a></li>
<li><a href="http://www.o2mer.net/mep_poissons.php" >J+60: Les poissons</a></li>
</ul>
</li>

</ul>
</div>


ainsi que ma nouvelle css:


body { 
width : 80%; 
margin : auto; 
min-width : 1120px; 
max-width : 2000px; 
} 
a { 
text-decoration : none; 
} 
a:link { 
color : #0080e0; 
} 
a:visited { 
color : #0000a0; 
} 
a:active { 
color : #ff0080; 
} 
a:hover { 
text-decoration : none; 
color : #0080e0; 
} 
.divlink a { 
display : block; 
width : 157px; 
height : 28px; 
font-family : MV boli; 
background : transparent url("./styles/menu1.png") no-repeat; 
} 
.divlink a:hover { 
background : transparent url("./styles/menu.png") no-repeat; 
} 
ul { 
list-style : none; 
padding : 0; 
margin : 0; 
font-family : MV boli; 
} 
#nav a { 
font-weight : bold; 
color : #ffffff; 
} 
#nav a { 
text-decoration : none; 
} 
#nav li  ul li a { 
display : block; 
font-weight : normal; 
color : #0000a0; 
} 
#nav li  ul li a:hover { 
display : block; 
width : 157px; 
background : transparent url("./styles/smenu_sel2.png") no-repeat; 
} 
li { 
float : left; 
position : relative; 
width : 157px; 
text-align : center; 
cursor : default; 
border : 1px solid #969696; 
} 
li#first { 
border-left-width : 2px; 
} 
li#last { 
border-right-width : 2px; 
} 
li ul { 
display : none; 
position : absolute; 
top : 100%; 
left : 0; 
font-weight : bold; 
background-color : #fff; 
border-right : 1px solid #666666; 
border-left : 1px solid #666666; 
border-bottom : 1px solid #666666; 
} 
li > ul { 
top : auto; 
left : 0; 
width : 157px; 
} 
li  ul li { 
display : block; 
background : transparent url("./styles/smenu_def.png") no-repeat; 
border : 0; 
width : 157px; 
} 
li:hover ul { 
display : block; 
}
li.over ul { 
display : block; 
} 
.tab { 
margin-left : 5em; 
} 
.tab3 { 
margin-left : 3em; 
}



Est ce que tu as vois autre chose ?
Merci d'avance pour ton aide.
PS: J'ai bien vider mon cache IE avant de refaire le test.
merci
ludo
bonjour,

enlève les div "divLink", tu laisses juste les <a>.

ensuite dans ta css, remplace .divlink a:hover et .divlink a par #nav > ul > li > a:hover et #nav > ul > li > a

ensuite rajoute les ul qui te manquent dans certaines lignes de ta css : 


#nav li  ul li a {  
display : block;  
font-weight : normal;  
color : #0000a0;  
}


par exemple que tu transforme en :


#nav ul li  ul li a {  
display : block;  
font-weight : normal;  
color : #0000a0;  
}


essaye comme ça Smiley smile
Re-salut.
j'ai fait comme indiqué, mais ca ne marche toujours pas.
je te laisse voir en ligne: http://www.o2mer.net/index2.php

voici mon nouveau menu (allégé):
<div id="nav">
<ul>
<li id="first">
<a href="" >Théorie</a>
<ul>
<li><a href="http://www.o2mer.net/introduction.php" >Introduction</a></li>
<li><a href="http://www.o2mer.net/cycle_azote.php" >Cycle azote</a></li>
<li><a href="http://www.o2mer.net/methodes.php" >Les méthodes</a></li>
</ul>
</li>
</ul>
</div>


et nouveau css:

body { 
width : 80%; 
margin : auto; 
min-width : 1120px; 
max-width : 2000px; 
} 
a { 
text-decoration : none; 
} 
a:link { 
color : #0080e0; 
} 
a:visited { 
color : #0000a0; 
} 
a:active { 
color : #ff0080; 
} 
a:hover { 
text-decoration : none; 
color : #0080e0; 
} 
#nav > ul > li > a { 
display : block; 
width : 157px; 
height : 28px; 
font-family : MV boli; 
background : transparent url("./styles/menu1.png") no-repeat; 
} 
#nav > ul > li > a:hover { 
background : transparent url("./styles/menu.png") no-repeat; 
} 
ul { 
list-style : none; 
padding : 0; 
margin : 0; 
font-family : MV boli; 
} 
#nav a { 
font-weight : bold; 
color : #ffffff; 
} 
#nav a { 
text-decoration : none; 
} 
#nav ul  li  ul li a { 
display : block; 
font-weight : normal; 
color : #0000a0; 
} 
#nav ul  li  ul li a:hover { 
display : block; 
width : 157px; 
background : transparent url("./styles/smenu_sel2.png") no-repeat; 
} 
ul li { 
float : left; 
position : relative; 
width : 157px; 
text-align : center; 
cursor : default; 
border : 1px solid #969696; 
} 
ul li#first { 
border-left-width : 2px; 
} 
ul li#last { 
border-right-width : 2px; 
} 
ul li ul { 
display : none; 
position : absolute; 
top : 100%; 
left : 0; 
font-weight : bold; 
background-color : #fff; 
border-right : 1px solid #666666; 
border-left : 1px solid #666666; 
border-bottom : 1px solid #666666; 
} 
ul li > ul { 
top : auto; 
left : 0; 
width : 157px; 
} 
ul li  ul li { 
display : block; 
background : transparent url("./styles/smenu_def.png") no-repeat; 
border : 0; 
width : 157px; 
} 
ul li:hover ul { 
display : block; 
}
ul li.over ul { 
display : block; 
} 
.tab { 
margin-left : 5em; 
} 
.tab3 { 
margin-left : 3em; 
}



tu as une autre idée ?
merci d'avance.
a
Ludo
Ola, j'ai voulu tester ton site, mais j'ai l'impression que la css chargée et le html n'ont pas été modifiés ( div tjs présente dans l'arbo, css avec des ul manquants etc ...).
oui car la derniere modif a généré trop de regression, du coup hier soir je suis revenu en arriere.
je pars en we 4 jours, je m'y remets mardi.
ludo
Hello,
Je reviens sur mon pbm de menu.
J'ai simplifié le menu.
il est accessible sous : http://o2mer.net/menu_test.php

Je rapelle le probleme. Sous chrome les sous-menus apparaissent lorsque le curseur passe sur le menu. Mais pas sous IE-8.

voici le code de mon menu:

<div id="nav">
<ul>
<li id="first"><div class="divlink"><a href="" >Théorie</a></div>
<ul>
<li><a href="http://www.o2mer.net/introduction.php" >Introduction</a></li>
<li><a href="http://www.o2mer.net/cycle_azote.php" >Cycle azote</a></li>
<li><a href="http://www.o2mer.net/methodes.php" >Les méthodes</a></li>
</ul>
</li>
</ul>
</div>


ainsi que celui de ma css:


body                                                          
{
width:80%;
margin:auto;
min-width:1120px;
max-width:2000px;
}
   
a {
text-decoration: none;
}

a:link {
color: #0080e0;
}

a:visited {
color: #0000a0;
}

a:active {
color: #FF0080; 
}


a:hover {
text-decoration: none;
color:#0080e0 
}

.divlink a {
display:  block;
width: 157px; 
height: 28px;
font-family: MV boli;
font-size: 18;
background : transparent url("./styles/menu1.png") no-repeat;  
}

.divlink a:hover {
background : transparent url("./styles/menu.png") no-repeat;
}

ul {
list-style: none;
padding: 0;
margin: 0;
font-family: MV boli;
font-size: 14;
}

#nav a {
font-weight: bold;
color: #ffffff; 
}

#nav a {
text-decoration: none;
}

#nav li li a {
display:  block;
font-weight: normal;
color: #0000a0;
}

#nav li li a:hover {
display:  block;
width: 157px; 
background : transparent url("./styles/smenu_sel2.png") no-repeat; 

}


li {
float: left;
position: relative; 
width: 157px;
text-align: center;
cursor: default;
border: 1px solid #969696;

}
li#first {
border-left-width: 2px; 
}

li#last {
border-right-width: 2px; 
}


li ul {
display: none;
position: absolute;
top: 100%; 
left: 0;
font-weight: bold;
background-color: #fff;
border-right: solid 1px #666666;
border-left: solid 1px #666666;
border-bottom: solid 1px #666666;
}

li>ul {
top: auto;
left: 0; 
width: 157px
}

li li {
display: block;
float: auto;
background : transparent url("./styles/smenu_def.png") no-repeat;  
border: 0;
width: 157px; 
}


li:hover  ul, li.over  ul {
display: block;
}
Je continue mon message précédent....
SI je fais les modifs que tu me décrits, le menu n'est plus visible.

Si tu as une idée....Je te remercie d'avance.
Ludo
Bon j'ai laissé tombé, j'ai créé un nouveau menu a partir d'un existant
Merci quand même pour ton aide.
a+
Ludo
Sujet clos
Aller à