recodage d'un bouton de la navbar

[Mizar]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://passionfoveon.forumactif.org

Description du problème

bonjour
j'ai suivi un tuto pour le changement d'aspect des boutons au passage de la souris
tout est ok sauf pour un bouton que j'ai rajouté
j'ai mis le css suivant

Spoiler:

les dimensions fonctionnent et agissent sur le bouton
mais si je mets une image transparente au niveau de "entête et navigation", le bouton disparait
voici le css

Spoiler:

merci pour votre aide

[Arobasse]

Hello Mizar,

Le mieux serait qu'on puisse copier et coller le code et n'ont qu'on le retape de l'image

Aussi, il serait bon de savoir qu'elle bouton sur ton site ne fonctionne pas ?

Merci

[Mizar]

c'est le bouton forum
ou je prourrais remettre le bouton accueil mais avec l'image "forum", mais je ne sais pas remettre "accueil" ...

[Mizar]

Hello Mizar,

Le mieux serait qu'on puisse copier et coller le code et n'ont qu'on le retape de l'image

bonjour
je ne comprend pas ce que vous voulez dire?
j'ai copié collé le codage en changeant le mot "bidule" par "forum"
il s"agit du bouton "forum" que j'ai rajouté pour remplacer "accueil"
merci

[Arobasse]

Tu fournis le CSS dans une image, si tu pourrais copier/coller le code entre les balise suivante, cela serait géniale !

Code:

[code][/code]

[Mizar]

Ça y est j'ai compris

Code:

 }
        .forum {
        background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button26.png"class="forum'); /*image si la souris ne survole pas*/
        width: 80px; /*Largeur de l'image*/
        height: 28px; /*Hauteur de l'image*/
        }
        .forum:hover{
        background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button52.png"class="forum'); /*image si la souris survole*/
        width: 80px; /*Largeur de l'image*/
        height: 28px; /*Hauteur de l'image*/
        }

[Mizar]

Up svp

[demeter1]

Tu t'es trompé de class, il faut mettre mainmenu au lieu de forum

[Mizar]

bonjour
j'ai remplacé le mot forum par mainmenu dans le sript css, mais ça ne change rien

Code:

  .forum{
        background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button26.png"class="mainmenu'); /*image si la souris ne survole pas*/
        width: 80px; /*Largeur de l'image*/
        height: 28px; /*Hauteur de l'image*/
        }
        .forum:hover{
        background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button52.png"class="mainmenu'); /*image si la souris survole*/
        width: 80px; /*Largeur de l'image*/
        height: 28px; /*Hauteur de l'image*/
        }

[no_way]

Bonjour, remplacez:

Code:

          .forum{
                background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button26.png"class="mainmenu'); /*image si la souris ne survole pas*/
                width: 80px; /*Largeur de l'image*/
                height: 28px; /*Hauteur de l'image*/
                }
                .forum:hover{
                background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button52.png"class="mainmenu'); /*image si la souris survole*/
                width: 80px; /*Largeur de l'image*/
                height: 28px; /*Hauteur de l'image*/
                }

par:

Code:

.mainmenu .forum{
/*image si la souris ne survole pas*/
background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button26.png');
width: 80px; /*Largeur de l'image*/
height: 28px; /*Hauteur de l'image*/
}
.mainmenu .forum:hover{
/*image si la souris survole*/
background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button52.png');
}

Notez que votre image choisie pour le survol est certes un png mais n'a pas de transparence (contour blanc), ce n'est pas un souci de codage.

[Mizar]

merci
il y a du mieux mais ce n'est pas encore ça
le bouton qui devrait monter au passage de la souris reste dessous
j'ai fait différents test d"images et sur certaines je vois un cadre déborder, sur celle que j'ai mise avec une tipo rouge n'apparait pas

Code:

 .mainmenu .forum{
        /*image si la souris ne survole pas*/
        background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button26.png');
        width: 80px; /*Largeur de l'image*/
        height: 28px; /*Hauteur de l'image*/
        }
        .mainmenu .forum:hover{
        /*image si la souris survole*/
        background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button49.png');
        }

[Mizar]

up svp
merci

[no_way]

Vous avez fait une erreur en éditant votre barre de navigation pour le bouton "forum" en mettant en image:

Code:

http://i18.servimg.com/u/f18/15/75/86/05/button26.png

qui est votre bouton au lieu d'une image vide, mettez à la place:

Code:

http://2img.net/i/fa/empty.gif

[Mizar]

merci
j'ai mis le code "empty" que vous m'avez envoyé, mais du coup le bouton "forum" disparait
j'ai donc remis une image .. en attendant mieux

[no_way]

Je vois le souci, vous avez mis 2 fois le bouton pour accéder à votre forum, le deuxième est invisible car vous aviez bien choisi l'image vide (à laisser tel quel).

Supprimez le premier bouton, celui qui a pour lien /forum et qui dispose de la petite croix rouge pour le supprimer.

Je ne trouve pas de classe forum et vous n'en avez pas besoin, remplacez le CSS précédent par celui qui suit pour faire apparaître le bon bouton:

Code:

#i_icon_mini_index{
/*image si la souris ne survole pas*/
background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button26.png');
width: 80px; /*Largeur de l'image*/
height: 28px; /*Hauteur de l'image*/
}
#i_icon_mini_index:hover{
/*image si la souris survole*/
background-image: url('http://i18.servimg.com/u/f18/15/75/86/05/button49.png');
}

[Mizar]

super ça marche
merci