[Résolu] Déclarer un style - pas de résultat

Bonjour,

Je vous soumets une fois de plus une question de débutant.

Je tente la programmation d'un menu CSS/JS vertical (cf. sur le forum alsa JS : ici). Je prends pour base de départ le tutorial proposé par JEP (cf. ici). Il propose d'appliquer un style particulier à une liste. Voici le code proposé :

li ul{
  display:none;
}

Dans mon cas, le menu vertical se trouve dans un bloc de class "menu". J'ai donc imaginé que le CSS suivant fonctionnerait :

li.menu UL {
  display:none;	
}

Evidemment (sous firefox) cela ne marche pas... Qu'est-ce que j'ai loupé, sachant (pour des raisons de menu dynamique par la suite) que je préférerai éviter les "id" et rester en "class" ?

Merci d'avance pour votre aide.

GS.
Modifié le 01 Dec 2004 - 12:51

XHTML est sensible à la casse.
Je vois que dans ta déclaration CSS, tu as mis UL en majuscule... c'est peut-être à cause de cela.

Autre chose :

li.menu ul {
  display:none;	
}

Cela signifie que tu t'adresses aux <ul> contenus dans les balises <li> de classe "menu". C'est bien ce que tu veux ?

(merci pour le problème de la casse... je teste)

Bon...

.menu LI UL {
 display:none;	
}

Le code précédent fonctionne (donc j'ai ma solution). Toutefois, ma question reste toujours valable : pourquoi avec un li.menu cela ne fonctionne-t-il pas ?
Modifié le 01 Dec 2004 - 11:43

gsaunier a écrit :
(merci pour le problème de la casse... je teste)

Bon...

.menu LI UL {
 display:none;	
}

Le code précédent fonctionne (donc j'ai ma solution). Toutefois, ma question reste toujours valable : pourquoi avec un li.menu cela ne fonctionne-t-il pas ?

Voir mon post précédent pour un début de piste.

Ce second code s'applique aux <ul> contenus dans les <li> eux-même contenus dans un élément de classe "menu" (je suppose <ul>)...

C'est tout à fait différent du code précédent.

gsaunier a écrit :
(merci pour le problème de la casse... je teste)

Bon...

.menu LI UL {
 display:none;	
}

Le code précédent fonctionne (donc j'ai ma solution). Toutefois, ma question reste toujours valable : pourquoi avec un li.menu cela ne fonctionne-t-il pas ?

menu n'est pas une class de li
montre un bout de ton html

En CSS : "li.menu ul" implique cette structure :

<ul>
  <li class="menu">
    <ul></ul>
  </li>
</ul>

Alors que ".menu li ul" implique cette structure (par exemple) :

<ul class="menu">
  <li>
    <ul></ul>
  </li>
</ul>

la classe n'est pas appliqué à la balise LI


Modifié le 01 Dec 2004 - 11:48

Pour résumer :

li.menu = s'applique aux éléments <li> de classe "menu". Exemple : <li class="menu">..</li>

.menu li = s'applique aux éléments <li> contenus dans un élément de classe "menu". Exemple <balise class="menu"><li>...</li></balise>

Tu vois la différence ?
Un autre lien explicatif : http://www.alsacreations.com/articles/heritage/

C'est effectivement beaucoup plus clair ! Merci pour l'explication.

Ce qui me permet de continuer l'exploitation du CSS par :

.menu LI:hover>ul {
  display:block;	
}

Je crois que l'on peut indiquer que le sujet est résolu (ou le fermer comme le voudra le modérateur).

GS

gsaunier a écrit :

Je crois que l'on peut indiquer que le sujet est résolu (ou le fermer comme le voudra le modérateur).

C'est à toi de mettre un [Résolu] en éditant ton sujet !