modifier le trait sous le lien. Fermé

Question

Bonjour, 

Je cherche à remplacer le trait sous le lien par un image de trait plus jolie (un trait fait au pinceau.)
Je précise que je ne suis pas très expérimenté en script et en code, j'ai fait mon site avec kompozer et je commence tout juste à découvrir les codes html et css

J'ai compris que la modification du lien ce faisait avec a:link  text-decoration: 

j'ai réussit à supprimer le trait, à faire pencher le lien au passage de la sourie, mais je n'arrive pas a modifier l'apparence du trait.

es-ce possible?

merci d'avance pour vos réponse

Configuration: Windows Vista / Firefox 3.6.16

bugs · Answer

Le mieux et de créer le trait sous photoshop pour de l'intégré en CSS

steaky · Answer

Yo,
j'image que ton lien est sur du texte?

En effet il faut utiliser le css et tu as trouvé la bonne propriété:
a:link{
text-decoration: underline;
}
// pour afficher le texte souligné, et pour le masquer c'est
a:link{
text-decoration: none;
}
// bref ceci est assez limité et s'appliquera à toutes tes balises de lien(<a href="...)

Voici un petit code ou tu peut changer les propriétés
Dans la partie <head> entre les balises:
<style type="text/css" rel="stylesheet">
et celle qui ferme </style>
Rajoute ceci:
/* pour le style du lien quand rien ne se passe*/

a.liendecoratif{
text-decoration:none;
border-bottom: 2px solid #ffffff;
}
/* #ffffff correspond à l'intensité lumineuse maximum numéroté en hexadécimal sur des couples correspond à Rouge, Vert et Bleu(donc noir c'est #000000 et le bleu le plus bleu est #0000ff ce sont des chiffres mais arrivé à 9 tu passes à A, puis B, puis C, puis D, puis E et F)*/
/* le même lien mais au survol de la souris */
a.liendecoratif:hover{
border-bottom: 2px groove #ffcc22;
}

Donc au survol de la souris pour cette "classe" la bordure du bas(border-bottom) aura 2px d'épaisseur, le style groove et la couleur #ffcc22(jaune doré)

Pour appliquer le style il faut indiquer dans la balise du lien celui ci en indiquant avec l'attribut "class" de cette façon:
/* a de anchor(ancre en anglais) correspond à la balise de lien hypertexte*/

<a href="http://adressse_du_lien.html" class="liendecoratif">
Cliquez Ici
</a>
Voilà tu peut varier les épaisseurs, les couleurs et les styles de bordure parmi :
groove, ridge, solid, inset, outset
Il suffit de remplacer le groove de l'exemple par celui de ton choix.

Pour plus d'explication jettes unoeil sur un cours de css débutant(une fois le html acquis bien entendu).

herminemoop · Answer

merci pour ces explications. et surtout merci d'avoir pris le temps de me l'expliquer simplement.

J'arrive à donné des style plutôt sympa.

Es ce qu'il est possible de remplacé le trait part un image en .gif?

J'ai commencé a suivre les explication sur le html et le css sur le site du zéro.

herminemoop · Answer

je n'arrive pas a faire apparaitre l'image avec background.
la phrase:
 background:url(ton_image.gif) bottom repeat-x;
ce transforme automatiquement en :
background: transparent url(ton_image.gif) repeat-x scroll center bottom;

Modifier le trait sous le lien.

4 réponses

Discussions similaires