Menu avec survol: besoin d'aide et question

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

Résolu Menu avec survol: besoin d'aide et question

Message par ManiIDS le Lun 31 Mar 2014 - 18:28

Bonjour à tous,

Je me suis lancer dans la réalisation d'un nouveau menu pour le forum Instinct de Survie, avec un rollover ( il me semble que cela s'appelle comme ca ).

Je vais essayer d'être le plus clair possible et décrire les étapes déjà réaliser. Si j'ai bien compris pour ce genre de menu, il faut créer des images contenant l'image normale et l'image qui doit apparaitre au survol de la souris.

J'ai donc créer, pour chaque " onglet " ( accueil, recherche, etc...) les images.

ex:



Je pense avoir juste jusque la...

J'ai fait ca pour les deux menus, a savoir, pour celui " hors connexion " et celui quand on est connecté.

A partir de la je suis un peu perdu...

Comment mettre en place tout ca ( css, etc...)?

Une autre question me taraude, est il possible d'avoir aussi une image différente quand on recoit un mp? C'est a dire que l'onglet messagerie soit différent quand on a un nouveau mp et toujours avec une fonction de survol? je suis pas sur d'être clair la...

Merci a tous pour votre aide et je me tiens à dispo pour plus de précision.


Mani Wink


Dernière édition par ManiIDS le Mar 1 Avr 2014 - 18:39, édité 1 fois

ManiIDS
**

Masculin
Messages : 53
Inscrit(e) le : 03/01/2013

http://instinct-de-survie.forumgratuit.org/
ManiIDS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par Scoubifitz le Lun 31 Mar 2014 - 19:04

bonjour,

il y a un tuto dans les trucs et astuces :

http://forum.forumactif.com/t246228-images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris

- à l'étape 1 vous créez vos images "doubles"

étapes 2 + 3 + 4 sont ok , et à appliquer

étape 5 : modifier background-image par background , pour positionner votre image en top ou en bottom au survol ...

exemple avec votre image (à mettre dans le CSS):

Code:
/*IMAGE INDEX*/
#i_icon_mini_index{
   background:url('http://i58.servimg.com/u/f58/16/49/85/07/accuei10.png') 0 top; /*image si la souris ne survole pas*/
   width:95px; /*Largeur de l'image*/
   height:28px; /*Hauteur de la moitié de l'image*/
}
#i_icon_mini_index:hover{
   background:url('http://i58.servimg.com/u/f58/16/49/85/07/accuei10.png')0 bottom;
}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par Neptunia le Lun 31 Mar 2014 - 19:16

Bonjour ^^


Alors voici le tuto de base sur le bouton qui change au passage de la souris
Right Images de la Barre de Navigation modifiées au passage de la souris
Son intérêt est de lister les id de toute la navigation. Le bouton Messagerie a un id et le bouton Nouveau(x) message(s) un autre id, ce qui devrait répondre à votre dernière question.
En revanche le tuto est prévu pour des boutons utilisant deux images.

Vous, vous n'avez qu'une seule image pour vos deux boutons, l'avantage est que le survol est plus fluide vu que l'image est déjà chargée dans le navigateur. L'inconvénient est que c'est légèrement plus compliqué à mettre en place.
Right Insérer bouton rollover
Je vous invite à lire la dernière partie du message de Quierra.

Je vous donne la manip pour votre bouton accueil de 95 pixels sur 56. Chaque état fera 95 pixels sur 28.

1/ Placer une image vide dans votre PA
2/ Ajouter à votre CSS
Code:
#i_icon_mini_index{width:95px; height:28px; background:url("http://i58.servimg.com/u/f58/16/49/85/07/accuei10.png") no-repeat 0 0;}
#i_icon_mini_index:hover{background:url("http://i58.servimg.com/u/f58/16/49/85/07/accuei10.png") no-repeat 0 -28px;}

A l'état normal on affiche une portion d'image de 95*28 pixels dont le coin supérieur gauche est à 0 pixel du haut de l'image et 0 pixel du bord gauche de l'image.

A l'état survolé :hover on affiche la même taille d'image mais cette fois la portion à afficher est a 28 pixels du haut de l'image.

Vous pouvez voir cela sur le forum de mon profil. Mais j'utilise un 3e état qui n'est apparent qu'au moment du clic :active.




Scoubifitz a déjà répondu mais je laisse mon message qui utilise une méthode sensiblement différente.

Neptunia
+ Hyperactif +

Féminin
Messages : 10951
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par ManiIDS le Mar 1 Avr 2014 - 16:52

Bonjour;

Merci pour vos réponse, j'ai donc suivis ( enfin essayer ) tout ca, je m'approche du résultat, mais quelque chose foire, ou plutôt y'a un truc que j'ai du mal faire... Voila le résultat:



Je n'arrive pas a comprendre pourquoi les bouton sont espacés...

Et si je peux abuser de votre gentillesse, comment faire pour retirer le bandeau gris derrière le menu, sans modifier le reste du forum?

Encore merci pour votre aide.



Mani;)

ManiIDS
**

Masculin
Messages : 53
Inscrit(e) le : 03/01/2013

http://instinct-de-survie.forumgratuit.org/
ManiIDS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par Neptunia le Mar 1 Avr 2014 - 17:16

Pour l'espacement des boutons :
Rajouter ceci à la feuille CSS
Code:
#pun-navlinks li a {
   padding: 0px;
   margin: 0px;
   text-decoration: none;
   }

Pour la couleur d'arrière-plan essayer
Code:
#pun-navlinks {
background-color: transparent;
}

Neptunia
+ Hyperactif +

Féminin
Messages : 10951
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par ManiIDS le Mar 1 Avr 2014 - 17:29

Merci!

Mais il reste encore de petits espaces entre certains boutons... Est ce que cela peux venir de mes boutons? de leur taille? J'ai vérifié et j'ai rentré les bonnes valeurs pourtant.

Le code pour faire disparaitre le bandeau gris ne fonctionne pas non plus...

ManiIDS
**

Masculin
Messages : 53
Inscrit(e) le : 03/01/2013

http://instinct-de-survie.forumgratuit.org/
ManiIDS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par Neptunia le Mar 1 Avr 2014 - 17:34

Pourriez vous nous donner le lien du forum où la barre de navigation est installée ?

Pour l'arrière plan je n'étais effectivement pas certain de mon coup Sad

Neptunia
+ Hyperactif +

Féminin
Messages : 10951
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par ManiIDS le Mar 1 Avr 2014 - 17:40

Le voila: http://instinct-de-survie.forumgratuit.org/

ManiIDS
**

Masculin
Messages : 53
Inscrit(e) le : 03/01/2013

http://instinct-de-survie.forumgratuit.org/
ManiIDS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par Neptunia le Mar 1 Avr 2014 - 17:46

Alors en invité il n'y a aucun problème.

Si une fois connecté il reste des espaces, j'imagine que c'est du à des boutons désactivés comme calendrier ou galerie par exemple.

Dans ce cas allez à
Right PA / Affichage / Entête et navigation
Et déplacez tous vos boutons inutilisés à une des extrémités de la barre.

Neptunia
+ Hyperactif +

Féminin
Messages : 10951
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par ManiIDS le Mar 1 Avr 2014 - 17:51

Bravo2 

Merci!!! Les espaces ont disparus!!

Me reste a enlever le bandeau gris et ca sera bon!

Merci encore!!

ManiIDS
**

Masculin
Messages : 53
Inscrit(e) le : 03/01/2013

http://instinct-de-survie.forumgratuit.org/
ManiIDS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu avec survol: besoin d'aide et question

Message par ManiIDS le Mar 1 Avr 2014 - 18:38

J'ai trouver!

Dans mon CSS il y a ceci:

Code:
#pun-head #pun-navlinks {
  background-color:transparent;
  margin:25px;
  padding:0.5em 1.1em 0.6em;
}

J'ai remplacer la valeur de background-color par transparent et cela fonctionne!


Encore merci pour le coup de main, encore un problème résolu!!

ManiIDS
**

Masculin
Messages : 53
Inscrit(e) le : 03/01/2013

http://instinct-de-survie.forumgratuit.org/
ManiIDS 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