Discussion :

[dedel53]

Bonjour

J'ai réalisé un menu déroulant pour lequel je mets une width à 100% sur la li afin que la largeur s'adapte en fonction du contenu. Mais le problème c'est que sur IE 6 et IE7 cela me décale tout alors que sous FF cela marche à merveille. Par contre si je mets une largeur fixe mes problèmes sont résolus mais je veux pouvoir faire une sous menu dynamique

Quelqu'un a une petite idée?? Merci de votre aide

Voici mon code css

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
 
ul#menu_principal ul.sousmenu {
  border: 0;
  position:absolute;
  z-index: 5;
  padding: 5px 0px 0px 0px;
  text-transform:none;
  display:none;
  margin-left:0px;
}
 
ul#menu_principal ul.sousmenu li {
  background: none;
  border: 0;
  display: block;
  clear: both;
  float:left;
  /*width:100%;*/
  width:200px;
}

[BnA]

Le code que tu indiques n'est, j'espère, pas l'entièreté de ton menu!

Poste-nous l'HTML et la totalité des classes associées au menu, ainsi que le Javascript si tu en utilises... Tu auras plus de chance d'avoir une réponse!

[dedel53]

voici mon css

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
 
 
ul#menu_principal ul.sousmenu {
  border: 0;
  position:absolute;
  z-index: 5;
  padding: 5px 0px 0px 0px;
  text-transform:none;
  display:none;
  margin-left:0px;
 
width:auto;
}
 
ul#menu_principal ul.sousmenu li {
  background: none;
  border: 0;
  float:left;
  width:100%;
  clear: both;
 
 
 
  /*width:200px;*/
}
 
ul#menu_principal ul.sousmenu li.last a.bouton_ssmenu span, ul#menu_principal ul.sousmenu li.first a.bouton_ssmenu span, ul#menu_principal ul.sousmenu li a.bouton_ssmenu span{
font-size: 0.9em;
color: #fff;
display: block;
padding-left:13px;
padding-top:1px;
padding-right:13px;
height:17px;
}
 
ul#menu_principal ul.sousmenu li.last a.bouton_ssmenu, ul#menu_principal ul.sousmenu li.first a.bouton_ssmenu,ul#menu_principal ul.sousmenu li a.bouton_ssmenu{
display:block;
}
 
ul#menu_principal ul.sousmenu li a.bouton_ssmenu{
background:url(images/item_ss_menu_gauche.gif) no-repeat left top;
}
 
ul#menu_principal ul.sousmenu li a.bouton_ssmenu span{
background:url(images/item_ss_menu_droite.gif) no-repeat right top;
margin-right:-2px;
}
ul#menu_principal ul.sousmenu li.first a.bouton_ssmenu{
background:url(images/first_item_ss_menu_gauche.gif) no-repeat left top;
}
ul#menu_principal ul.sousmenu li.last a.bouton_ssmenu{
background:url(images/last_item_ss_menu_gauche.gif) no-repeat left top;
}
ul#menu_principal ul.sousmenu li.first a.bouton_ssmenu span{
background:url(images/first_item_ss_menu_droite.gif) no-repeat right top;
margin-right:-2px;
}
ul#menu_principal ul.sousmenu li.last a.bouton_ssmenu span{
background:url(images/last_item_ss_menu_droite.gif) no-repeat right top;
margin-right:-2px;
}

voici mon html

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
 
<div id="menu">
          <ul id="menu_principal">
            <li><a class="bouton_menu" href="#"><span>Présentation</span></a>
              <ul class="sousmenu">
                <li class="first"><a class="bouton_ssmenu" href="#"><span>Test 1000</span></a></li>
                <li class="last"><a class="bouton_ssmenu" href="#"><span>Test 2</span></a></li>
              </ul>
            </li>
            <li><a class="bouton_menu" href="#"><span>Formation</span></a>
 
              <ul class="sousmenu">
                <li class="first"><a class="bouton_ssmenu" href="#"><span>Test 3</span></a></li>
                <li class="last"><a class="bouton_ssmenu" href="#"><span>Test 4</span></a></li>
              </ul>
 
            </li>
            <li>
            	<a class="bouton_menu" href="#"><span>Recherche</span></a>
            </li>
            <li><a class="bouton_menu" href="#"><span>Documentation</span></a></li>
            <li><a class="bouton_menu selected" href="#"><span>Campus</span></a>
              <ul class="sousmenu">
                <li class="first"><a class="bouton_ssmenu" href="#"><span>Handicap</span></a></li>
                <li><a class="bouton_ssmenu" href="#"><span>Association</span></a></li>
                <li><a class="bouton_ssmenu" href="#"><span>Culture</span></a></li>
                <li><a class="bouton_ssmenu" href="#"><span>Sport</span></a></li>
                <li class="last"><a class="bouton_ssmenu" href="#"><span>Portail Etudiant Portail Etudiant</span></a></li>
              </ul>
            </li>
            <li><a class="bouton_menu" href="#"><span>International</span></a></li>
            <li><a class="bouton_menu" href="#"><span>Culture</span></a></li>
            <li id="dernier_item"><a class="bouton_menu" href="#"><span>Actualités</span></a></li>
          </ul>
        </div>

si tu as une solution je suis preneuse car je galere depuis un jour dessus

merci

[BnA]

Ton menu il fonctionne en Javascript ou en full CSS?

[dedel53]

l'affichage se fait avec du jquery

[Macmillenium]

Bonsoir,

Tu veux flotter tes <li> et en même temps tu fais dégager les flottants avec le clear:both;, c'est un peu contradictoire
Il faudrait enlever le clear:both; et rajouter un float:left; sur tes <a> (pour IE6-)

J'ai réalisé un menu déroulant pour lequel je mets une width à 100% sur la li afin que la largeur s'adapte en fonction du contenu

Renseigner un width:100% est inutile sauf dans le cas d'un float:left/right, position:absolute;, position:fixed; et display:table/table-cell/table-row étant donné que l'élément doté de l'une de ces propriétés s'adapte à la taille de son contenu et non pas son conteneur.
Ceci dit, tu n'as pas besoin d'un width:100%;

Code css :

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
 
ul#menu_principal ul.sousmenu {
  border: 0;
  position:absolute;
  z-index: 5;
  padding: 5px 0px 0px 0px;
  text-transform:none;
  display:none;
  margin-left:0px;
}
 
ul#menu_principal ul.sousmenu li {
  background: none;
  border: 0;
  /* display: block; */
  /* clear: both; */
  float:left;
  /*width:100%;*/
  /* width:200px; */
}

Si tu veux te simplifier la vie, évite au maximum de conférer le Layout aux list-items, vu les problèmes de rendu que cela pose.

A ta place je ferai ceci :

Code css :

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
 
ul#menu_principal ul.sousmenu {
  border: 0;
  position:absolute;
  z-index: 5;
  padding: 5px 0px 0px 0px;
  text-transform:none;
  display:none;
  margin-left:0px;
}
 
ul#menu_principal ul.sousmenu li {
  background: none;
  border: 0;
  display:inline;
  /* display: block; */
  /* clear: both; */
  /* float:left; */
  /*width:100%;*/
  /* width:200px; */
}

ul#menu_principal ul.sousmenu li a {
  float:left;
}

Et styler uniquement les <a>.

[dedel53]

J'ai essayé mais rien y fait j'ai le menu sur une ligne et la largeur de chaque li dépend du contenu du a

tu as une autre idée?

[Macmillenium]

J'ai essayé mais rien y fait j'ai le menu sur une ligne et la largeur de chaque li dépend du contenu du a

J'ai réalisé un menu déroulant pour lequel je mets une width à 100% sur la li afin que la largeur s'adapte en fonction du contenu.

Je comprends alors pourquoi tu as float:left et clear:both en même temps.

Code css :

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
ul#menu_principal ul.sousmenu {
  border: 0;
  position:absolute;
  z-index: 5;
  padding: 5px 0px 0px 0px;
  text-transform:none;
  display:none;
  margin-left:0px;
  width:200px; /* exemple à adapter */
}
 
ul#menu_principal ul.sousmenu li {
  background: none;
  border: 0;
  display:inline;
  /* display: block; */
  /* clear: both; */
  /* float:left; */
  /*width:100%;*/
  /* width:200px; */
}

ul#menu_principal ul.sousmenu li a {
 display:block;
}

Tu n'as pas besoin de flotter tes éléments, passer le <a> en display:block permet d'occuper toute la largeur de son conteneur ul#menu_principal ul.sousmenu

[dedel53]

tu mets une width à 200px mais je ne veux justement pas fixer une largeur

[Macmillenium]

tu mets une width à 200px mais je ne veux justement pas fixer une largeur

C'est un exemple, si l'un des conteneurs parents a une largeur fixe, mets juste width:100% sur ul#menu_principal ul.sousmenu vu qu'il est en absolute (Cf Mon message plus haut).