Une seule image en barre de navigation

2 participants

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

Résolu Une seule image en barre de navigation

Message par Emyuna Lun 12 Aoû 2013 - 3:27

Bonjour,

J'aimerais savoir comment insérer ma barre de navigation, qui est constituée d'une seule image, et non de plusieurs boutons séparés ?

D'avance, merci !
Emyuna

Emyuna
***

Féminin
Messages : 110
Inscrit(e) le : 15/02/2009

HTTP://SECRETS-ECRIVAINS.EXPRIMETOI.NET
Emyuna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une seule image en barre de navigation

Message par Neptunia Lun 12 Aoû 2013 - 4:13

Bonjour !

On va passer par le CSS Wink

PA > Affichage > Gestion des images/Mode avancé > Onglet Général/Navigation
Remplacer toutes vos images de navigation par https://2img.net/i/fa/empty.gif

Ensuite direction la feuille CSS et ajouter un code de ce style !
Code:
/* Barre de navigation a triple etat */
#i_icon_mini_index{width:67px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat 0 -161px;}
#i_icon_mini_index:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat 0 -201px;}
#i_icon_mini_index:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat 0 -41px;}

#i_icon_mini_gallery{width:74px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -67px -161px;}
#i_icon_mini_gallery:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -67px -201px;}
#i_icon_mini_gallery:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -67px -41px;}

#i_icon_mini_calendar{width:103px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -141px -161px;}
#i_icon_mini_calendar:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -141px -201px;}
#i_icon_mini_calendar:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -141px -41px;}

#i_icon_mini_portal{width:72px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -244px -161px;}
#i_icon_mini_portal:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -244px -201px;}
#i_icon_mini_portal:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -244px -41px;}

#i_icon_mini_faq{width:51px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -316px -161px;}
#i_icon_mini_faq:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -316px -201px;}
#i_icon_mini_faq:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -316px -41px;}

#i_icon_mini_search{width:105px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -367px -161px;}
#i_icon_mini_search:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -367px -201px;}
#i_icon_mini_search:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -367px -41px;}

#i_icon_mini_members{width:92px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -472px -161px;}
#i_icon_mini_members:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -472px -201px;}
#i_icon_mini_members:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -472px -41px;}

#i_icon_mini_groups{width:85px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -564px -161px;}
#i_icon_mini_groups:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -564px -201px;}
#i_icon_mini_groups:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -564px -41px;}

#i_icon_mini_profile{width:61px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -649px -161px;}
#i_icon_mini_profile:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -649px -201px;}
#i_icon_mini_profile:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -649px -41px;}

#i_icon_mini_message{width:50px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -710px -161px;}
#i_icon_mini_message:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -710px -201px;}
#i_icon_mini_message:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -710px -41px;}

#i_icon_mini_new_message{width:41px; height:41px; background:url("http://www.patmax.eu/I4/110824211731.gif")}
#i_icon_mini_new_message:hover{background:url("http://www.patmax.eu/I4/110824212050.png")}

#i_icon_mini_logout{width:47px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -1503px -161px;}
#i_icon_mini_logout:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -1503px -201px;}
#i_icon_mini_logout:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -1503px -41px;}

#i_icon_mini_register{width:95px; height:40px; background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -1008px -161px;}
#i_icon_mini_register:hover{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -1008px -201px;}
#i_icon_mini_register:active{background:url("http://www.patmax.eu/I9/120511030005.png") no-repeat -1008px -41px;}

#i_icon_mini_login{width:46px; height:40px; background:url("http://www.patmax.eu/I17/130328094802.png") no-repeat -86px -161px;}
#i_icon_mini_login:hover{background:url("http://www.patmax.eu/I17/130328094802.png") no-repeat -86px -201px;}
#i_icon_mini_login:active{background:url("http://www.patmax.eu/I17/130328094802.png") no-repeat -86px -41px;}
Dans cet exemple (visible sur le forum de mon profil) on utilise une barre de menu à 3 états (normal / survolé / cliqué) donc chaque "paragraphe" comporte 3 lignes. Vous n'aurez besoin que de la première.

Quelques explications !

#i_icon_mini_index{width:67px; height:40px; background:url("https://patmax.error/I9/120511030005.png") no-repeat 0 -161px;}

On affiche en guise de bouton Accueil/Index la portion d'image de 67 pixels de large et 40 de haut dont le coin supérieur gauche commence à 0 pixel du bord gauche de l'image et à 161 pixels du bord supérieur.

#i_icon_mini_index:hover{background:url("https://patmax.error/I9/120511030005.png") no-repeat 0 -201px;}

Au survol la portion d'image à afficher aura la même taille mais le bouton figure sur la ligne du dessous à 201px du bord supérieur (contre 161 pour l'état normal.

#i_icon_mini_index:active{background:url("https://patmax.error/I9/120511030005.png") no-repeat 0 -41px;}
Au clic même chose, seul le décalage depuis le bord supérieur varie.

#i_icon_mini_gallery{width:74px; height:40px; background:url("https://patmax.error/I9/120511030005.png") no-repeat -67px -161px;}

Le bouton Galerie est situé sur l'image globale juste à droite du bouton Index. Le principe reste le même mais cette fois le bord gauche du bouton est à 67 pixels du bord gauche de l'image (Le 0 du bouton Index + les 67 pixels de large du bouton index.
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.

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