Styles CCS et liens hypertexte

Bonjour,

Mon soucis est le suivant :

J'applique avec une feuille de styles, des couleurs , tailles , a des liens hypertexte dans un menu et sous menu. Mais mon problème est que cela s'applique à mon contenu ce qui fait que mes liens sont blancs sur un fonc blanc alors que je souhaite les mettre en bleu et violet comme par défaut.

Comment spécifier que dans mon contenu mon style crée ne s'applique pas?

Merci!!

13 réponses

  • Votes
  • Date
  • Date décroissante
  1. Et bien tu fais par exemple :
    .a.menu { 
    		text-decoration: none;
    		color: #FFFFFF;
    	}
    .a.menu:visited {
    		color: #FFFFFF;
    		text-decoration: none;
    	}
    .a.menu:hover {
    		color: #CCCCFF;
    		text-decoration: none;
    	}
    .a.menu:active {
    		color: #99FFCC;
    		text-decoration: none;
    	}
    a.contenu {
    		color: #999999;
    		text-decoration: none;
    	}
    a.contenu:visited { 
    		color: #999999;
    		text-decoration: none;
    	}
    a.contenu:hover {
    		color: #CCCCFF;
    		text-decoration: none;
    	}
    a.contenu:active {
    		color: #000000;
    		text-decoration: none;
    	}

    Et tu appliques ensuite en fonction de tes liens :
    <A HREF=... CLASS="menu">
    <A HREF=... CLASS="contenu">

    .::: "A trop vouloir feindre de faire fi, on finit 
    par faire fi de vouloir feindre." 
    :::.
    1. Merci beaucoup ca marche niquel!!

      Je pensais pas du tout a cette solution!
      1. De rien ;)

        .::: "A trop vouloir feindre de faire fi, on finit 
        par faire fi de vouloir feindre." 
        :::.
        1. Merci beaucoup ca marche niquel!!

          Je pensais pas du tout a cette solution!
          1. J'ai quand meme un petit soucis car le style defini s'applique bien aux mailto et aux lienx vers des pages du site mais pas vers des pages externes. C'est à dire que les liens : www.truc.fr' target='_blank'>http://wwww.truc.fr ne prennent pas en compte mon style.

            D'ou vient ce problème?

            Merci
            1. Il faut définir l'attribut CLASS dans chaque balise de lien.

              .::: "A trop vouloir feindre de faire fi, on finit 
              par faire fi de vouloir feindre." 
              :::.
              1. C'est bizarre ça. Mets-voir un bout de code ...

                .::: "A trop vouloir feindre de faire fi, on finit 
                par faire fi de vouloir feindre." 
                :::.
                1. C'est incompréhensible, ça devrait fonctionner !
                  Ta feuille de style ressemble à quoi ?

                  .::: "A trop vouloir feindre de faire fi, on finit 
                  par faire fi de vouloir feindre." 
                  :::.
                  1. .boutonaccueil {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 14px;
                    font-weight: bold;
                    color : #000000;
                    }
                    .pied {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 10px;
                    color: #000000;
                    }
                    .rappel {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    font-style: italic;
                    color: #000000;
                    }
                    .texteaccueil {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 18px;
                    font-weight: bold;
                    color: #FF0000;
                    }
                    .accueilssmenu {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    color: #FF0000;
                    background-color: #FFFFFF;
                    font-weight: bold;
                    }
                    .tabnormal {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    color: #FF0000;
                    background-color: #FFFFFF;
                    font-size: 10px;
                    }
                    .tabover {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    color: #FF0000;
                    background-color: #ECECEC;
                    font-size: 12px;
                    font-weight: bold;
                    }
                    .ancres {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 11px;
                    font-style: normal;
                    }
                    .texte {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    color: #000000;
                    }
                    .soustitre {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    font-weight: bold;
                    text-decoration: underline;
                    color: #000000;
                    }
                    .nomcolonne {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    font-weight: bold;
                    color: #000000;
                    background-color: #FFAAAA;
                    }
                    .menu2 {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size:11px;

                    }
                    {
                    A:link {font-family:verdana; font-size:8pt; text-decoration: none; color: #FFFFFF;}
                    A:visited {font-family:verdana; font-size:8pt; text-decoration: none; color: #FFFFFF;}
                    A:active {font-family:verdana; font-size:8pt; text-decoration: none; color:#FFFFFF}
                    A:hover {font-family:verdana; font-size:8pt; text-decoration: underline; color:#FFFFFF;}
                    }
                    .sousmenu1 {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 10px;
                    background-color: #CCCCCC;
                    }
                    .sousmenu2 {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 10px;
                    font-weight: bold;
                    color: #FF0000;
                    background-color: #FF0000;
                    }

                    .menu1 {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 10px;
                    }
                    .a.contenu
                    {
                    color:#000000;
                    text-decoration:underline;
                    }

                    .a.contenu:visited
                    {
                    color:#000000;
                    text-decoration:underline;
                    font-size:12px;
                    }

                    .a.contenu:hover
                    {
                    color:#FF0000;
                    text-decoration:underline;
                    font-size:12px;
                    }

                    .a.contenu:active:
                    {
                    color:#FF0000;
                    text-decoration:underline;
                    font-size:12px;
                    }
                    .liens {
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    }
                    1. Il faut que tu définisses a.liens, comme tu l'as fait pour a.contenu .

                      .::: "A trop vouloir feindre de faire fi, on finit 
                      par faire fi de vouloir feindre." 
                      :::.
                  2. Oui j'ai vu avec également la doc sur ce site mais ca ne fonctionne pas du tout....
                    1. attention à un détail : le style des liens visités.

                      dès fois tu crois que ça ne marche pas, mais comme ton lien a été visité par toi même, il applique le style de lien visité et non pas le style que tu viens de modifier comme il faut. Si tu veux que ça garde la même couleur que le lien initial, supprime juste l'info de couleur dans le style visited.

                      à +

                      Bruno