Commentaires sur : CSS #01 : Souligner vos liens de couleur différente

Par : devis travaux

devis travaux — Mon, 26 Apr 2010 16:12:34 +0000

On peut faire ca avec dreamweaver ? J’y connais rien.. ^^
En tous cas merci pour toutes ses infos qui sont bien utiles pour un pauvre petit etudiant comme moi qui galere avec ses cours de PAO !
Bonne continuation

Par : Bouctoubou

Bouctoubou — Thu, 16 Oct 2008 07:19:30 +0000

@ekevin : Oui, les classiques :) De toute façon c'est bien de varier le a, du a:hover! @jerr : De rien! :)

Par : jerr

jerr — Tue, 14 Oct 2008 11:40:50 +0000

Merci de l’astuce ;)

Par : ekevin

ekevin — Tue, 14 Oct 2008 11:23:26 +0000

J’aime bien aussi faire l’inverse partir d’un lien souligné vers un lien non souligné, exemple :

a { text-decoration: underline; }
a: hover { text-decoration: none; }

ou encore s’amuser avec font-weight à bold ou normal, exemple

a { text-decoration: none; }
a: hover { font-weight: bold; }

Par : Bouctoubou

Bouctoubou — Sun, 12 Oct 2008 09:39:03 +0000

@jparia : Oui, ce que je fais aussi souvent pour mettre un icône sur une liste à puce par exemple. @Lio : Merci Lio! :)

Par : Lio

Lio — Sat, 11 Oct 2008 11:16:11 +0000

Très sympa cette nouvelle série de billets.

Explications claires, code propre de valide : de vraies ressources pour les débutants :)

Par : jparia

jparia — Sat, 11 Oct 2008 09:28:40 +0000

Oui, l’idée est sympa,
j’utilise ce type de style pour différencier différents liens (aide, remarque, alerte…) avec des couleurs et des icônes différentes à droite du lien.
Asctuce:
pour éviter que le texte passe au dessus de l’icône, j’applique un padding-right légèrement supérieur à la largeur de celle-ci.

exemple:

.lienaide {
cursor: pointer;
color: #696;
text-decoration: underline;
background-image: url(ico_aide.gif) no-repeat right top;
padding-bottom: 2px;
padding-right: 18px;
height: 16px;
}