[Résolu] Menu dynamique en css et affichage sous IE

[Fuvola]

Bonjour à tous,
J'ai mis sur mon site un menu déroulant en css, que j'ai pu adapter avec quelques tâtonnements. Seul petit problème, les sous-menus sont décalés vers la gauche sous IE6 (comme il s'agit d'un menu sous forme de liste, je soupçonne qu'il s'agit d'une histoire de marges par défaut entre <ul> et <li>). Je viens d'éplucher minutieusement ma feuille de style sans réussir à trouver le défaut, et je commence à m'arracher les cheveux...
A part cela, deux autres petites questions du même ordre: comment faire disparaître l'espace disgracieux entre l'en-tête et le haut de la page, et comment faire en sorte que les rubriques du menu de gauche changent de couleur au passage de la souris (j'ai essayé pas mal de combinaisons dans la feuille de style, sans succès). Merci d'avance aux bonnes âmes qui peuvent m'aider!


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Mongo Bob]

Peux-tu donner l'adresse de ton site ou le code utilisé? Là, c'est un peu abstrait...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.5) Gecko/2008121622 Ubuntu/8.10 (intrepid) Firefox/3.0.5

[Fuvola]

Bonjour Mongo Bob,
L'adresse est dans mon profil. C'est vrai, j'aurais pu le préciser!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Zefling]

Et si tu mets ?

Code : Tout sélectionner

ul.navlist ul {
   display:none;
   position:relative;
}

<< Type qui se bat avec un menu du même type en multi-niveaux.



Je pense que si j'arrive à résoudre le problème de IE7 ça sera un exploit.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[Fuvola]

Bonjour Zefling, j'ai essayé ce que vous me proposez, mais le résultat n'a pas été très convaincant, avec la position "relative", les sous-menus repoussent le corps du texte lorsqu'ils se déroulent. Merci quand même pour la réponse!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Zefling]

Bonjour Zefling, j'ai essayé ce que vous me proposez, mais le résultat n'a pas été très convaincant, avec la position "relative", les sous-menus repoussent le corps du texte lorsqu'ils se déroulent. Merci quand même pour la réponse!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

L'outil de développement de IE m'aurais menti (pourquoi je ne suis pas étonné). Faudrait que j'essaie avec une page récupéré.

Code : Tout sélectionner

ul.navlist {
	position :absolute;
}
ul.navlist ul {
  display: none;
  position: reletive;
}

J'avais oublié un petit détail.

[Mongo Bob]

J'ai pas compris :

Code : Tout sélectionner

ul.navlist {
   position :absolute;
}
ul.navlist ul {
  display: none;
  position: relative;
}

A quoi sert le "display:none" pour les sous-menus? Ca influe sur les marges par défaut?

je soupçonne qu'il s'agit d'une histoire de marges par défaut entre <ul> et <li>)

Félicitations... tu vas abandonner la flûte pour le webmastering, bientôt... Marges par défaut de valeurs différentes selon les navigateurs, bien sûr...
Ca m'arrangerait parfois, que <ul> ait des marges par défaut nulles, comme les <div>. Et j'aimerais bien connaître leurs valeurs par navigateurs (sans doute dans une doc que j'ai pas encore réellement cherché).

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[Zefling]

J'ai pas compris :

Code : Tout sélectionner

ul.navlist {
   position :absolute;
}
ul.navlist ul {
  display: none;
  position: relative;
}

A quoi sert le "display:none" pour les sous-menus? Ca influe sur les marges par défaut?

Ça ne change rien au marche. Simplement ça change le repère. Si je ne mets pas les ul.navlist en « absolute », la position « relative » ne se ferra pas de la même façon et il y aura un décalage. J'avoue que sur le coup je serait pas trop expliquer pour quoi mais « absolute» semble créer un nouveau référentiel niant tout le reste ce qui est très pratique pour ce genre de trucs.

Il y a moyen de faire des trucs super complexe en CSS (image-ci dessus, j'ai presque l'équivalent d'une barre de menu sans aucune ligne de code JS), mais après ça demande une sacrée gymnastique. (Malheureusement à ce petit jeu là IE6 ne comprend rien, et IE7 est vite largué).

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[Fabrice.Tres.Net]

D'où l'importance de remettre les choses à 0 en début de css par

Code : Tout sélectionner

* {margin:0 ; padding:0} /* initialise tous les éléments avec ni marge, ni bourrage*/

[Fuvola]

Rebonjour à tous!
1°) alors, pour ma troisième question (les menus de gauche), j'ai trouvé toute seule, il fallait mettre:

Code : Tout sélectionner

#menu4 li :hover {
display: block;
background-color: #bf9459;
}

au lieu de:

Code : Tout sélectionner

#menu4 li a:hover {
display: block;
background-color: #bf9459;
}

2°) pour la deuxième question, apparemment le problème ne vient pas du css, c'est le menu en php qui met la pagaille. J'ai bricolé avec une marge négative, faute de mieux...
3°) J'avais remis toutes les marges à 0, mais cela ne change rien, pour cette histoire de décalage sous IE. J'ai donc mis une mini-feuille de style spéciale IE:

Code : Tout sélectionner

ul.navlist ul {
	margin-left: -58px
}

En revanche, j'aimerais bien qu'on me dise ce que cela donne sous IE7, il n'est pas installé sur ma machine...
4°)

Félicitations... tu vas abandonner la flûte pour le webmastering, bientôt...

Pas de danger!!!...d'ailleurs, j'y retourne de ce pas...


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Zefling]

En revanche, j'aimerais bien qu'on me dise ce que cela donne sous IE7, il n'est pas installé sur ma machine...

Tout l'explique... C'était pour IE7 ma correction.

J'ai fini par abandonner IE6 (pour mes sites persos). Ceux qui sont encore dessus ne font que ralentir l'évolution.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[Mongo Bob]

Si je ne mets pas les ul.navlist en « absolute », la position « relative » ne se ferra pas de la même façon et il y aura un décalage.

Oui, c'est bien ça, c'est que tout simplement, si on veut avoir les avantages spécifiques de "relative" qui sont

• de laisser dans le flux
• éventuellement en utilisant les propriétés "top", "left", "right" et "bottom" (exactement comme pour "absolute")
• en tout cas de déplacer un élément par rapport à son 1er conteneur

il faut savoir que ces avantages ne vont jouer que pour un élément "relative" contenu dans et par rapport à un autre élément positionné, "relative" aussi ou "absolute", ou directement dans le <body> qui est positionné par défaut.
C'est sûr que si tu mets le conteneur "ul.navlist" dans le flux (que tu supprimes le positionnement) catastrophe, tout le système part en quenouille (pour rester poli).
... mais c'est à propos aussi de "display:none" que je m'interrogeais, à+...

D'où l'importance de remettre les choses à 0 en début de css par
Code:
* {margin:0 ; padding:0} /* initialise tous les éléments avec ni marge, ni bourrage*/

Ceci ne mettra pas à 0 les marges par défaut des <ul>?
d'ailleurs

J'avais remis toutes les marges à 0, mais cela ne change rien, pour cette histoire de décalage sous IE.

En revanche, j'aimerais bien qu'on me dise ce que cela donne sous IE7, il n'est pas installé sur ma machine...

Impeccable avec le 7 aussi, bravo.

alors, pour ma troisième question (les menus de gauche), j'ai trouvé toute seule, il fallait mettre:
Code:
#menu4 li :hover {
display: block;
background-color: #bf9459;
}

au lieu de:
Code:
#menu4 li a:hover {
display: block;
background-color: #bf9459;
}

c'est plutôt le contraire que tu as fait : ":hover" pas bon, "a:hover" correct!





Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[Fabrice.Tres.Net]

D'où l'importance de remettre les choses à 0 en début de css par
Code:
* {margin:0 ; padding:0} /* initialise tous les éléments avec ni marge, ni bourrage*/

Ceci ne mettra pas à 0 les marges par défaut des <ul>?

Si puisque l' * désigne tous les éléments mais cela offre l'avantage de partir dans le même état quelque soit le navigateur... bref cela gomme les différentes initialisation qui nous pourrissent la vie!

[Mongo Bob]

Oui, tu as raison en fait c'est logique :
Si tu donnes n'importe quelle valeur "x" à une marge, cette valeur remplace la valeur par défaut, y compris dans le cas où "x" =0, à+...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[Zefling]

Si je ne mets pas les ul.navlist en « absolute », la position « relative » ne se ferra pas de la même façon et il y aura un décalage.

Oui, c'est bien ça, c'est que tout simplement, si on veut avoir les avantages spécifiques de "relative" qui sont

• de laisser dans le flux
• éventuellement en utilisant les propriétés "top", "left", "right" et "bottom" (exactement comme pour "absolute")
• en tout cas de déplacer un élément par rapport à son 1er conteneur

il faut savoir que ces avantages ne vont jouer que pour un élément "relative" contenu dans et par rapport à un autre élément positionné, "relative" aussi ou "absolute", ou directement dans le <body> qui est positionné par défaut.
C'est sûr que si tu mets le conteneur "ul.navlist" dans le flux (que tu supprimes le positionnement) catastrophe, tout le système part en quenouille (pour rester poli).

L'intérêt ici est de créer le premier de UL comme un nouveau référentiel Bien entendu il faut donc faire comme si il n'existe plus pour le reste. Bon après, c'est le seul moyen pour que IE7 comprennent. Normalement c'est pas obligatoire (enfin suivant le cas).

... mais c'est à propos aussi de "display:none" que je m'interrogeais, à+...

C'est juste pour que le second niveau ne soit pas visible (none = n'existe pas pour le moteur de rendu contraient à visible qui créer l'espace même si il n'affiche rien)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6