Discussion :

[hkiller]

Bonjour à tous,

J'ai créé un menu vertical en xhtml/css dont voici un extrait :

<ul id="menu">
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
</ul>

C'est un menu que je rappelle sur chacune des pages html de mon site.

Voici le css associé (extrait):

#menu {
font: 8pt verdana, sans-serif;
width: 200px;
float: right;
margin: 10px;
margin-bottom: 2px;
}

#menu ul, #menu li{
display: inline;
list-style-type: none;
margin:0;
padding:0;
width: 100%;
}

#menu li a {
height: 32px;
text-decoration: none;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
}

#menu li a:link, #menu li a:visited {
color: #fff;
display: block;
background: url(../images/menu4.gif);
padding: 8px 0 0 30px;
}

#menu li a:hover {
color: #fff;
background: url(../images/menu4.gif) 0 -33px;
padding: 8px 0 0 30px;
}

#menu li a:active {
color: #fff;
background: url(../images/menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}

Tout fonctionne correctement jusqu'à la fonction de survol (hover) mais jamais un seul bouton de mon menu ne reste actif !! En gros, je vois vite fait apparaitre le style indiqué ds a:active mais il ne reste pas affiché... Quelqu'un verrait l'astuce ?

Merci !

[Huntress]

Essaye de changer l'ordre de tes styles :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a:link {}
a:hover {}
a:visited {}
a:active {}

Je sais que l'ordre a une importance... mais je garantie pas que celui-ci soit le bon... faut tester.

PS pense à utiliser la balise code... c'est plus reposant pour les yeux.

[hkiller]

Ok je note pour la balise code, pas encore l'habitude !

Effectivement j'avais lu partout que les ordres ont parfois de l'influence mais là, j'ai tt essayé et ça ne fonctionne tjs pas ! D'ailleurs l'ordre que tu proposes empêche l'exécution du style :hover !

La solution doit être toute bête mais là, vraiment, je ne vois pas...

Merci en tout cas !

[hkiller]

Petite précision, mes styles de menu fonctionnent très bien quand je rentre ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <ul> <li><a href="#1">Titre de menu1</a></li>
...
</ul>

En fait, ça fonctionne quand il n'y aucun lien vers des pages !

Mais dès que je recopie ce menu sur chacune de mes pages html (parce que je veux mon menu sur tout mon site !) et que je mets donc ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <ul> <li><a href="mapage.htm">Titre de menu1</a></li>
...
</ul>

Dans ce cas , le style :active ne fonctionne plus !

Serait-ce parce que je remets ds chaque page le code de mon menu ??
Si oui, comment faire autrement en utilisant uniquement xhtml/css ?

Merci !

[hkiller]

Bon ben j'ai trouvé la solution : ce que je voulais n'est pas possible avec xhtml/css, du moins avec :active qui n'est un effet que temporaire !

Donc la solution est :

http://www.biblographia.net/article/...-page-courante

Merci !

[tungsten]

Bonjour,

je cherche exactement la même chose, de manière très urgente !
Je suis aller voir le lien suivant :
http://www.biblographia.net/article/...-page-courante

mais il ne fonctionne pas !?

J'ai un menu verticale auquel je dois ajouter l'état "a:active" pour la page en cours car mon client se plaint de ne pas savoir dans quelle rubrique il se trouve lorsqu'il regarde une page.
Mon menu est inséré dans un bloc d'un CMS XOOPS, et je l'ai déclaré visible sur toutes mes pages !

Merci pour votre aide...