Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 : https://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 .
avatar

Self
Membre actif

Masculin
Messages : 3717
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 .
avatar

Self
Membre actif

Masculin
Messages : 3717
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 .
avatar

Self
Membre actif

Masculin
Messages : 3717
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.
avatar

Self
Membre actif

Masculin
Messages : 3717
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 .

avatar

Self
Membre actif

Masculin
Messages : 3717
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 .
avatar

Self
Membre actif

Masculin
Messages : 3717
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 .
avatar

Self
Membre actif

Masculin
Messages : 3717
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 : https://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