Modifier le trait sous le lien.

Fermé
herminemoop - 30 mars 2011 à 19:38
 herminemoop - 5 avril 2011 à 12:27
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

A voir également:

4 réponses

Le mieux et de créer le trait sous photoshop pour de l'intégré en CSS
0
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).
0
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.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
1 avril 2011 à 13:09
Il faut mettre l'image en background:
a:link{
background:url(ton_image.gif) bottom repeat-x;
text-decoration:none;
}
0
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;
0
en fait, je n'avais pas écrit l'url de l'image correctement. Elle s'affiche, mais derrière le texte du lien , non pas dessous.
0