Bouton personnalisé barre de navig surbrillance

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

Résolu Bouton personnalisé barre de navig surbrillance

Message par ndtest le Mer 7 Aoû 2013 - 1:51

Bonjour, j'ai suivi ce tuto : http://forum.forumactif.com/t246228-images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris qui fonctionne très bien.
Je voulais connaitre l'identifiant pour un bouton personnalisé (En-tête et navigation/Barre de navigation/Ajouter un menu personnalisé) afin que je puisse le rendre également en surbrillance car il fait tache !

D'avance merci


Dernière édition par ndtest le Ven 9 Aoû 2013 - 19:43, édité 1 fois

ndtest
Nouveau membre

Messages : 10
Inscrit(e) le : 20/05/2012

http://ndtest.forumactif.fr
ndtest a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par Self le Mer 7 Aoû 2013 - 13:10

Bonjour.

Pour savoir cela:
Right clique droit sur votre bouton
Right inspecter l'élément
Right il vous donnera un identifiant ecris en vert avec un # devant ou une class écrite en bleu avec un . devant.
Right prenez l'identifiant ou la class si il n'y à pas d'indentifiant et faite la manipulation Wink .

Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par ndtest le Mer 7 Aoû 2013 - 22:57

Bonjour, merci de votre aide.

J'ai regardé et j'obtiens ça :
Code:
<a class="mainmenu" href="http://wait4us.egame-star.com/match.html" target="_blank"><img src="http://img202.imageshack.us/img202/7387/nibc.png" alt="Site" title="Site" border="0" hspace="0"></a>

Donc je ne vois pas

Edit : je viens de piger que la class c'est mainmenu j'essaye.

ndtest
Nouveau membre

Messages : 10
Inscrit(e) le : 20/05/2012

http://ndtest.forumactif.fr
ndtest a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par Self le Mer 7 Aoû 2013 - 23:02

Bonsoir ^^ .

Il faudra écrire la class comme sa
Code:
.mainmenu
Corialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par ndtest le Mer 7 Aoû 2013 - 23:25

Ce n'est pas mainmenu, en faite mainmenu c'est juste en dessous de la barre et ça prends toute la largeur de la barre de navigation. Auriez vous une solution ?

Voila le site en cas de besoin : http://wait4us.fr-bb.com/

ndtest
Nouveau membre

Messages : 10
Inscrit(e) le : 20/05/2012

http://ndtest.forumactif.fr
ndtest a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par Self le Jeu 8 Aoû 2013 - 12:47

Bonjour ^^ .

Essayez en passant par le nth-child :
Code:
a.mainmenu:nth-child(10)

Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par ndtest le Jeu 8 Aoû 2013 - 18:59

Bonjour, ça ne fonctionne toujours pas.
J'ai pris un screen pour vous montrer le conflit



Il apparait en dessous de la prise et pas dans la tête par contre avec nth-child(10) ce n'est plus dans toute la barre mais seulement en dessous de la prise.

Sauriez-vous quel est le problème que je rencontre et comment y remédier ?

ndtest
Nouveau membre

Messages : 10
Inscrit(e) le : 20/05/2012

http://ndtest.forumactif.fr
ndtest a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par Self le Jeu 8 Aoû 2013 - 19:03

bonjour.

Vous avez bien appliquer votre code comme cela dans votre feuille de style CSS ?
Code:
a.mainmenu:nth-child(10){
   background-image:url('URL'); /*image si la souris ne survole pas*/
   width:??px; /*Largeur de l'image*/
   height:??px; /*Hauteur de l'image*/
}
a.mainmenu:nth-child(10) :hover{
   background-image:url('URL'); /*image si la souris survole*/
   width:??px; /*Largeur de l'image*/
   height:??px; /*Hauteur de l'image*/
Cordialement Smile.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par ndtest le Jeu 8 Aoû 2013 - 19:12

Exactement comme ça

ndtest
Nouveau membre

Messages : 10
Inscrit(e) le : 20/05/2012

http://ndtest.forumactif.fr
ndtest a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par Self le Jeu 8 Aoû 2013 - 20:18

Bonsoir.

Sur votre forum je vois pour ce bouton:
Code:
a.mainmenu:nth-child(10){VALEUR}
a.mainmenu :hover{VALEUR}
Cela devrais être:
Code:
a.mainmenu:nth-child(10){VALEUR}
a.mainmenu:nth-child(10) :hover{VALEUR}
Pourriez vous me passer le code que vous avez coller dans votre feuille de style s'il vous plait ?

Cordialement Smile .


Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par ndtest le Jeu 8 Aoû 2013 - 21:42

Code:
        a.mainmenu:nth-child(10){
           background-image:url('http://imageshack.us/a/img202/7387/nibc.png');
          width:84px;
          height:64px;
       }
        a.mainmenu:nth-child(10):hover{
           background-image:url('http://imageshack.us/a/img819/9583/jwf2.png');
          width:84px;
          height:85px;
       }
Ou en entier :
Spoiler:

Code:
/*IMAGE INDEX*/
        #i_icon_mini_index{
           background-image:url('http://img835.imageshack.us/img835/3784/hh2k.png');
           width:75px;
          height:64px;
       }
        #i_icon_mini_index:hover{
           background-image:url('http://img542.imageshack.us/img542/6245/0ax9.png');
          width:75px;
          height:86px;
       }
        /*IMAGE FAQ*/
        #i_icon_mini_faq{
           background-image:url('http://img16.imageshack.us/img16/664/p36p.png');
           width:84px;
          height:64px;
       }
        #i_icon_mini_faq:hover{
           background-image:url('http://img577.imageshack.us/img577/523/prh0.png');
           width:84px;
          height:85px;
       }
        /*IMAGE RECHERCHE*/
        #i_icon_mini_search{
           background-image:url('http://img62.imageshack.us/img62/4527/tbyr.png');
          width:84px;
          height:64px;
       }
        #i_icon_mini_search:hover{
           background-image:url('http://img268.imageshack.us/img268/239/xq44.png');
          width:84px;
          height:85px;
       }
        /*IMAGE LISTE MEMBRES*/
        #i_icon_mini_members{
           background-image:url('http://img600.imageshack.us/img600/3453/8v4d.png');
          width:84px;
          height:64px;
       }
        #i_icon_mini_members:hover{
           background-image:url('http://img593.imageshack.us/img593/6717/29dr.png');
          width:84px;
          height:85px;
       }
        /*IMAGE GROUPES*/
        #i_icon_mini_groups{
           background-image:url('http://img713.imageshack.us/img713/4946/ujmf.png');
          width : 84px;
           height:64px;
       }
        #i_icon_mini_groups:hover{
           background-image:url('http://img41.imageshack.us/img41/5633/vtbx.png');
           width:84px;
          height:85px;
       }
        /*IMAGE PROFIL*/
        #i_icon_mini_profile{
           background-image:url('http://img534.imageshack.us/img534/6882/szd.png');
          width:84px;
          height:64px;
       }
        #i_icon_mini_profile:hover{
           background-image:url('http://img580.imageshack.us/img580/7334/djpj.png');
          width:84px;
          height:85px;
       }
        /*IMAGE MP (pas de nouveaux messages)*/
        #i_icon_mini_message{
           background-image:url('http://img196.imageshack.us/img196/3103/xtnb.png');
          width:84px;
          height:64px;
       }
        #i_icon_mini_message:hover{
           background-image:url('http://img189.imageshack.us/img189/2640/ck53.png');
          width:84px;
          height:85px;
       }
        /*IMAGE MP (nouveaux messages)*/
        #i_icon_mini_new_message{
           background-image:url('http://img39.imageshack.us/img39/1667/2xu.gif');
          width:84px;
          height:64px;
       }
        #i_icon_mini_new_message:hover{
           background-image:url('http://img39.imageshack.us/img39/1667/2xu.gif');
          width:84px;
          height:85px;
       }
        /*IMAGE DECONEXION*/
        #i_icon_mini_logout{
           background-image:url('http://img836.imageshack.us/img836/2498/2b5x.png');
          width:84px;
          height:64px;
       }
        #i_icon_mini_logout:hover{
           background-image:url('http://img689.imageshack.us/img689/236/yd0h.png');
          width:84px;
          height:85px;
       }
        /*IMAGE S'ENREGISTRER*/
        #i_icon_mini_register{
           background-image:url('http://img547.imageshack.us/img547/4949/wijn.png');
          width:84px;
          height:64px;
       }
        #i_icon_mini_register:hover{
           background-image:url('http://img585.imageshack.us/img585/6598/cm11.png');
          width:84px;
           height:85px;
       }
        /*IMAGE CONNEXION*/
        #i_icon_mini_login{
           background-image:url('http://img90.imageshack.us/img90/3121/nxg.png');
          width:84px;
          height:64px;
       }
        #i_icon_mini_login:hover{
           background-image:url('http://img801.imageshack.us/img801/135/82pi.png');
          width:84px;
          height:85px;
       }
        a.mainmenu:nth-child(10){
           background-image:url('http://imageshack.us/a/img202/7387/nibc.png');
          width:84px;
          height:64px;
       }
        a.mainmenu:nth-child(10):hover{
           background-image:url('http://imageshack.us/a/img819/9583/jwf2.png');
          width:84px;
          height:85px;
       }

ndtest
Nouveau membre

Messages : 10
Inscrit(e) le : 20/05/2012

http://ndtest.forumactif.fr
ndtest a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par Self le Jeu 8 Aoû 2013 - 22:05

Mettez un espace comme cela au code:
Code:
a.mainmenu:nth-child(10) :hover{
          background-image:url('http://imageshack.us/a/img819/9583/jwf2.png');
          width:84px;
          height:85px;
      }
Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par ndtest le Ven 9 Aoû 2013 - 0:42

Code:
a.mainmenu:nth-child(10){
          background-image:url('http://imageshack.us/a/img202/7387/nibc.png');
          width:84px;
          height:64px;
      }
a.mainmenu:nth-child(10) :hover{
          background-image:url('http://imageshack.us/a/img819/9583/jwf2.png');
          width:84px;
          height:85px;
      }
Pas de changement. Encore une fois merci de m'aider

ndtest
Nouveau membre

Messages : 10
Inscrit(e) le : 20/05/2012

http://ndtest.forumactif.fr
ndtest a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par Self le Ven 9 Aoû 2013 - 15:46

J'aivais pourtant un petit changement lorsque je l'aplliquer à l'éditeur de style :/ .
Je vais chercher et reviendrais vers vous si une solution me vient Wink .

Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bouton personnalisé barre de navig surbrillance

Message par ndtest le Ven 9 Aoû 2013 - 19:10

Merci bien !

Edit : Après une petite recherche sur google, j'ai finis par trouver comment créer l'id du bouton. Cela a fonctionner.
Le problème est donc résolu. Merci de m'avoir aider

Voici le lien : http://forum.forumactif.com/t273262-bouton-personalise-barre-de-navigation-comment-lui-ajouter-une-id-pour-le-css

Encore merci de vous être pencher sur mon soucis !

ndtest
Nouveau membre

Messages : 10
Inscrit(e) le : 20/05/2012

http://ndtest.forumactif.fr
ndtest 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