Menu avec survol: besoin d'aide et question

[ManiIDS]

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

[Scoubifitz]

bonjour,

il y a un tuto dans les trucs et astuces :

https://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;
}

[Neptunia]

Bonjour ^^


Alors voici le tuto de base sur le bouton qui change au passage de la souris
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.
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.

[ManiIDS]

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

[Neptunia]

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

[ManiIDS]

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

[Neptunia]

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

[ManiIDS]

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

[Neptunia]

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 à
PA / Affichage / Entête et navigation
Et déplacez tous vos boutons inutilisés à une des extrémités de la barre.

[ManiIDS]

 

Merci!!! Les espaces ont disparus!!

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

Merci encore!!

[ManiIDS]

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