ajout d'un symbole

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu ajout d'un symbole

Message par basique` le Dim 8 Avr 2012 - 14:45

Bonjour !
J'aimerais savoir comment ajouter un symbole au survol d'un lien Smile
Le symbole en question serais celui-ci : " × "
j'aimerais savoir comment on fait, dans le css, pour que je puisse le mettre avant ou après, et changer de symbole si besoin Wink
Merci d'avance *-*

(PS : j'ai regarder avec ce site pour les codes html, je sais pas si ça peut servir : http://www.toutimages-bannedbygoogle.com/codes_caracteres.htm)


Dernière édition par basique` le Dim 8 Avr 2012 - 17:07, édité 1 fois

basique`
Nouveau membre

Féminin
Messages : 28
Inscrit(e) le : 07/04/2012

http://ny-horse-school.forum-canada.net/
basique` a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajout d'un symbole

Message par Anzu le Dim 8 Avr 2012 - 15:03


Rebonjour,

J'ai déplacé votre sujet.

C'est un simple
Code:
:hover
à mettre.

Par exemple, pour un lien:

Code:
a:hover {
background-image:url('lien de l'image');
background-repeat:no-repeat;
}

Cordialement.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajout d'un symbole

Message par Matriochka le Dim 8 Avr 2012 - 15:08

Bonjour,

Il vous faut utiliser le pseudo-élément :before, durant le survol.

Exemple avec forumlink (les titres de forums) :
Code:
a.forumlink:hover:before {
content:"o";}
Là, remplacez "o" par la valeur et le caractère de votre choix.

À noter que :before peut évidemment être remplacé par :after Wink

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajout d'un symbole

Message par basique` le Dim 8 Avr 2012 - 16:51

J'ai essayer la solution de Matrichoka et ça ne marche pas :'(

Voici donc mon CSS :
Code:
/*--- titres des forums ---*/
.forumlink
{text-shadow: #000000 0px 0px 0px; /*ombre*/
font-style:normal; /*style du txt*/
font-size: 14px; /*taille du txt sans le survol*/
text-align: center; /*alignement du txt*/}
a.forumlink:hover /*au survolement*/
{text-shadow: #000000 0px 0px 0px;
font-size: 14px;
font-style: normal;
text-align: center;
padding-left: 8px; /* Distance lors du déplacement */
text-transform: smallcaps; /* Majuscules lors du déplacement */
color: #couleur !important;
text-decoration: none;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 0.2s;  /* Temps de déplacement */
-moz-transition: 0.2s; /* Temps de déplacement (pour une version en particulier */
-o-transition: 0.2s; /* Temps de déplacement (pour une version en particulier */
-htm-transition: 0.2s; /* Temps de déplacement (pour une version en particulier */
-webkit-transition: 0.2s; /* Temps de déplacement (pour une version en particulier */}

/*--- tous les liens du forum ---*/
a { text-decoration: none;}
 a:hover { text-decoration: none !important; }

/*--- disposition catégo & forumc---*/
.cadre1 {
  border: 1px #AAAAAA solid;
  padding: 3px;
  min-height: 150px;
  height: auto;
}
 
.cadre2 {
  border: 1px #AAAAAA solid;
  min-width: 150px;
  padding: 3px;
  min-height: 160px;
  font-size: 11px;
  height: auto;
}
 
.forumline2 {
  border: 1px #AAAAAA solid !important;
  padding: 3px;
  margin: 0px !important;
}

.forumline {
  margin-bottom: -7px !important;
}

/*--- titre catégo ---*/
        .secondarytitle h2{
        font-size: 25px;
        font-color: #444444;
        font-family: Arial;
        text-shadow: 0px 0px 0px #FFFFFF;
        text-align: left !important;
        margin-bottom: 0px;
        }
/*--- liens description forums ----*/
.liensdescriptionforum{
  border-left: 2px solid #AB5265;
  border-right: 2px solid #AB5265;
  text-align: left;}
.liensdescriptionforum:hover{
  border-left: 2px solid #F4FFE3;
  border-right: 2px solid #F4FFE3;
  text-align: left;
  padding-left: 25px; /* Distance lors du déplacement */
  text-transform: smallcaps; /* Majuscules lors du déplacement */
  color: #couleur !important;
  text-decoration: none;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 0.2s;  /* Temps de déplacement */
  -moz-transition: 0.2s; /* Temps de déplacement (pour une version en particulier */
  -o-transition: 0.2s; /* Temps de déplacement (pour une version en particulier */
  -htm-transition: 0.2s; /* Temps de déplacement (pour une version en particulier */
  -webkit-transition: 0.2s; /* Temps de déplacement (pour une version en particulier */}

.liensdescriptionforum:hover:after{
  content: ×;}
/*--- liens menu ---*/
a.mainmenu{
  border-left: 3px solid #AAA;
  background-color: #F4FFE3;}

a.mainmenu:hover{
  border-left: 8px solid #AAA;
  background-color: #F4FFE3;}

En fait, la petite croix serait à mettre tout à gauche, à la place de la bordure droite des liens des descriptions dans les sous parties Wink

Merci d'avance ♥
(PS : le lien de mon forum est celui de mon profil)

basique`
Nouveau membre

Féminin
Messages : 28
Inscrit(e) le : 07/04/2012

http://ny-horse-school.forum-canada.net/
basique` a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajout d'un symbole

Message par Matriochka le Dim 8 Avr 2012 - 16:59

Il vous faut ajouter des guillemets afin d’introduire votre symbole Smile
Comme je l’ai fait plus haut :
Code:
a.forumlink:hover:before {
content:"o";}

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajout d'un symbole

Message par basique` le Dim 8 Avr 2012 - 17:06

Ah bah oui, je suis bête ><
Merci beaucoup ♥ !

Je mets en résolu et merci merci merci !!!

basique`
Nouveau membre

Féminin
Messages : 28
Inscrit(e) le : 07/04/2012

http://ny-horse-school.forum-canada.net/
basique` a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum