Couleur de l'onglet du menu ?

Résolu
charly -  
 charly -
Bonjour,
Je suis en train de créer un site et je configure mon menu horizontal.
J'ai mis une balise a:hover pour que l'onglet change de couleur lors du passage de la souris mais je voudrais que le texte de l'onglet conserve cette couleur lorsque l'on est sur la page. J'ai essayé avec a:visited mais tous les onglets changent de couleur... Quelle balise utilisée ?
Merci

12 réponses

  1. a70m Messages postés 3121 Statut Contributeur 217
     
    Une balise a:hover ? c'est une pseudo-classe de CSS .. et non une balise.

    Peux-tu poster ton bout de code ?
    0
  2. bast64 Messages postés 47 Statut Membre 3
     
    Bonjour,

    Le
    a:visited
    permet de modifier le lien une fois visité.

    Il n'existe à ma connaissance pas de balise pour faire ce que tu demande.

    Pour garder la couleur du lien au survol, le plus simple est de mettre sur chaque page un
    a{color:nom_de_la_couleur;}
    dans le lien correspondant à la page actuelle.
    0
  3. a70m Messages postés 3121 Statut Contributeur 217
     
    Oui, je rejoins plutôt l'idée de basy64, c'est ce que j'avais aussi pensé.

    pour tes liens,

    Tu mets :

    a
    {color:TA COULEUR;}
    
    a:hover
    {color:LA MEME COULEUR;}


    Cordialement
    0
  4. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  5. charly
     
    Merci pour vos réponses mais je n'y arrive toujours pas.
    J'ai regardé sur alscréation, ça a l'air d'être, mais non !!!
    Voici un bout de mon code

    #menu {
    background-color: #CCCCCC;
    height: 60px;
    width: 960px;
    }
    #menu ul {
    display: inline;
    list-style-type: none;
    }
    #menu li{
    display: inline;
    }
    #menu li a{
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    clear: none;
    float: left;
    height: 55px;
    padding-top: 5px;

    background-color: #CCCCCC;
    width: 160px;
    }
    #menu li a:hover{
    background-color: #CCCCCC;
    color: #00FF00;
    }
    0
    1. notobe Messages postés 2222 Statut Membre 213
       
      ça a l'air d'être, mais non
      ?? manque pas un mot là ? ;)

      J'ai besoin d'une précision : la couleur de ton onglet, tu veux qu'elle ne reste que lorsqu'on est sur la page en cours ou qu'elle reste aussi lorsqu'on va sur une autre page ?

      Car si c'est la 1ère solution, le tuto d'alsa est ce qu'il faut.
      Sinon, tu mets des class en définissant des couleurs spécifiques pour chaque onglet, mais ces couleurs resteront tant que le cache n'aura pas été vidé !

      Exemple :
      <ul>
       <li class="item1"><a href="">Item 1</a></li>
       <li class="item2"><a href="">Item 2</a></li>
      </ul>
      
      li.item1 a:visited, li.item1 a:hover {
      color:red;
      }
      li.item2 a:visited, li.item2 a:hover {
      color:green;
      }
      0
    2. charly
       
      Oui j'ai oublié le mot : "simple"...
      C'est la 1ère solution, je veux les onglets blancs de façon permanente et verts lorsque l'on passe dessus avec la souris et lorsque la page est en cours
      Je vais regarder à nouveau le tuto d'alsa mais j'ai essayé et cela n'a pas fonctionné, j'ai dû oublier un truc.
      Merci
      0
    3. notobe Messages postés 2222 Statut Membre 213
       
      Mets le code html + CSS que tu as essayé
      0
    4. charly
       
      Voici les codes html et css que j'ai essayés, mais cela ne fonctionne toujours pas


      <div id="menu">
      <ul>
      <li><a href="accueil.html">ACCUEIL</a></li>
      <li><a href="artistes.html">ARTISTES</a></li>
      <li><a href="galerie.html">GALERIE</a></li>
      <li><a href="actualité.html">ACTUALITE</a></li>
      <li><a href="actualité.html">EXPOSITIONS</a></li>
      <li><a href="contact.html" class="en-cours">CONTACT</a></li>
      </ul>
      </div>



      #menu #en-cours a{
      color: #00FF00;
      }
      0
    5. notobe Messages postés 2222 Statut Membre 213
       
      Ce n'est pas un dièse, mais un point qu'il faut mettre pour une classe.
      #menu li a.en-cours {    
      color: #00FF00;    
      }


      (erreur dans le tuto effectivement... ah non : d'abord ils font une class et ensuite un id. Bon, pas judicieux)
      0
  6. a70m Messages postés 3121 Statut Contributeur 217
     
    Normal,

    La coleur de ta police dans
    menu li a et menu li a:hover n'est pas la même ..
    0
  7. charly
     
    c'est parce que je veux une police blanche "en général" et verte lorsque je passe la souris dessus et lorsque je suis sur la page
    0
  8. a70m Messages postés 3121 Statut Contributeur 217
     
    Et où est le problème ?
    0
  9. charly
     
    le problème c'est que je veux que la police de mon onglet soit verte pour savoir sur quel lien on se trouve.
    car là, la couleur est (blanche) identique partout
    Merci de te me répondre si rapidement
    0
  10. a70m Messages postés 3121 Statut Contributeur 217
     
    Essaye d'enlever les 'li' dans ton CSS.
    0
    1. notobe Messages postés 2222 Statut Membre 213
       
      n'importe quoi...
      0
  11. bast64 Messages postés 47 Statut Membre 3
     
    Il faudrait que tu rajoute une classe pour le lien de la page actuelle

    #menu li a .actu{
    color: #00FF00;
    }
    

    Avec dans ton html

    <a href="lien.html" class="actu">Page actuelle</a>
    0