Animation bouton de naviguation.

[hugo0504]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis "l'installation" du thème.
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
J'ai décidé d'installer sur mon forum un thème qui ne contenait pas de fichier bbtheme (donc installer les images une à une grâce au PA).
J'ai pris les images sur ce site: http://demo.phpbb3styles.net/ultra_light
Mais voilà, je n'arrive pas à reproduire l'effet de transition sur la barre de naviguation.
Je suppose qu'il faut un code pour y parvenir.
(J'ai entendu parler de "background-position" mais je n'y connais pas grand chose donc...)
Quelqu'un aurait-il connaissance de celui-ci?

(Je tiens à préciser que les "2" boutons tiennent sur une seule image)

Merci d'avance pour votre aide.

[◦Jay◦]

Bonjour hugo0504, il vous faut mettre une transition entre les images, comme ceci(vous pouvez régler le temps de transition à votre convenance, ici.4s) :

Code:

{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

Bien à vous

[Neptunia]

Bonjour ^^

Indépendamment de l'effet de transition entre les deux états du bouton, le code CSS ressemble à ceci (ici le bouton index)

Code:

#i_icon_mini_index{width:67px; height:40px; background:url("http://www.hebergeur.com/image.png") no-repeat 0 -161px;}
#i_icon_mini_index:hover{background:url("http://www.hebergeur.com/image.png") no-repeat 0 -201px;}
#i_icon_mini_index:active{background:url("http://www.hebergeur.com/image.png") no-repeat 0 -41px;}


- La première définition concerne le bouton à l'état normal. On y définit la largeur et la hauteur de chaque "bouton".
L'attribut no-repeat comporte deux valeurs, la première est le décalage horizontal par rapport au côté gauche de l'image, ici 0 donc c'est la portion d'image la plus à gauche de l'image. La seconde valeur correspond au décalage vertical par rapport au bord supérieur de l'image, ici -41px.

La seconde définition concerne le bouton survolé, seul le décalage vertical change, ici -201px mais j'ai une barre de navigation à douze états. Dans le cas le plus courant (2 boutons un au dessus de l'autre) le décalage vertical correspond à la moitié de la hauteur totale de l'image.

La troisième définition correspond quant à elle au bouton au moment du clic.

[hugo0504]

Bonjour,
Merci pour vos réponses! ^^

Hum.. si j'ai bien compris le code donne cela?

Code:

#i_icon_mini_index{width:67px; height:40px; background:url("http://www.hebergeur.com/image.png") no-repeat 0 -161px;}
{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}
#i_icon_mini_index:hover{background:url("http://www.hebergeur.com/image.png") no-repeat 0 -201px;}
#i_icon_mini_index:active{background:url("http://www.hebergeur.com/image.png") no-repeat 0 -41px;}

Car cela ne change rien pour moi :/
J'ai toujours l'image avec le bouton normal et le bouton quand la souris survole l'image.

(Une autre question: dois-je mettre les images dans la gestion des images? )

[Neptunia]

Dans la gestion des images, vous ne mettez aucune image sinon c'est celle-ci qui apparaîtra en avant-plan. Le CSS utilisant des images de fond elles se positionneraient dessous l'image du panneau admin.

Alors le code est bon, à quatre détails près.

1/ Vous devez remplacer http://www.hebergeur.com/image.png par l'adresse de votre image.
2/ Vous devez remplacer width:67px; height:40px respectivement par la largeur d'un "état" et par la hauteur. Si toutes les images sont calquées sur le même modèle, largeur d'un état = largeur de l'image, hauteur d'un état = la moitié de la hauteur de l'image qui contient 2 états.
3/ no-repeat 0 -161px;} / no-repeat 0 -201px;} Même remarque il faut modifier les valeurs selon vos propres images. Typiquement l'une des images à un no-repeat 0 0;} pour l'état du haut et un no-repeat 0 -Ypx;} avec Y = la hauteur d'un état. Si votre image fait 60px sur 50px de hauteur, vous obtiendriez no-repeat 0 -25px;} pour afficher la partie basse de l'image.
4/ La partie :active de votre CSS ne sert pas à grand chose si vous avez des boutons à deux états. Pour en profiter pleinement il faut des boutons avec au minimum 3 états.

[◦Jay◦]

Bonjour hugo0504, comme dit Neptunia, vous devez supprimer les images de votre P.A., voici en exemple pour que ce soit plus explicite, votre bouton "forum" :

La partie du bouton à l'état statique :

Code:

#i_icon_mini_index {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0 0;
    height: 30px;
    width: 80px;}

La partie de votre bouton à l'état survolé :

Code:

#i_icon_mini_index:hover {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0px -30px;
}

Vous pourriez ajouter la transition à chaque bouton mais cela ferait plus long de code, il serait donc mieux de faire comme ceci :

Pour la transition :

Code:

#i_icon_mini_index{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

Maintenant, il vous reste à faire les autres boutons et donc, changer l'adresse de l'image à chaque fois, vous avez de la chance car les boutons font la même taille, il faut donc seulement changer l'adresse de l'image, pour le bouton portail, ça donnera ça :

Code:

#i_icon_mini_portal {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/portai12.jpg) no-repeat 0 0;
    height: 30px;
    width: 80px;}
#i_icon_mini_portal:hover {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/portai12.jpg) no-repeat 0px -30px;
}

Sans oublier la transition, qui sera donc comme ceci :

Code:

#i_icon_mini_portal{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

Vous l'aurez compris, la transition est la même à chaque fois, donc pour le code de transition, vous le ferez comme ceci(en ajoutant l'ID séparé d'une virgule à chaque fois) :

Code:

#i_icon_mini_index,#i_icon_mini_portal{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

Si vous regardez le forum de mon profil, la barre sur le côté "voir les nouveaux messages" est faite comme ceci, l'effet est seulement plus rapide.

Bien à vous.

[hugo0504]

L'effet de transition est là!
Mais quand il s'effectue le bouton bouge (il monte). Il n'est pas possible de le laisser statique mais d'avoir quand même l'effet?
Je remts ici mon code au cas où ^^

Code:

#i_icon_mini_index {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0 30px;
    height: 60px;
    width: 80px;}
#i_icon_mini_index:hover {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0px -30px;
}

#i_icon_mini_index{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

(J'ai bien sûr fait cela avec tous les boutons)
Je tiens à préciser que j'ai mis "30px" sur le bouton initiale car je ne veux avoir que le haut du bouton.

[◦Jay◦]

Vous vous trompez dans la taille du bouton vous mettez :

height: 60px;
width: 80px;

Alors que c'est :

height: 30px;
width: 80px;}

[◦Jay◦]

Et aussi, vous mettez :

Code:

#i_icon_mini_index {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0 30px;


Alors que c'est :

Code:

#i_icon_mini_index {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0 0px;


[hugo0504]

Un grand merci à vous deux, j'obtiens ce que je voulais .
J'aurai besoin d'une dernière aide, j'ai réussi à trouver les id des boutons de naviguation sur une astuce de forumactif.
Mais je ne connais pas les id des boutons nouveau,répondre,editer,citer,vérouillé,etc...
Auriez-vous une idée sur où je pourrais les trouver?
Merci pour le temps que vous m'accordez.

[◦Jay◦]

Pour les boutons nouveau, répondre et verrouillé, vous pouvez regarder ce sujet, pour les autres, vous pouvez soit utiliser l'astuce du bouton verrouillé soit positionner la souris sur l'image que vous souhaitez modifier, faire un clic droit puis inspecter l'élément et noter l'ID ou la class.

[hugo0504]

Compris! ^^
Merci.

[Chacha]

Bienvenue sur le forum de support de Forumactif Bonjour, Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.