Bouton personnalisé barre de navig surbrillance

2 participants

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

Résolu Bouton personnalisé barre de navig surbrillance

Message par ndtest 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
avatar

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 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

Self
Membre actif

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

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

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

Message par ndtest 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.
avatar

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 Mer 7 Aoû 2013 - 23:02

Bonsoir ^^ .

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

Self
Membre actif

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

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

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

Message par ndtest 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/
avatar

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 Jeu 8 Aoû 2013 - 12:47

Bonjour ^^ .

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

Cordialement Smile .
Self

Self
Membre actif

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

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

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

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

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

Bouton personnalisé barre de navig surbrillance Captur10

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 ?
avatar

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 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

Self
Membre actif

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

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

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

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

Exactement comme ça
avatar

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 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

Self
Membre actif

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

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

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

Message par ndtest 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:
avatar

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 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

Self
Membre actif

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

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

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

Message par ndtest 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
avatar

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 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

Self
Membre actif

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

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

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

Message par ndtest 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 !
avatar

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

- Sujets similaires

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