Display:none et opacity, bug ? Et z-index enfants, bug ?

Bonjour a tous,

J'ai un petit souci sur cette page :
http://aspirine.legtux.org

Je me suis pas mal creusé la tête pour avoir une apparition des menus assez sympa, je me suis finalement arrêté sur celle là.

Ce choix m'a été "imposé" par un bug que je n'ai pas réussi a résoudre ni comprendre.
Simplement, la barre est fixe et possède un z-index de 200. Ce qui se trouve dessus (liens etc) a un z-index de 201. Je voulais que les ul qui composent les menus qui apparaissent, viennent d'au dessus, passent EN DESSOUS de cette barre fixe et se place la ou elles sont actuellement.Mais impossible d'y parvenir, quoique j'y fasse, meme avec un z-index de -900000 (si j'ai testé ) le menu passe AU DESSUS de ma barre fixe =/

Alors z-index bugue t'il sur les balises enfants ?

J'ai donc pour l'instant décidé de le faire passer par en dessous. Mais ca me pose un nouveau probleme.
En effet, pour l'effet de transition, j'utilise un opacity: 0 sur le div quand le lien qui le fait apparaitre n'est pas survolé. Sur un lien ~ ul je fais passer cette opacity à 1, ce qui fait cette transition. Et pour que le menu reste en place lorsqu'on a quitté le survol du lien et qu'on est passé au survol du lien, j'ai rajouté un ul:hover après lien ~ ul (donc lien ~ ul, ul:hover, vous me suivez ?).

Mon problème est simple : il suffit de passer la souris DESSOUS la barre de menu, pour faire apparaitre quand meme le menu, puisque le contenu est présent, pas affiché via opacity: 0, mais présent tout de meme. Je me suis, ok, on va mettre display: none quand pas survolé et display:block, quand ca l'est.

Et la....c'est le drame : pas d'effet de transition =/
Alors...bug aussi ?

Je requiers votreaide et surtout vos idées parce que la je sèche

Merci d'avance !

EDIT : à savoir que pour l'instant mon idée est de jouer sur scale(), ce qui marche presque.
Je passe d'un scale(0) à scale(1) au :hover ca marche bien puisque passer la souris sous le menu n'affecte plus cet element qui a une taille nulle, le souci c'est que cette propriété est comprise dans le "all" de transition. Or je ne veux pas qu'on voit cet effet.
Question donc :
Peut-on sélectionner uniquement DEUX propriétés pour la transition ? Parce que tous mes essais se sont soldés par un échec :
Avec transition: top, opacity .15s ease; seulement opacity est affectée. Si on inverse les deux propriétés c'est donc top qui est affectée, mais pas l'opacité.
Pareil si on déclare chaque propriété dans une autre transition :
transition: opacity .15s ease;
transition: top .15s ease;
N'affecte que top....
Modifié par Ozymandias (15 Sep 2012 - 08:27)

Bonjour,

il y a un gros problème de compréhension de ces deux propriétés.

Z-index, comme tous les css, est hérité par les enfants - ce qui est logique. Cela signifie que si un parent est placé tout en haut, le z-index des enfants se fera autour de cette position, et pas dans l'absolu. Vous me suivez ?

Dans "la vraie vie", vous auriez deux feuilles de papier, une avec votre barre fixe et une avec votre menu. Le menu au-dessus, comme désiré. La ou ça coince, c'est que vos liens sont dans votre menu : vous les dessinez donc sur la feuille du dessus > impossible de les mettre sous la feuille d'en dessous !!

La seule solution envisageable serait d'intercaler cette barre fixe entre les deux niveaux, mais ça pourrait être relativement crade...

Ps : un seul objet par z-index ! C'est certes un peu moins important aujourd'hui, mais avoir plusieurs éléments avec le même z-index crée des bugs sur les vieux IE ( et non ça n'est pas mal, la recommandation du W3C précise qu'on ne peut appliquer qu'une seule fois une certaine valeur de z-index au sein du même document ).

Concernant l'effet d'opacité, vous êtes allés un peu trop loin : au lieu d'appliquer le survol au premier lien, vous devriez l'appliquer à l'élément de liste ( <li> ) : ainsi la sous-liste que vous faites apparaître, étant comprise dans ce <li>, serait ciblée par le li:hover. Plus besoin de préciser ul:hover, et votre sélecteur serait moins complexe que ul ~ hover.

J'espère que mes explications sont claires et vous permettront d'avancer..

( Et il serait judicieux de vous inquiéter des performances et des balises / attributs obsolètes : 5 @font-face chargées, des sélecteurs interminables, la meta revisit-after, etc... )

Bonne continuation !

Bonjour,

Vos explications sont très claires et me permettent déjà de penser à des solutions pour avancer dans mon problème.
Concernant le z-index, je pensais en fait qu'une page comportait une sorte d'échelle commune du z-index et que les elements se plaçaient librement sur cette échelle sans tenir compte des parentés. Merci pour vos explications.

Pour le li général en hover, je vais modifier ca en rentrant ce soir, ca peut surement porter ses fruits, et si ca peut simplifier le code tant mieux.

Concernant les font-face, je n'en utilise que 2 en réalité, els autres étaient la pour des tests de la police ^^ Pour les sélecteurs interminables, je vais essayer d'y remédier

Merci !

EDIT : Que pensez vous de cette idée : séparer tous les contenus, pour
- barre fixe en haut dans un bloc div sans contenu enfant, avec la couleur qui est déjà la sienne, en background-image le logo placé à gauche, et un ::before qui place un lien sur ce logo. z-index de 5 disons.
- dans un nouveau div, en dehors de celui de la barre, les contenus de cette barre, un par un en div@inline-block, donc les liens principaux du menu, celui de la boite de profil et du champ de recherche. La position de ce div conteneur est aussi fixed et le z-index est de 6 pour etre visible sur la barre bleue.
- enfin pour les menus/userbox/champ de recherche à faire apparaitre, des divs (ou autre balise type bloc) séparés pour chacun, et un z-index de 4. Ainsi chaque contenu peut etre placé en top -300 et au hover des liens du conteneur fixe des liens principaux, les faire apparaitre, en les faisant passer comme prévu sous la barre fixe. Seul souci, toujours besoin d'appliquer le double sélecteur ~ bloc et lien:hover =/ Le CSS est plus compliqué que je ne le pensais ^^
Modifié par Ozymandias (16 Sep 2012 - 06:44)

Bonjour,

dans l'idée ça marcherait beaucoup mieux oui !

Par contre pour la barre fixe, je suggère plutôt de la faire à l'aide d'un ::before justement. Il ne vous reste que deux div pour le menu / sous-menu, et le logo avec le lien peut très bien être dans la première, placé à gauche. Qu'en pensez-vous ?

Pour le sélecteur, ça n'est pas bien méchant en soi. Il existe pour des cas particuliers. Le plus gros souci que j'ai perçu dans les votre sont leur trop grande précision : pas besoin de citer tous les parents de vos cibles, et je déconseille fortement les li.menu par exemple : soit vous utilisez la classe, soit le type d'élément, mais un seul suffit.

Css est un langage "simple" pour un développeur car il n'y a pas de formule, de variables, de fonction etc.. Mais pour autant il n'est pas facile à comprendre, ni aisé à mettre en oeuvre.

Bonne continuation !