Souligné au survol d’un hyperlienRésolu/Fermé

Question

Bonjour à tous voici mon problème.
Je suis en train de créer un site sous Dreamweaver et j’ai effectué un menu à gauche de celui-ci. Mais le problème c’est qu’il y a énormément  d’hyperliens dans les sous menus ce qui nuie à la lisibilité du site (trop de surlignage et donne un effet illisible).Donc je voudrais savoir si il existe un script pour retirer le souligné sous les liens hypertextes et de le faire apparaître seulement au survol de la souris. Je précise que mon site est en HTML

Merci a tous pour votre aide

anon · Accepted Answer

Bonjour, 

Premièrement il est important de savoir que les liens hypertextes sont soulignés pour permettre au lecteur de les répérer immédiatement au milieu d'une page. c'est donc généralement une très mauvaise pratique de ne pas afficher le soulignement, ou de ne l'afficher qu'au survol.

Après cet avertissement de rigueur, je précise que dans le cas de menus, il est implicite et évident (opur quiconque à déjà navigué sur le web) qu'il s'agit là de liens.

nul besoin d'un script pour obtenir le résultat que vous cherchez, cela se passe au niveau de la feuille de style (CSS), il s'agit de définir un style pour les liens de votre menu.

par exemple, imaginons que le style à appliquer aux liens de votre menus soit la classe "menugauche", pour obtenir l'effet que vous souhaiter, dans la feuille de style il suffit d'ajouter:

a.menugauche:link {text-decoration:none}     /* lien non visité */
a.menugauche:visited {text-decoration:none}  /* lien visité */
a.menugauche:hover {text-decoration:underline}   /* lien survolé */
a.menugauche:active {text-decoration:none}   /* lien sélectionné */

pour en savoir plus sur les CSS:

cssintro
https://www.alsacreations.com/
https://openweb.eu.org/css/
http://css.mammouthland.net/
https://www.w3schools.com/css/

Tonysurf55 · Answer

Bonjour, 

faut que tu utilise les feuilles de style, c'est des fichiers.css
renseigne toi sur les css, c'est tres facil

stanboost · Answer

Bonjour, Tu n'as pas besoin de faire du CSS juste pour des liens tu fais comme ci-dessous. il te suffit d'inserer ces lignes entre les balises et : color:#000000; : ceci definit la couleur de tous les liens de la page. Ici, ils seront noirs. text-decoration:none; : ici, on indique que les liens ne seront pas soulignés. color:#FF0000; : ceci indique que les liens passeront au rouge au passage de la souris. text-decoration:underline; : ici, on indique qu'ils se souligneront. (La totalité des liens sur la page seront du type ci-dessus) Pour le CCS: - Explications A : designe la classe du lien. Dans cet exemple c'est la classe par défaut (). link : Il designe les liens qui n'ont pas encore été visités. active : Cet attribut désigne le lien lorsqu'il est cliqué. visited : Celui-ci désigne les liens précédemment visités. hover : Le hover designe les liens lorsqu'il sont survolés. Il te suffit de faire une feuille de style (.CSS) une recherche GOOGLE: Tutorial feuille de style Bonne recherche :)

stanboost · Answer

PS/
Dans ton cas l'utilisation d'une feuille de style ferait que tu devrais modifier la totalité de ton site
pour le passage en CSS pas compliqué mais c'est du temps à faire tous les changements.

D'ou ma solution n°1     ;)

faureste · Answer

Merci à tous, 

il est vrai que de changer autant de pages (environ 120 pages mini) à la main c'est trés long, mais je crois également que d'apprendre le CSS neccessite encore + de temps. Entre le PHP, le CCS, HTML on voit des codes partout (on devient vite allergique) mais si il faut en passer par la pour que les internautes si retrouvent au niveau naviguation... Bref, ça risque d'etre un apprentissage long et fastidieux

anon · Answer

Bonjour, 

la solution de stanboost implique de modifier *tous* tes fichiers contenant le menu à chaque fois que tu souhaites modifier ton menu, utiliser un fichier externe permet de modifier un seul fichier pour la totalité du site par la suite. 

rassure toi, apprendre à se servir des css se fait en l'espace d'un weekend, il n'y a que dans les cas avancés et dans les bugs d'affichages des anciennes versions d'IE que ça peut être prise de tête.

pour ne pas avoir à modifier toutes les pages à chaque fois que tu modifies ton menu, il te suffit de place le code correspondant à ton menu dans un fichier externe à la page et d'l'inclure dans la page avec une ligne de code php.

si tu souhaites modifier chacun des liens de ton menu un par un, tu peux utiliser la déclaration de css en ligne (pas recommandé car cela complique la maintenance et retire beaucoup de son intérêt au CSS).

voila 2 exemple de comment ça se passe avec le code à gauche et le résultat à droite, celui qui correspond à ce que tu demande est le dernier du 2eme exemple.
https://www.w3schools.com/css/tryit.asp?filename=trycss_link 
https://www.w3schools.com/css/tryit.asp?filename=trycss_link2

@stanboost: gare à la confusion, ce que tu présentes comme n'etant pas du CSS, est en fait une déclaration interne de CSS.
les déclarations de CSS sont de 3 types: externe, interne et en ligne. mais ça reste du CSS. voir: https://www.w3schools.com/css/css_howto.asp 
et le code que tu donne en exemple posera problème car il redéfinit le style de toutes les balises a et pas seulement celle du menu.

stanboost · Answer

Bonsoir faureste

Le CSS n'est pas le langage le plus compliqué et il y a des tutoriaux vraiment partout,
par contre de là à apprendre en un week end... perso j'ai pas eu de mal avec HTML et PHP mais le CSS 
j'ai vraiment pas accroché... pour dire, je passe par un générateur pour mes feuilles de styles :)


---------------------------------

Bonsoir anon

tu dis ..implique de modifier *tous* tes fichiers contenant le menu à chaque fois...
mais pour une feuille de style c'est la même chose il doit changer la totalité des pages...

En effet tu as raison,  pour le CSS, après comme je dis plus haut le code change la totalité des liens ;)

Bonne soirée à tous

anon · Answer

Je n'y ai pas pensé tout à lheure, mais il y a des exemples de menus en css de toutes sortes qui sont disponible sur http://www.cssplay.co.uk/menus/

@stanboost:je vais supposer que tu es de bonne foi et que tu n'as pas bien lu ce que j'ai écrit ou que je ne me suis pas exprimé de manière suffisament claire.

je me cite et souligne la différence entre une déclaration CSS interne et externe:

la solution de stanboost implique de modifier *tous* tes fichiers contenant le menu à chaque fois que tu souhaites modifier ton menu, utiliser un fichier externe permet de modifier un seul fichier pour la totalité du site par la suite.

dans tous les cas de figure, la modification initiale de tous les fichiers est requise, la différence entre les deux approches se fait après cette modification initiale: dans le cas d'une déclaration interne, toute modification ulterieure du style (changer la couleur desliens du menu par exemple) implique de modifier à chaque fois tous les fichiers tandis que dans le cas d'une déclaration externe les modification ulterieure se font toutes au sein d'un seul et unique fichier. 

Le principal intérêt des feuilles de style est là: pouvoir le style de la totalité d'un site à partir d'un seul et unique fichier.

de même j'ai bien apprendre à servir des CSS se fait en l'espace d'un weekend et non pas connaitre/maitriser CSS, par là je voulais dire qu'il ne faut pas longtemps pour comprendre comment ça fonctionne et commencer à s'en servir pour des choses simples comme retirer le trait de soulignement sous certains liens d'une page et pas des autres. Et en disant ça j'ai compté large, pour moi (qui possède certaine facilités dans le domaine technique) la prise en main des CSS ne m'a pris qu'une grosse demie-heure.

faureste · Answer

Merci pour toutes ces remarques...

Je pense que si l'on veut faire un site propre et bien construit le CSS devient incontournable, mais moi  j'ai plus tendance à soigner le design de mon site,  et le problème c que l'on peut faire un site superbe mais sans une ergonomie... c pas le top. (Le visiteur perdra de l'attention et ne reviendra plus) En attendant j'arrive un peu à bricoler le code  HTML et maintenant se sera également les feuilles de style CSS.
On n’a rien sans rien. 
En même temps je veux réellement réussir se premier site et je viendrais souvent sur le forum vous embêtez avec mes questions bêtes ;)

Pour ce qui est du PHP ça attendra un peu... :/ et pourtant ça me serait bien utile (formulaire, news letter, module de recherche interne)

merci encore et @ bientot :)

stanboost · Answer

@ anon

autant pour moi il est vrai que j'ai lu ton post "à la rapide" :)
le resultat est le même il doit modifier toutes les pages de toute façon!
et dans les deux cas il doit changer toutes les pages on est d'accord!
merci de l'éclairssisement et des liens intéressant.
Pour la prise en main du CSS bein je dois être plus bête qu'un autre alors 
parce que moi c'etait pas simple à mon goût,  enfin chacun sont rythme et ses préférences :)

--------------------------------


@ faureste

Comme tu dis, on n’a rien sans rien. 
C'est vrai qu'une feuille de style c'est vraiment top, j'ai du mal encore avec le CSS
surtout niveau compatibilité IE, SAFARI et Firefox j'avais moins de mal à l'époque,
mais mon code etait pas très propre non plus ^^
Et je te comprend pour le PHP c'est plus interessant donc peut être plus facile
à apprendre c'est mon cas... je delaisse un peu le CSS pour le PHP a vrai dire :)

Bon courage pour la suite ;)

lavigne_prog · Answer

bjr ,
presk le mm probleme moi je ve ke mes liens changent de couleurs une fois ke le curseur se positionne sur mon lien .
g deja fé une feuille de style pour anuler le soulignement la voila
.links {font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #0D85B3;
	text-decoration: none;
	border: none;

}

et je sais pa ou ajouter ce hover pour ke mes liens changent de couleurs sv aidez moi g essayé ca 
A.links:hover{
color="red"}
mais ca na pa marché merci jen serais reconnaissante.

Jessicat322 · Answer

Voici le code que j'ai pu créer.  la classe topmenu fera apparaître une ligne assez large (verte) sous le texte du lien lorsque le curseur passera dessus.  Fonctionne sous firefox et exploreur en principe...

.topmenu {
	vertical-align:middle;
}
.topmenu  a {
	color:#000000;
	text-decoration:none;
	font-size: 19px;
	margin-left: 12px;
	margin-right: 12px;
}
.topmenu a:visited {
	color:#000000;
	text-decoration:none;
}
.topmenu a:hover {
	border-bottom: 3px solid;
	border-color: #008000;
	padding-bottom: 5px;
}

Souligné au survol d’un hyperlien

12 réponses

Discussions similaires

Newsletters