menu tjs actif

04 sept. 2007, 10:11

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).

Je souhaiterais obtenir un menu "normal", ou seules les rubriques que l'on selectionne sont actives.
Merci pour votre aide

A+

04 sept. 2007, 13:57

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

04 sept. 2007, 14:00

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

05 sept. 2007, 16:09

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,

(mdr)

Code : Tout sélectionner

<!-- 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>

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

Code : Tout sélectionner

/* 
 _________________________________________________________
|                                                         |
|    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;
}

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

Salut,

05 sept. 2007, 18:04

Change :

Code : Tout sélectionner

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

en

Code : Tout sélectionner

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

Je crois que cela vient de là.

06 sept. 2007, 08:51

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 :

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

???

06 sept. 2007, 10:38

Non car tu as cela :

Code : Tout sélectionner

<a href="index.html" title="Accueil" class="active"

Ta class "active" te fais un affichage différent. Essaye cela :

Code : Tout sélectionner

<a href="index.html" title="Accueil"

06 sept. 2007, 15:19

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 : Tout sélectionner

<a href="index.html" title="Accueil" class="active">Accueil</a>

Lien - Infobulle - Etat - Texte

Par contre je ne suis pas sur d'avoir bien compris la suite

Code : Tout sélectionner

<a href="index.html" title="Accueil" class="active">Accueil<span class="desc">Bienvenue</span></a>

La portion

Code : Tout sélectionner

span class="desc">Bienvenue</span>

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

En tout k, Merci

Salut

06 sept. 2007, 15:29

Code : Tout sélectionner

span class="desc">Bienvenue</span>

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 : Tout sélectionner

.active:hover .desc

ou

Code : Tout sélectionner

a:hover .desc

qui t'indique pour le premier : quand je passe la souris sur la classe "active" tu exécutes le code pour la classe desc et pour le second quand je passe la souris sur le lien (balise a), tu exécutes le code pour la classe desc. Généralement les codes en dessous des "hovers" sont de types display:block;

06 sept. 2007, 17:01

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

06 sept. 2007, 17:28

hover = h+over = en passant dessus in English

menu tjs actif

Qui est en ligne