28172 sujets

CSS et mise en forme, CSS3

[Résolu] Encore un menu

Bonjour le forum,
J'essaye de mettre en place un code assez "générique" pour des menus déroulants, à partir d'une structure assez simple (ci-dessous).
Je rencontre deux difficultés :
1. le menu se déroule normalement, mais les derniers éléments de chaque liste, à peu près à partir du 3e, disparaissent avant que la souris ne les aient atteints
2. malgré un z-index de 10000, les éléments déroulés passent sous les textes qui suivent dans la page
Il y a sûrement une erreur, mais où ?
Navigateurs utilisés : Firefox, Safari
Merci pour votre aide Smiley smile 


<ul class="menu">
	<li>Titre 1
		<ul>
			<li>Elément 1.1</li>
			<li>Elément 1.2</li>
			<li>Elément 1.3</li>
		</ul>
	</li>
	<li>Titre 2
		<ul>
			<li>Elément 2.1</li>
			<li>Elément 2.2</li>
			<li>Elément 2.3</li>
		</ul>
	</li>
</ul>



.menu {
    list-style: none;
    cursor: pointer;
}
.menu ul {
    width: auto;
    white-space: nowrap;
}
.menu li {
    position: relative;
    padding: 0 .5em;
    float: left;
    background-color: red;
    color: white;
}
.menu li ul {
    display: none;
    position: absolute;
    list-style: none;
    top: 1.8em;
    left: 0;
}
.menu li:hover ul {
    display: block;
}
.menu li:hover ul li {
    width: 100%;
    z-index: 10000;
}
.menu li:hover ul li:hover {
    background-color: dimgrey;
}
Rahh là là là là. J'en vois en tout cas une :

Ligne 11 de ton code CSS : padding: 0 .5em; : un espace à supprimer (0. 5em).

Manifestement, tu n'as pas fait passer ton code aux validateurs du W3C (ou autres). Je pense qu'ils t'auraient trouvé cette erreur aussi sec.

Perso, je considère qu'un z-index: 10000 est une mauvaise pratique. Si ton code est correct, un z-index de n+1 par rapport aux autres éléments doit suffire.

Tu peux aussi emballer ton menu dans une balise nav.

J'ajoute que, si cette erreur est la cause de ton problème de menu, et même si tu n'en a pas conscience, ne pas utiliser de validateurs de code avant de faire appel au membres de ce forum (ou de tout forum d'aide) constitue une certaine forme de manque de respect envers ceux-ci. On n'a pas que ça à faire et on ne devrait pas être sollicités pour des problèmes qui pourraient être résolus par un simple passage de code dans un validateur. C'est le moins que tu puisses faire pour nous aider à mieux t'aider, et si ça peux directement résoudre ton problème, tant mieux.

Bonne continuation.
Modifié par thierry (25 Sep 2017 - 13:18)
Bonjour,
Il n'y avait là nul manque de respect, d'autant que le validateur a dit : "Document checking completed. No errors or warnings to show."
Trois précisions :
1. la balise fermante est à la ligne 8 : chaque élément li de la liste principale contient son propre texte (le titre du menu) et une liste complète (les lignes du menu).
2. la définition raccourcie pour padding dans le code css indique deux valeurs (d'où l'espace) : 0 dans le sens vertical, .5em dans le sens horizontal. Même sans validateur, phpStorm est assez sympa pour me signaler les erreurs de syntaxe.
3. la feuille de style bootstrap.css, qui n'a pas vraiment été écrite par des amateurs, comporte une vingtaine d'instructions z-index dont les valeurs sont 2, 5, 10, 15, 990, 1000, 1030, 1040, 1060 et 1070...
Bonne journée
Modifié par padbrest (25 Sep 2017 - 13:43)
Autant pour moi Smiley biggrin

Ceci dit, j'invoque quelques circonstances atténuantes.

Avant la publication de ta réponse, j'ai supprimé la mention d'erreur concernant le code HTML. Je n'avais pas bien regardé l'imbrication. Mea culpa, mea maxima culpa.

a écrit :
Même sans validateur, phpStorm est assez sympa pour me signaler les erreurs de syntaxe.

Certes, mais comment puis-je savoir avec quels outils tu travailles ou comprendre pleinement les effets de ton code HTML/CSS à la seule lecture. Un padding: 0 0.5em; aurait été moins ambigu.

Pas mal de gens utilisent des valeurs CSS excessives "pour être sûr", dont, notamment, des valeurs z-index: 10000 sans raison aucune. Là encore, comment pouvais-je savoir que tu travailles avec Bootstrap qui utilise une flopée de valeurs de z-index (de toute façon, une valeur de z-index de 10000, je maintiens que c'est idiot).

Manque de connaissance de ton contexte de travail + similarité avec d'autres questions dont les auteurs n'avaient pas pris la peine de passer leurs code au(x) validateurs (comportement trop fréquent, hélas > erreur d'interprétation.

Mes excuses pour le quiproquo.

Et avec tout ça, pas de réponse à ta question. Mais avec toutes les interactions possibles avec le code CSS de Bootstrap...
Modifié par thierry (25 Sep 2017 - 15:54)
Trouvé !
Comme quoi une conversation, même si elle ne conduit pas directement à la solution, finit par bousculer le neurone qui va bien Smiley smile
J'avais considéré cette affaire de z-index comme un détail "cosmétique" qui viendrait en son temps. En fait, c'est l'utilisation des li flottants qui était en cause : z-index ne fonctionne que sur des éléments positionnés...
Il a suffi que je positionne le <div> parent général de tout ça en lui affectant le z-index (je m'en suis tenu à 2000, pour que bootstrap me laisse tranquille Smiley cligne ). Tout s’est résolu.
Merci et à bientôt pour de nouvelles aventures !
Modérateur
padbrest a écrit :
En fait, c'est l'utilisation des li flottants qui était en cause : z-index ne fonctionne que sur des éléments positionnés...

Oui, mais position: relative suffit, or les li étaient en position: relative.

Le code donné fonctionne et recouvre ce qui suit sans soucis. Le problème est extérieur au code fourni, un z-index mis sur le ul par bootstrap par exemple.
Sujet clos
Aller à