Menu avec survol: besoin d'aide et question

3 participants

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

Menu avec survol: besoin d'aide et question Accuei10

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
avatar

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 Lun 31 Mar 2014 - 19:04

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 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:

Menu avec survol: besoin d'aide et question Test_m10

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

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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 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...
avatar

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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 Mar 1 Avr 2014 - 17:40

avatar

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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 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!!
avatar

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

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

- Sujets similaires

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