problème mise en forme de balises ul li dans IE 6

**gaboo_bl** · 11/01/2007, 12h02

Bonjour à tous,

j'ai besoin d'un coup de main pour la mise en forme d'une liste que j'utilise pour créer un menu déroulant. Ca fait deux jours que je coince sur un problème assez génant. D'abord je vous explique ce que je veux faire:

Je voudrais créer un menu avec deux premiers niveaux horizontaux, puis les niveaux suivant à la verticale, par exemple:

Menu1 Menu2 Menu3
Menu1.1 Menu1.2
Menu 1.1.1
Menu 1.1.2

Le code source ci dessous fonctionne comme je le souhaite dans Firefox 1.5, mais dans IE 6 la deuxième barre de menu apparait "écrasée" horizontalement et donc sur plusieurs lignes, et c'est illisible.

J'ai mis le javascript avec même si le problème est dans la mise en forme pour que se soit testable directement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
<script type="text/javascript">
function hover(obj){
	UL = obj.getElementsByTagName('ul');
    if(UL.length > 0){
      sousMenu = UL[0].style;
      	if (sousMenu.display == 'none'||sousMenu.display == ''){
      		sousMenu.display = 'block';
      	}else{
      	    sousMenu.display = 'none';
      	}	
   }
}
function setHover(){
  LI = document.getElementById('menu').getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
    LI[i].onmouseover = function(){
      hover(this);
      }
   LI[i].onmouseout = function(){
      hover(this);
    }
  }
  }
 
</SCRIPT>
<style type="text/css">
li.horiz {
display: block;
float: left;
padding-right: 0.2em;
}
ul {list-style:none;
margin-left: 0px;
padding-left: 0px;
display: none;
position: absolute;
left: 0px;
width: 100%
}
ul#menu{
display: block;
position: abxolute;
left: 0px;
}
</style>
</head>
<body onload="setHover()">
<UL id="menu">
<LI class= "horiz">Item 1
   <UL>
      <LI class= "horiz">Sub Item 1.1
     <ul>
         <LI>Super Sub Item 1.1
         <LI>Super Sub Item 1.2
      </ul>
      <LI class= "horiz">Sub Item 1.2
      <LI class= "horiz">Sub Item 1.3
   </UL>		
<LI class= "horiz">Item 2
   <UL>
      <LI class= "horiz">Sub Item 2.1
      <LI class= "horiz">Sub Item 2.2
   </UL>
<LI class= "horiz">Item 3
</UL>
</BODY>
</HTML>

Voilà, si quelqu'un peut m'aider à obtenir le même résultat dans les deux navigateurs, voire même simplement avoir le rendu correct dans IE à la rigueur, çà m'aiderait beaucoup.

Merci d'avance.

**Eric Berger** · 11/01/2007, 16h02

qu'est-ce que c'est que ce code pourri!?!?! On ferme les balises, sioulplait!!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<UL id="menu">
<LI class= "horiz">Item 1</li>
   <UL>
      <LI class= "horiz">Sub Item 1.1</li>
     <ul>
         <LI>Super Sub Item 1.1</li>
         <LI>Super Sub Item 1.2</li>
      </ul>
      <LI class= "horiz">Sub Item 1.2</li>
      <LI class= "horiz">Sub Item 1.3</li>
   </UL>		
<LI class= "horiz">Item 2</li>
   <UL>
      <LI class= "horiz">Sub Item 2.1</li>
      <LI class= "horiz">Sub Item 2.2</li>
   </UL>
<LI class= "horiz">Item 3</li>
</UL>

Et pour la mise en page, tu peux ajouter ça dans ta feuille de style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
LI{
  white-space: nowrap;
}

**Eric Berger** · 11/01/2007, 16h04

z'ai pas regardé ton code en entier

faut ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

white-space: nowrap;

dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
li.horiz {
 
}

**trotters213** · 11/01/2007, 16h12

Pense à mettre toutes tes balises en minuscules

Un petit conseil (qui va te faire gagner du temps et qui fera gagner du temps de chargement aux personnes qui viendront voir ton site) : au lieu de faire class= "horiz" dans tous les li de ton menu, tu ne mets rien et pour leur filer un style dans le fichier CSS tu fais #menu li {...}

**gaboo_bl** · 11/01/2007, 16h22

Oui désolé pour les balises c'est du code repompé sur le web et je l'ai vu qu'après avoir posté. Bon j'ai essayé pas mal de trucs depuis ce midi nottament essayer avec des div au lieu de listes ul... toujours la même histoire, çà passe niquel dans firefox et çà ne passe pas dans IE.
Voici le code à ce stade de mes recherches:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test page </title>
<script type="text/javascript">
function hover(obj){
	ssMenu = obj.getElementsByTagName('div');
    if(ssMenu.length > 0){
      sousMenu = ssMenu[0].style;
      	if (sousMenu.display == 'none'||sousMenu.display == ''){
      		sousMenu.display = 'block';
      	}else{
      	    sousMenu.display = 'none';
      	}	
   }
} 
</script>
<style type="text/css">
div {
	float: left; 
	padding-right: 30px;
	display:block;
	white-space: nowrap;
}
div.menu {
	position: absolute;
	left: 0 px;
	top: 0px;
	width: 100%;
}
div.menubar { 
	position: absolute;
	left: 0px;
	top: 20px;
}
</style>
</head>
<body >
<div class="menu" id="menu">
	<div onmouseover="hover(this)" onmouseout="hover(this)">Item 1
		<div class="menubar">
			<div>Sub Item 1.1</div>
			<div>Sub Item 1.2</div>
			<div>Sub Item 1.3</div>
		</div>
	</div>
	<div onmouseover="hover(this)" onmouseout="hover(this)">Item 2
		<div class="menubar">
			<div>Sub Item 2.1</div>
			<div>Sub Item 2.2</div>
		</div>
	</div>
	<div onmouseover="hover(this)" onmouseout="hover(this)">Item 3</div>
</div>
</BODY>
</HTML>

Je l'ai largement simplifié, histoire de me concentrer sur le problème. L'idée est maintenant d'avoir juste les deux lignes de menu horizontales. Par contre la deuxième ligne doit commencer au même niveau que la première, quelque soit le sous menu affiché. Je sais pas si çà vous parait clair, sinon testez le script ci dessus sous firefox, c'est exactement ce que je veux.
J'ai testé le white-space, çà me permet d'avoir les éléments de sous menus sur une seule ligne dans IE, mais les div eux mêmes s'affichent toujours l'un en dessous de l'autre, donc çà ne résoud qu'une partie du problème.

Merci de vos réponses en tout cas

**Eric Berger** · 11/01/2007, 16h25

un div implique forcément un retour à la ligne, si tu n'en veux pas c'est un span qu'il faut utiliser

**trotters213** · 11/01/2007, 16h28

Ton menu ne peux pas fonctionner : tu fais la même chose que la souris passe sur un élément de la liste ou qu'il en sorte.
Utilise ul et li au lieu des div.

**gaboo_bl** · 11/01/2007, 16h45

Eric > mes div sont des blocs flottants (display: block et float:left), donc çà n'entraine pas forcément de retour à la ligne. D'ailleurs si çà implique un retour à la ligne, pourquoi est ce que firefox ne le fait pas?

trotters> Ma fonction javascript gère les deux cas, donc effectivement je fais la même chose que j'entre dans le div ou que j'en sorte, c'est normal. Et sinon j'ai essayé la même chose avec ul et li, et j'ai un résultat similaire, ce qui se tient, puisque les ul li ont globalement le même comportement que div mais avec des options en plus.

Peut être avez vous remarqué que j'ai retiré la partie css qui cache les menus par défaut. Ce qui m'étonne le plus, c'est qu'en fait au chargement mes div sont bien placé même dans IE. Je ne sais pas si çà fait la même chose chez vous, mais j'ai l'impression que par défaut ie n'affecte pas un display "block" aux div (alors que c'est dans mon CSS), mais plutôt une valeur indéfinie, que dans ce cas les div se placent correctement, puis quand on remet un display "block" par javascript ie perd les pédales.

Merci de suivre mon problème en tout cas, parce que je commence à avoir une attaque de css au cerveau et je voit des <div> et des <li> partout ou je regarde. Je pense que mon quotat de résistance au désir de lancer mon PC par la fenêtre va bientôt être atteint.

PS : Eric > En fait tes balises span, çà vient de me donner une idée pour arriver à mon résultat initial. Je teste et je vous dis si çà le fait ou pas.

**MasterOfChakhaL** · 11/01/2007, 17h34

Salut,

Je ne sais pas si ca va résoudre ton souci, mais je crois que l'origine du problème vient du fait que lorsque tu fais un float, la largeur s'adapte au contenu.

Je ne connais pas les détails mais l'algorithme d'IE est différent de autres, à croire qu'il maximise le nombre de sauts de ligne.

Le 100% que tu mets sur tes ul est relatif au parent. Je serais toi, j'essaierai d'enlever la largeur.
Je pense qu'une vrai solution consiste à éviter les float left, en mettant des display: inline; par exemple.

Tu as quelques erreurs de syntaxes dans ton css, j'ai repéré qu'il manquait un ; et tu as un abxolute dans ton code.

Je pense que le validateur css devrait t'aider.

**gaboo_bl** · 12/01/2007, 10h18

Bon j'ai en partie résolu le problème grâce aux balises <span>. Merci à Eric pour cette idée. En fait si on reprend le deuxième code source que j'ai posté et qu'on remplace les <div> Sub Item </div> par des <span>, çà fonctionne dans les deux navigateurs.

Par contre j'ai essayé de placer des listes ul à l'interieur des balises <span>, mais le placement ne se fait pas correctement dans les deux navigateurs. Je n'ai pas trop poussé la recherche, j'ai supposé qu'on ne peut pas mettre de bloc avec retour à la logne dans une balise span. Si quelqu'un peu me confirmer ou infirmer cela çà m'interesse.

Je ne vais pas chercher plus loin pour les sous menu verticaux car c'était du "bonus" par rapport à la demande initiale et que j'ai pas de temps que çà à y consacrer d'autant que j'ai bien mes deux niveaux de menu affichés horizontalement sans décalage.

Merci à tous!

**Eric Berger** · 12/01/2007, 10h38

Envoyé par gaboo_bl

j'ai supposé qu'on ne peut pas mettre de bloc avec retour à la logne dans une balise span. Si quelqu'un peu me confirmer ou infirmer cela çà m'interesse.

Si si, on peut.... par-contre certains styles peuvent être appliqués à un DIV et pas à un SPAN. Je glisse en passant que l'editeur webexpert (qui peut être obtenu gratuitement via developpez) est particulièrement pratique pour voir quels styles sont appliquables ou non en fonction du type de balise.

problème mise en forme de balises ul li dans IE 6

CSS

Discussions similaires

Partager

Partager