hover = h+over = en passant dessus in English

Yep, je crois que g saisi ... sauf la fin c koa un dispaly block : un block d'affichage?? Celui qui se met en place quand tu passe la souris sur la classe active et qui laisse apparaitre la sous-rubrique??
Hover c'est quoi exactement en fait?

Merci

[code]span class="desc">Bienvenue</span>[/code] veut dire que tu as un menu caché sur ton bouton. En clair tu as raison... SI tu veiux mettre plus de menu caché reprends la même syntaxe.

Si tu regarde ta feuille de style tu auras [code].active:hover .desc[/code]
ou [code]a:hover .desc[/code]
qui t'indique pour le premier : quand je passe la souris sur la classe "[b]active[/b]" tu exécutes le code pour la classe desc et pour le second quand je passe la souris sur le [b]lien (balise a)[/b], tu exécutes le code pour la classe desc. Généralement les codes en dessous des "hovers" sont de types display:block;

T'assures sévère! Ca marche.
C'est quelque chose que j'aurais pu trouver en cherchant un peu plus, je viens de comprendre la hiérarchie de la ligne de code

[code]<a href="index.html" title="Accueil" class="active">Accueil</a> [/code]
Lien - Infobulle - Etat - Texte

Par contre je ne suis pas sur d'avoir bien compris la suite
[code] <a href="index.html" title="Accueil" class="active">Accueil<span class="desc">Bienvenue</span></a>[/code]

La portion
[code]span class="desc">Bienvenue</span>[/code]

C'est pour lui indiquer une sous rubrique ou il y aura marqué "Bienvenue"?

En tout k, Merci :D

Salut

Non car tu as cela :

[code]<a href="index.html" title="Accueil" class="active"[/code]

Ta class "active" te fais un affichage différent. Essaye cela : [code]<a href="index.html" title="Accueil" [/code]

Salut,

Merci le probleme est en parti résolu, mais ce n'est pas encore tout à fait ca. Tu peux regarder ce que ca donne sur l'image :

[img]http://zenithtopo.free.fr//Photos/Photo/photos/menu.png[/img]

La rubrique "accueil" devrait etre comme la rubrique "métiers"...
Alors docteur :shock: ???

Change : [code]a:hover .desc, .active .desc {
display: block;[/code]

en [code]a:hover .desc, .active:hover .desc {
display: block;[/code]

Je crois que cela vient de là.

ok salut tout le monde,

Désolé je ne suis pas encore au point question us et coutume du forum, et puis m bon sens commun :) , c clair c plus simple avec le code sous les yeux. Alors voilà la bete, :oops: (mdr)

[code]<!-- Menu is displayed in reverse order from how you define it (caused by float: right) -->
<a href="index.html" title="Contact" class="lastMenuItem">Contact<span class="desc">Effectifs</span></a>

<a href="ouvrage.html" title="References">Références<span class="desc">Réalisations</span></a>

<a href="index.html" title="Materiels">Matériels<span class="desc">Véhicules Instruments</span></a>
<a href="index.html" title="Metiers">Métiers<span class="desc">compétences</span></a>
<a href="index.html" title="Accueil" class="active">Accueil<span class="desc">Bienvenue</span></a>[/code]

Et voilà pour la feuille de style, je ne suis sur de la portion de code qui gere l'affichage de mon menu, alors je poste tout. De toute facon je pense que ca ne fais peur à personne ici, à part moi :shock:

[code]
/*
_________________________________________________________
| |
| DESIGN + http://fullahead.org |
| DATE + 2005.05.12 |
| COPYRIGHT + free use if this notice is kept in place |
|_________________________________________________________|

*/



/* -- Main layout styles -- */

body {
margin: 1em 1em 1em 1em;
padding: 0px;
font-family: Helvetica, sans-serif;
font-size: 1.0em;
background-color: #333;
}

#siteBox {
float: left;
width: 100%;
color: #FFF;
}





/* -- Header layout/display styles -- */

#header {
float: left;
width: 100%;
height: 4em;
background: #25509F url(../images/media/bandeau_zenith.jpg) no-repeat bottom left;
}

#header a {
float: right;
width: 8em;
padding: 5px 10px 5px 10px;
font-size: 0.6em;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
background-color: #666;
border-bottom: 2px solid #333;
border-right: 1px solid #333;
border-left: 1px solid #333;
}

#header a:hover, #header a.active {
padding-top: 10px;
background-color: #333;
}

#header a.lastMenuItem {
background-image: url(../images/corner_tr.gif);
background-repeat: no-repeat;
background-position: top right;
border-right: 0px;
}

a .desc {
display: none;
text-transform: lowercase;
color: #FC0;
}

a:hover .desc, .active .desc {
display: block;
}




/* -- Header title and subTitle layout/display styles -- */


.title {
float: left;
padding: 1em 30px 0 2em;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
text-align: center;
line-height: 0.75em;
letter-spacing: -0.15em;
color: #FC0;
}

.subTitle {
display: block;
font-size: 0.4em;
text-transform: lowercase;
line-height: 1.2em;
letter-spacing: 0.01em;
}





/* -- Content layout/display styles -- */

#content {
float: left;
width: 100%;
padding: 1em 0 1em 0;
background-color: #666;
}

#contentLeft {
float: left;
width: 23.3%;
margin-bottom: 1em;
background: #777 url(../images/corner_sub_tr.gif) no-repeat top right;
}

#contentRight {
float: right;
width: 75%;
background: #777 url(../images/corner_sub_tl.gif) no-repeat top left;
}

#content p {
margin: 1.2em 1.2em 2em 1.2em;
font-size: 0.8em;
line-height: 1.8em;
}

#content a {
text-decoration: none;
color: #FC0;
border-bottom: 1px solid #AAA;
}

#content a:hover {
color: #DDD;
background-color: #888;
border-bottom: 1px solid #EEEEEE;
}

.header, .subHeader {
display: block;
clear: both;
font-weight: bold;
font-size: 0.8em;
text-transform: lowercase;
color: #FC0;
border-bottom: 1px solid #AAA;
}

.subHeader {
border: 0px;
}





/* -- Content left site links (large plus icon) -- */

#content a.menuItem {
display: block;
padding: 5px 0 5px 54px;
background: url(../images/icn_plus.gif) no-repeat center left;
border: 0px;
}

#content a:hover.menuItem {
color: #DDD;
background: #888 url(../images/icn_plus_on.gif) no-repeat center left;
border: 0px;
}





/* -- Footer layout/display styles -- */

#footer {
float: left;
width: 100%;
height: 3em;
font-size: 0.6em;
text-transform: lowercase;
line-height: 2.6em;
color: #0AD;
background: #25509F url(../images/media/bandeau_zenith.jpg) repeat-y top left;
}

#footerLeft {
float: left;
width: 60%;
height: 3em;
text-align: left;
background: url(../images/corner_bl.gif) no-repeat bottom left;
}

#footerRight {
float: right;
width: 35%;
height: 3em;
text-align: right;
background: url(../images/corner_br.gif) no-repeat bottom right;
}

#footer a {
color: #0AD;
}

#footer a:hover {
color: #666666;
}




/* -- Display formatting styles -- */

.grey {
font-size: 0.9em;
color: #AAA;
}

.white {
color: #FFF;
}

acronym {
cursor: help;
border-bottom: 1px dotted #AAA;
}






/* -- <ul> tag styles -- */

ul{
font-size: 0.8em;
padding-top: 5px;
padding-bottom: 5px;
list-style-image: url(../images/li_bullet.gif);
}

li {
margin-left: 50px;
}






/* -- Image alignment classes -- */

.imgLeft, .imgRight {
margin: 30px;
}

.imgLeft {
float: left;
margin-left: 150px;
}

.imgRight {
float: right;
margin-right: 150px;
}

.imgCenter {
float: left;
margin-left: 250px;




/* -- Utility classes to create the bottom rounded corners -- */

.bottomCorner {
text-align: right;
}

.vBottom {
vertical-align: bottom;
}[/code]

Bon voilà, j'espère que tout y est cette fois ci.
Merci pour votre aide.

Salut, :D

Si tu utilise Javascript pour afficher /cacher ton menu, cela vient de l'évènement onmouseover / onmouseout mais sans code pas facile...

Bonjour,
Aide nous stp pour que nous puissions t'aider. Donne la partie du code incriminé. et explique mieux que ça ce que tu veux avoir comme résultat

Bonjour,

J'ai un petit soucis (encore!). Sur le menu de ma page web, la première rubrique du menu est active par défaut (cf.image).
[img]http://zenithtopo.free.fr/Photos/Photo/photos/menu%20actif.png[/img]
Je souhaiterais obtenir un menu "normal", ou seules les rubriques que l'on selectionne sont actives.
Merci pour votre aide :)

A+