Configuration des liens (couleur, survol, ...

Résolu

Xavier -
pinky-mango Messages postés 29 Date d'inscription Statut Membre Dernière intervention - 3 févr. 2010 à 15:57

Bonjour à tous,

J’ai un souci de configuration de liens avec le logiciel Dreamweaver .
En effet, celui-ci me propose de configurer pour l’ensemble de la page la couleur des liens, le survol, … Cependant, je souhaite obtenir deux configurations possibles pour la page, celle concernant le sommaire sur la gauche avec un fond gris prévu et une écriture en blanc et le contenu du texte sur la droite ave le fond blanc prévu et une écriture en noir. Seulement, je ne vois pas comment le faire sous Dreamweaver, j’ai l’impression que le CSS à ce niveau est unique pour l’ensemble de la page. Cela me pose un problème actuellement car quelques lignes de mon site n’apparaissent pas.
Par exemple, l’url de la page en question est http://www.flexilog.fr/services.html
Merci d’avance pour votre aide et bonne continuation à ce super forum.

Xavier

Afficher la suite

A voir également:

Configuration des liens (couleur, survol, ...
Ethernet n'a pas de configuration ip valide - Guide
Créer un lien pour partager des photos - Guide
Panneau de configuration - Guide
Excel cellule couleur si condition texte - Guide
Boite a couleur - Télécharger - Divers Photo & Graphisme

3 réponses

Réponse 1 / 3

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

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   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.

Réponse 2 / 3

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

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.

Xavier

Un énorme merci pour ton aide !! Vive la communauté informatique.
J'ai bien sur modifié le contenu des pages de mon site, maintenant il marche au poil. C'est clair que le code (le mien) n'est pas parfait à 100%, il doit surement y avoir des choses à améliorer encore, mais avec ton aide, j'en suis très satisfait.
Encore un grand chapeau pour ta réactivité et ton expertise. Si j'ai besoin de renseignements un autre jour, je saurai ou me tourner !!!

Réponse 3 / 3

pinky-mango Messages postés 29 Date d'inscription Statut Membre Dernière intervention 1

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!

Discussions similaires

sertissage des cables rj45

pipette dans word 365

Réglage pour réception Astra 19.2

Votre réponse

Discussions similaires