Problèmes naviagation css

Question

chris2112

5 Oct 2006 à 14:48

Bonjour,

J'ai construit un navigation en css avec sous menu déroulant, elle marche nikel sur firefox, mais sur IE à moins d'utiliser un javascript elle ne fonctionne pas, n'ayant pas une très bonne connaissance en javascipt j'ai trouvé un code sur un tutorial.
Et ça déconne un peu au niveau de l'apparition des sous-menus.

Si vous avez une solution... Merci d'avance

Voici le code utilisé

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>

<style>
ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  width: 150px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
ul li {
  position: relative;
  display: block;
  color: #ffffff;
  background-color: #999999;
  padding: 5px;
  border: 1px solid #000000;
  margin-bottom: 1px;
}
li ul {
  position: absolute;
  left: 150px;
  top: -1px;
  display: none;
}
li ul li {
  background-color: #000000;
}
ul li a {
  color: #ffffff;
  text-decoration: none;
}
ul li a:hover {
  text-decoration: underline;
}
li:hover ul, li.over ul {
  display: block;
}
</style>

</head>

<body>
<div style="float: left; width: 150px; margin-right: 10px;">
<ul id="nav">
  <li><a href="link">Home</a></li>
  <li><a href="link">About</a>
    <ul>
	<li><a href="link">History</a></li>
	<li><a href="link">Team</a></li>
	<li><a href="link">offices</a></li>
	</ul>
  </li>
  <li><a href="link">Services</a>
    <ul>
	<li><a href="link">Public</a></li>
	<li><a href="link">Private</a></li>
	<li><a href="link">Other</a></li>
	</ul>
  </li>
  <li><a href="link">Contact</a>
    <ul>
	<li><a href="link">Map</a></li>
	<li><a href="link">Adress</a></li>
	<li><a href="link">Telephone</a></li>
	</ul>
  </li>
  <li><a href="link">Visit</a>
    <ul>
	<li><a href="link">Programme</a></li>
	<li><a href="link">Date</a></li>
	<li><a href="link">Calenda</a></li>
	</ul>
   </li>
</ul> 
</div> 
<div style="float: left; background-color:#990000; width: 250px; padding: 5px;  font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px;">
fgfgdfgdfgio dfgodfgn g dfgdf gdf g dgdfgdgdfgdfg dg dfgdf gdfjkg dfkg dg gdgjkdgdfkgdfgdjfkgg dfgj df
</div>  
</body>
</html>

[/i]
Modifié par chris2112 (05 Oct 2006 - 14:57)

Raphael

Administrateur

5 Oct 2006 à 14:56

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

chris2112

5 Oct 2006 à 14:59

Raphael a écrit :
Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

upload/1-code.gif

Oups, désolé, Smiley confused

voila c'est fait

Zeke

5 Oct 2006 à 15:36

IE ne comprend pas la pseudo classe hover sur les LI.

pour être plus précis, IE comprend la pseudo classe UNIQUEMENT sur la balise <a>.

met le js suivant...ton problème doit venir de là je pense :


function menu_over(obj){
	if(document.all){
		listeUl = obj.getElementsByTagName("ul");
		if(listeUl.length > 0){
			sousMenu = listeUl[0].style;
			if(sousMenu.display == "none" || sousMenu.display == ""){
				sousMenu.display = "block";
			}else{
				sousMenu.display = "none";
			}
		}
	}
}

function menu(){
	listeLi = document.getElementById("[b]menu[/b]").getElementsByTagName("li");
	nLI = listeLi.length;
	for(i=0; i < nLI; i++){
		listeLi[i].onmouseover = function(){
			menu_over(this);
		}
		listeLi[i].onmouseout = function(){
			menu_over(this);
		}
	}
}

pense à modifer le mot en gras (il doit correspondre à l'id de ton menu.
Sinon, ajoute sur le onload du body, l'appel à la fonction menu();[/i][/i]

beb'z

5 Oct 2006 à 17:03

Zeke a écrit :
pour être plus précis, IE comprend la pseudo classe UNIQUEMENT sur la balise <a>.

il ne prend pas en compte aussi la balise <button> ? Il me semble que j'ai déja fait un truc du genre...
(enfin bon, rien à voir avec le probleme de départ)

chris2112

5 Oct 2006 à 17:37

Zeke a écrit :
IE ne comprend pas la pseudo classe hover sur les LI.

pour être plus précis, IE comprend la pseudo classe UNIQUEMENT sur la balise <a>.

met le js suivant...ton problème doit venir de là je pense :
function menu_over(obj){
	if(document.all){
		listeUl = obj.getElementsByTagName("ul");
		if(listeUl.length > 0){
			sousMenu = listeUl[0].style;
			if(sousMenu.display == "none" || sousMenu.display == ""){
				sousMenu.display = "block";
			}else{
				sousMenu.display = "none";
			}
		}
	}
}

function menu(){
	listeLi = document.getElementById("[b]menu[/b]").getElementsByTagName("li");
	nLI = listeLi.length;
	for(i=0; i < nLI; i++){
		listeLi[i].onmouseover = function(){
			menu_over(this);
		}
		listeLi[i].onmouseout = function(){
			menu_over(this);
		}
	}
}
pense à modifer le mot en gras (il doit correspondre à l'id de ton menu.
Sinon, ajoute sur le onload du body, l'appel à la fonction menu();[/i][/i]

Merci, j'ai suivi tes instructions et ça ne marche pas non plus
Pour infos voici le code modfifé avec tes remarques

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>
function menu_over(obj){
	if(document.all){
		listeUl = obj.getElementsByTagName("ul");
		if(listeUl.length > 0){
			sousMenu = listeUl[0].style;
			if(sousMenu.display == "none" || sousMenu.display == ""){
				sousMenu.display = "block";
			}else{
				sousMenu.display = "none";
			}
		}
	}
}

function menu(){
	listeLi = document.getElementById("menu").getElementsByTagName("li");
	nLI = listeLi.length;
	for(i=0; i < nLI; i++){
		listeLi.onmouseover = function(){
			menu_over(this);
		}
		listeLi[i].onmouseout = function(){
			menu_over(this);
		}
	}
}
</script>

<style>
ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  width: 150px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
ul li {
  position: relative;
  display: block;
  color: #ffffff;
  background-color: #999999;
  padding: 5px;
  border: 1px solid #000000;
  margin-bottom: 1px;
}
li ul {
  position: absolute;
  left: 150px;
  top: -1px;
  display: none;
}
li ul li {
  background-color: #000000;
}
ul li a {
  color: #ffffff;
  text-decoration: none;
}
ul li a:hover {
  text-decoration: underline;
}
li:hover ul, li.over ul {
  display: block;
}
</style>

</head>

<body onload="menu();">
<div style="float: left; width: 150px; margin-right: 10px;">
<ul id="menu">
  <li><a href="link">Home</a></li>
  <li><a href="link">About</a>
    <ul>
	<li><a href="link">History</a></li>
	<li><a href="link">Team</a></li>
	<li><a href="link">offices</a></li>
	</ul>
  </li>
  <li><a href="link">Services</a>
    <ul>
	<li><a href="link">Public</a></li>
	<li><a href="link">Private</a></li>
	<li><a href="link">Other</a></li>
	</ul>
  </li>
  <li><a href="link">Contact</a>
    <ul>
	<li><a href="link">Map</a></li>
	<li><a href="link">Adress</a></li>
	<li><a href="link">Telephone</a></li>
	</ul>
  </li>
  <li><a href="link">Visit</a>
    <ul>
	<li><a href="link">Programme</a></li>
	<li><a href="link">Date</a></li>
	<li><a href="link">Calenda</a></li>
	</ul>
   </li>
</ul> 
</div> 
</body>
</html>

[/i]
Modifié par chris2112 (05 Oct 2006 - 17:39)

Sujet clos