Configuration des liens (couleur, survol, ... [Résolu]

Bonjour,

Lorsque tu veux obtenir des effets différents, tu as besoin de styles différents.
Il existe peut-être d'autres manières de faire, mais je te propose celle-là.

Pour plus de souplesse, j'ai déplacé le code relatif aux styles dans un fichier externe.
Pour avoir 2 effets différents, j'ai créé 2 jeux de styles différents.
Je suis intervenu au minimum dans ton code et l'ai juste un peu modifié (en dehors du bandeau jaune en bas).

Je n'utilise pas DW alors j'ai fait ça à la main. Tu vas certainement avoir besoin d'aller mettre les doigts dans le code.

J'ai dû nommer chaque <div> contenant chaque partie du menu

    id="menug"

pour pouvoir ensuite m'en servir de base pour les liens contenus dans ces <div>

    #menug a
    #menug a:visited

etc.
Et donc ces styles ne s'appliquent qu'aux liens contenus dans les <div> ayant cette id.

Ton code HTML :

<div align="left" class="Style20">Nos services<br />
    <span class="Style23"> &nbsp;&nbsp;&nbsp;<a href="achat.html">Achat</a> <br />
    &nbsp;&nbsp;&nbsp;<a href="entreposage.html">Entreposage</a><br />
    &nbsp;&nbsp;&nbsp;<a href="gestion_des_stocks.html">Gestion des &nbsp;&nbsp;&nbsp;stocks</a><br />
    &nbsp;&nbsp;&nbsp;<a href="transport.html">Transport</a><br />
    &nbsp;&nbsp;<a href="systemes_informations.html">&nbsp;Syst&egrave;mes &nbsp;&nbsp;&nbsp;d'informations</a></span></div>

Mes modifications :

    <div align="left" class="Style20" id="menug">
      Nos services<br />
       <p class="Style23"><a href="achat.html">Achat</a></p>
       <p class="Style23"><a href="entreposage.html">Entreposage</a></p>
       <p class="Style23"><a href="gestion_des_stocks.html">Gestion des stocks</a></p>
       <p class="Style23"><a href="transport.html">Transport</a></p>
       <p class="Style23"><a href="systemes_informations.html">Systèmes d'informations</a></p>
    </div>

Pour éviter l'effet disgracieux sur le soulignement et l'alignement avec des espaces, j'ai transformé ta <span> avec des <br /> et des &nbsp; en <p> avec des marges

	margin : 0;
	margin-left : 10px;

dans le .Style23.

Ton code CSS :

    a:link {
        color: #FFFFFF;
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #FFFFFF;
    }
    a:hover {
        text-decoration: underline;
        color: #FFFFFF;
    }
    a:active {
        text-decoration: none;
        color: #FFFFFF;
    }

Mes modifications :

    #menug {
        color: #f90;
    }
    #menug a {
        text-decoration: none;
        color: #f90;
    }
    #menug a:visited {
        text-decoration: none;
        color: #99f;
    }
    #menug a:hover {
        text-decoration: underline;
        color: #eee;
    }
    #menug a:active {
        text-decoration: none;
        color: #ff5;
    }

Pour les liens dans le texte, ça a été beaucoup plus simple.
J'ai simplement attribué une “id” à l'<ul> :

<ul id="dans_le_texte">

Je n'ai plus eu qu'à définir des styles pour les liens contenus dans cette <ul> :

    #dans_le_texte {
        list-style-type : circle;
        }
    #dans_le_texte a {
        text-decoration: none;
        color: #09f;
        }
    #dans_le_texte a:visited {
        text-decoration: none;
        color: #9f0;
        }
    #dans_le_texte a:hover {
        text-decoration: underline;
        color: #f90;
        }
    #dans_le_texte a:active {
        text-decoration: none;
        color: #000;
        }

Voilà, il me semble que c'est tout (-;
Si, quand-même, tout ça fonctionne avec les navigateurs que j'utilise chez moi. Vérifie qu'IE interprète ça correctement.


+ Quelques remarques.

Tu utilises le même nom pour plusieurs styles.
Si ma mémoire m'est fidèle, c'est le dernier défini qui est pris en compte. Supprime ceux qui font doublons. Regarde ici, je les ai regroupés.

Pour nommer tes styles tu utilises des noms de couleurs.
C'est un peu limitatif et peu explicite.
Imagine que le noir ne plaise plus et que tu doives le changer en bleu foncé.
Tu te retrouves avec un style #noir qui, en fait, affiche du bleu. Bizarre (-;

Dans le texte, tu places les liens dans une liste. Ne peux-tu faire de même avec le menu gauche ? Comme tu as pu t'en rendre compte, c'est plus simple à gérer.

Au fait, je me relis et je constate que tout au long de cette démonstration, je suis resté sur une idée initiale due à mes habitudes : UN menu fait d'UNE liste pour les liens et qui n'est donc utilisée qu'UNE fois.
Or, ton menu est fait de plusieurs sous parties. J'ai donc utilisé cette “id” plusieurs fois.

Les puristes feront remarquer que puisque j'emploie plusieurs fois la classe “menug”, je ne dois pas l'appeler “id”. Et ils auront raison. Une “id” ne doit servir qu'une fois.
J'aurais donc dû utiliser une “class”.

Une correction est disponible ici. Et la feuille de styles ici.

Par contre, comme “dans_le_texte” n'est utilisée qu'une fois, là, c'est correct.

Salut!
Moi j'ai ce code qui est suposer mettre de lien en couleur quand on passe dessu et se mettre en majuscule!

voici un exemple: http://fr.html.net/tutorials/css/lesson6_ex6.asp

voici le code:

a:hover {
	text-transform: uppercase;
	font-weight:bold;
	color:blue;
	background-color:yellow;
}

je ne sais pas ou mettre lien hypertexte?

Aider moi!

Merci!