Liens "actifs" en CSS

smog · 16 Mai 2009

Bonjour à tous,

Ma page (en CSS) comporte une ligne horizontale de menus "texte", comme sur macgé (écriture blanche sur fond bleu).
Lorsque je survole le menu, le texte passe en une autre couleur ; quand je clique, la page correspondant au lien s'affiche, avec une liste de menus identique. Ok.

J'aimerais simplement que le menu correspondant à la page active reste dans la même couleur que lorsqu'il est survolé, pour que l'utilisateur "sache" où il se trouve. Est-ce possible en CSS ?
J'ai cru que la propriété de lien nommée active servait à ça, mais apparemment elle n'a rien à voir...

Merci pour votre aide !:zen:

da capo · 16 Mai 2009

Ce n'est pas possible en css car il n'est pas possible de savoir sur quelle page on est.

la pseudo classe :active correspond au style appliqué lorsque l'utilisateur maintient son clic sur le lien hypertexte.

Anonyme · 16 Mai 2009

Il faut mettre une classe appelée par exemple "current" sur l'élément de menu actif sur chaque page et styler en conséquence.

Exemple pour une page "archives" :

Bloc de code:

<!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" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Archives</title>
    <style type="text/css" media="screen">
        body {
            font-family: arial, helvetica, sans-serif;
            font-size: 90%;
        }
        ul#menu {
            margin: 0;
            padding: 0;
            color: #fff;
            list-style-type: none;
        }
        ul#menu a {
            color: #fff;
        }
        ul#menu li {
            float: left;
            padding: .5em;
            background-color: #00F;
        }
        ul#menu li.current {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <ul id="menu">
        <li><a href="/">Accueil</a></li>
        <li class="current">Archives</li>
        <li><a href="/apropos.html">À propos</a></li>    
        <li><a href="/accessibilite.html">Accessibilité</a></li>    
    </ul>
</body>
</html>

Évidemment, c'est mieux de mettre les css dans un fichier externe et de les lier au fichier html…

smog · 16 Mai 2009

Merci à vous deux, c'est génial. J'avais pas compris l'effet "active", la différence avec "hover" en fait...

Je vais éplucher ce code , encore merci !

smog · 16 Mai 2009

Bon, en créant une classe, c'est "impec'" !
:zen:

Liens "actifs" en CSS

smog

Membre actif

da capo

abonné absent

Anonyme

Invité

smog

Membre actif

smog

Membre actif

Sujets similaires