28172 sujets

CSS et mise en forme, CSS3

Sous-menu récalcitrant

Bonsoir à tous,

J'ai un petit problème avec mon sous-menu de mon menu déroulant.
Premièrement, je vous donne la page : ici.

Mon problème se situe dans la rubrique "Galerie"
J'aimerais que le sous-menu composé de : "Book", "Personnalités", "Spectacles" s'affiche à droite de "Photos" et qu'il ne s'affiche uniquement lorsque je suis sur "Photos", et pas "Vidéos", ni "Galeries".

Je suis un peu perdu avec tous les ul et les li, je n'arrive plus très bien à m'y retrouver.
Voici un aperçu du code HTML que j'ai essayé de simplifier pour que vous puissiez vous faire une idée (j'espère ne pas m'être trompé, au cas où vous pouvez toujours consulter le code source de la page): 
<ul class="mnu">
	
	<li> Galeries
		<ul class="mnu2">

			<li> Art 7 - Vidéos </li>   <!--Articles en-dessous-->
			<li> Art 8 - Photos </li>   <!--Articles en-dessous-->

		</ul> <!-- END "mnu2" -->
		
		<ul class="mnu3">

			<li> Rub 25- Photos </li>   <!--Rubrique au-dessus-->
					
				<ul class="mnu4">
						<li> Art 44 - Book </li>
						<li> Art 41 - Personnalités </li>
						<li> Art 40 - Spectacles </li>
				</ul> <!-- END "mnu4" -->

			<li> Art 42 - Vidéos </li>   <!--Article au-dessus-->

		</ul> <!-- END "mnu3" -->

	</li>

</ul> <!-- END "mnu" -->


J'espère que c'est clair. Si vous avez des questions, je suis à votre disposition, cela va de soi.
Merci de votre aide si précieuse.
Bonjour à tous.
J'ai rajouté ceci :
.menu ul li:hover ul li ul{
    margin-top:-35px;
    margin-left:80px;
    display:block;
}


Mais mon sous-menu bouge toujours dans tous les sens, dur dur.
Bonsoir,
Le zéro réponse vient peut être du fait que ton lien « je vous donne la page "ici" » ne mène nulle part ?
Bonsoir,
En temps normal, mon lien fonctionne bien, c'est juste le serveur qui est "down" ce soir.
Je ne sais pas du tout pourquoi, ça ne dépend pas de moi.
En espérant que ça revienne au plus vite.

Merci quand même Smiley cligne

EDIT: Le serveur est de nouveau opérationnel
Modifié par Macxim (11 May 2010 - 14:25)
Bonjour,

Le validateur HTML du W3C signale 13 erreurs. Le code HTML du menu, notamment, est faux. Tu ne peux pas placer des UL comme enfant d'un UL. Un UL ne peut avoir que des éléments LI comme enfants.

Cela dit, je ne garantis pas que ton menu déroulant fonctionne avec un code HTML correct. Faire un menu déroulant correct demande un minimum d'expertise.
Si tu tiens à garder un menu déroulant, surtout assure-toi que les intitulés de premier niveau («Artiste», «Galeries», ...) sont des liens menant vers des pages permettant d'accéder à tous les contenus de la rubrique (un index de rubrique, par exemple). Dans ce cas de figure, tu peux alors te permettre de doubler cette navigation de base par des sous-menus déroulants faits en CSS uniquement, ou en CSS avec une surcouche JavaScript pour améliorer l'ergonomie.
Mais le menu est généré par des boucles sous SPIP.
Quoi qu'il en soit, je vais essayer de corriger les erreurs de code HTML même si ce n'est pas évident parce que plusieurs fichiers du squelette sont impliqués.

Je pense que je vais garder un menu simple avec juste deux niveaux.

Florent V. a écrit :
Si tu tiens à garder un menu déroulant, surtout assure-toi que les intitulés de premier niveau («Artiste», «Galeries», ...) sont des liens menant vers des pages permettant d'accéder à tous les contenus de la rubrique (un index de rubrique, par exemple).

En fait, je ne veux pas que ces rubriques soient cliquables parce qu'elles ne contiennent rien si ce n'est une liste d'articles et ça ne m'intéresse pas d'avoir ça.

Merci Florent pour ta réponse.
Macxim a écrit :
Mais le menu est généré par des boucles sous SPIP.

Ça ne garantit pas un code HTML valide et correct. Tu peux faire tout ce que tu veux avec une boucle SPIP.

Macxim a écrit :
En fait, je ne veux pas que ces rubriques soient cliquables parce qu'elles ne contiennent rien si ce n'est une liste d'articles et ça ne m'intéresse pas d'avoir ça.

Et la personne qui ne peut pas afficher ton sous-menu, elle fait comment si les noms de rubrique ne sont pas cliquables?
Exemples de personnes concernées:
- tout utilisateur d'un smartphone (t'as déjà vu une souris sur un iPhone? Smiley cligne );
- tout utilisateur qui a désactivé JavaScript;
- tout utilisateur qui navigue au clavier (pas d'usage de la souris ou autre système de pointage possible ou suffisamment précis).

Macxim a écrit :
Je pense que je vais garder un menu simple avec juste deux niveaux.

Faire un menu déroulant sur deux niveaux (intitulés de rubriques et listes des pages) est déjà très compliqué si on veut le faire correctement. Rajouter un niveau supplémentaire serait tout bonnement suicidaire, aussi bien d'un point de vue technique (difficulté de réalisation) que d'un point de vue ergonomique (difficulté d'utilisation). C'est donc une sage décision d'en rester à deux niveaux. Smiley smile
Florent V. a écrit :
Ça ne garantit pas un code HTML valide et correct. Tu peux faire tout ce que tu veux avec une boucle SPIP.

Je ne comprends vraiment pas toutes les erreurs avec ces </li> qui se rajoutent. Je ne sais pas d'où ils sortent. Je peux mettre le code pour voir si quelqu'un peut m'éclairer ?

Florent V. a écrit :
Et la personne qui ne peut pas afficher ton sous-menu, elle fait comment si les noms de rubrique ne sont pas cliquables?
Exemples de personnes concernées:
- tout utilisateur d'un smartphone (t'as déjà vu une souris sur un iPhone? Smiley cligne );
- tout utilisateur qui a désactivé JavaScript;
- tout utilisateur qui navigue au clavier (pas d'usage de la souris ou autre système de pointage possible ou suffisamment précis).

Je n'avais pas du tout pensé à ça. Smiley eek
Pour la structure HTML, tu as donné le code suivant, que je simplifie:
<ul class="mnu3"> 
  <li>Rub 25- Photos</li>
  <ul class="mnu4"> 
    ...
  </ul>
  <li>Art 42 - Vidéos</li>
</ul>

Il te faudrait à priori la structure (valide et logique) suivante:
<ul class="mnu3"> 
  <li>
    <a href="/photos/">Rub 25- Photos</a>
    <ul class="mnu4"> 
      ...
    </ul>
  </li>
  <li>Art 42 - Vidéos</li>
</ul>
Sujet clos
Aller à