Configuration des liens (couleur, survol, ...
Résolu/Fermé
Xavier
-
14 nov. 2006 à 20:05
pinky-mango Messages postés 30 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 14 octobre 2022 - 3 févr. 2010 à 15:57
pinky-mango Messages postés 30 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 14 octobre 2022 - 3 févr. 2010 à 15:57
A voir également:
- Configuration des liens (couleur, survol, ...
- Ethernet n'a pas de configuration ip valide - Guide
- Somme si couleur - Guide
- Retablir configuration usine chromecast - Guide
- Créer un lien pour partager des photos - Guide
- Excel couleur conditionnelle - Guide
3 réponses
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 773
15 nov. 2006 à 16:29
15 nov. 2006 à 16:29
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
Et donc ces styles ne s'appliquent qu'aux liens contenus dans les <div> ayant cette id.
Ton code HTML :
Ton code CSS :
Pour les liens dans le texte, ça a été beaucoup plus simple.
J'ai simplement attribué une “id” à l'<ul> :
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.
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:visitedetc.
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"> <a href="achat.html">Achat</a> <br /> <a href="entreposage.html">Entreposage</a><br /> <a href="gestion_des_stocks.html">Gestion des stocks</a><br /> <a href="transport.html">Transport</a><br /> <a href="systemes_informations.html"> Systèmes 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.
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 773
15 nov. 2006 à 20:32
15 nov. 2006 à 20:32
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.
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.
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 !!!
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 !!!
pinky-mango
Messages postés
30
Date d'inscription
samedi 5 septembre 2009
Statut
Membre
Dernière intervention
14 octobre 2022
1
3 févr. 2010 à 15:57
3 févr. 2010 à 15:57
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:
je ne sais pas ou mettre lien hypertexte?
Aider moi!
Merci!
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!