Besoin d'explication sur les pseudo-formats

Explication sur l'utilisation de a: hover

7 janvier 2006 à 16:43:10

Bonjour à tous, j'essaye de faire un menu déroulant en CSS et j'ai trouvé un tutorial http://marcarea.com/tuto/menu01.php pour m'aider

Seulement je ne comprend pas bien cette ligne:

#menuDeroulant li:hover > .sousMenu { display: block; }

En particulier l'utilisation de ">" qui ne signifie rien à mes yeux :euh:

Merci de m'aider. Je vous met tout le code XHTML et CSS qui va avec.

Code XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" href="CSS.css" />

</head>

<body>

<ul id="menuDeroulant">
<li>
<a href="#">Partie 1</a>
<ul class="sousMenu">
<li><a href="#">castor</a></li>
<li><a href="#">aligator</a></li>
<li><a href="#">musclor</a></li>
</ul>
</li>
<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
</ul>

</body>

</html>

Code CSS:

body
{
font: 11px verdana, sans-serif;
background: #AFA99B top left no-repeat;
margin: 0;
padding: 0;
}
#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li
{

float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: auto;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

ixM

7 janvier 2006 à 18:35:54

Salut,

uhm, je ne suis pas un spécialiste et je reconnais ne jamais avoir vu quelque chose comme cela. Mais je m'étais déjà demandé si avec un événement css (hover, visited,...) d'un élément, on pouvait agir sur un autre.

Je n'ai pas eu le temps de tester mais ça pourrait être cela.

Donc traduit, cela donnerait :
"lorsqu'on pase sur un élément de la liste déroulante #menuDeroulant, on change la propriété display du block .sousMenu"

Tout ça sans être sûr que c'est bien cela

@micalement,
`ixM

thib

7 janvier 2006 à 18:52:58

Merci ixM d'avoir pris du temps pour me répondre. Comme toi je n'avoue jamais avoir été confronté à ce genre de chose j'ai supposé et je l'ai vérifié en faisant des tests. Mais si quelqu'un de très experimenté en CSS connaît cela et peut m'expliqué l'usage exact ca serait super sympas. Voilà merci d'avance.

strucky

7 janvier 2006 à 21:02:49

salut !!

Cela s'appelle un sélecteur d'enfant.

IE ignore cette propriété, donc incompatible avec lui.

Il te faudra une solution de remplacement pour lui, car il ne reconnaît pas non plus le hover sur autre chose que la balise <a>.

Vinchz

7 janvier 2006 à 21:17:58

Faire un menu déroulant est très facile en CSS. Tu places ton menu déroulant "ouvert" ( ou "déplié", comme tu comprends le mieux

) dans ton code xhtml et ensuite tu joues avec la propriété display et le pseudo-format :hover.

En gros, tu dois dire en CSS : "Je cache les contenus des menus.Lorsque je survole tel titre (en l'occurance un lien vu que :hover ne marche que sur les liens sous IE) de menu, je montre son contenu."

Allez, je te laisse le plaisir de nous coder ça

thib

7 janvier 2006 à 23:25:38

Akira merci pour ton explication mais en fait j'aimerai savoir si quelqu'un s'y connait assez en CSS pour me donner la veritable signification et utilisation du signe > comme je l'ai montré plus haut. Merci d'avance.

Le Papé

8 janvier 2006 à 0:36:45

Bonsoir,
Voici quelques informations.
En savoir plus sur les les sélecteurs.

atly

8 janvier 2006 à 8:47:13

Oui, Mateo n'en parle pas des sélecteurs. Dommage.
Sinon, le principe est que la liste contenue dans ton élément est invisible par défaut.
Lorsqu'on fait un :hover dessus, le display:block le fait apparaître : comme la liste est contenue dans l'élément qui réagit, on peut donc intéragir avec.

thib

8 janvier 2006 à 11:07:07

Merci beaucoup pour toutes vos réponse, qui m'ont permi de créer mon menu déroulant. Il marche parfaitement sous Firefox mais sous IE lorsque je passe sur le lien rien ne se passe alors qu'un menu devrait descendre.

Je vous met mon code XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" href="CSS.css" />

</head>

<body>

<ul id="menuDeroulant">
<li>
<a href="#" id="a">Partie 1
<ul class="sousMenu">
<li><a href="#">castor</a></li>
<li><a href="#">aligator</a></li>
<li><a href="#">musclor</a></li>
</ul></a>
</li>
<li>
<a href="#" id="b">Partie 2
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul></a>
</li>
</ul>

</body>

</html>

Et le code CSS:

body
{
font-family: "Trebuchet MS";
background: ;
margin: 0;
padding: 0;
}

ul, li
{
list-style-type: none;
}

#menuDeroulant
{
width: 644px;
margin: 0;
padding: 0;
border: 0;
}

#menuDeroulant li
{
float: left;
background: #339933;
width: 120px;
}

#menuDeroulant li a
{
display: block;
float: left;
background: #339933;
text-decoration: none;
width: 120px;
}

#menuDeroulant li a:hover
{
background: #FFCC33;
}

#menuDeroulant li .sousMenu
{
display: none;
float: none;
margin: 0;
padding: 0;
border: 0;
}

#menuDeroulant li .sousMenu li a
{
text-align: left;
float: none;
display: block;
background: #FF3366;
width: 120px;
margin: 0px;
padding: 0px;
border-top: 1px solid #ffffff;
}

#menuDeroulant li .sousMenu li a:hover
{
background: #FFCC33;
}

#menuDeroulant li a:hover > .sousMenu { display: block; }

Voilà merci beaucoup si vous pouviez m'aider, pour que mon menu marche aussi sous IE.

P.S: Je n'ai pas réussi à savoir si le signe ">" appartient au CSS1 ou au CSS2.

atly

8 janvier 2006 à 11:09:40

Essaye d'enlever le dernier >, par hasard ? Je n'ai ni regardé ni vérifié, mais c'est à tester.

thib

8 janvier 2006 à 11:13:19

Oui je l'ai fait cela ne change rien, sous Firefox cela marche toujours sous IE cela ne marche toujours pas.

Le Papé

8 janvier 2006 à 13:51:38

Bonjour,

Citation : thib

P.S: Je n'ai pas réussi à savoir si le signe ">" appartient au CSS1 ou au CSS2.

Es-tu allé voir là, les sélecteurs. Il est dit:"Cette table résume la syntaxe du sélecteur de CSS2". Si tu as la patience de lire l'article en entier, tu en apprendras beaucoup sur les sélecteurs et les pseudo-formats.

ixM

10 janvier 2006 à 16:07:24

Citation : strucky

salut !!

Cela s'appelle un sélecteur d'enfant.

IE ignore cette propriété, donc incompatible avec lui.

Il te faudra une solution de remplacement pour lui, car il ne reconnaît pas non plus le hover sur autre chose que la balise <a>.

Uhm, voilà. Je sais pas ce qu'il te fallait de plus

@micalement,
`ixM