Une seule image en barre de navigation
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Une seule image en barre de navigation
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 !
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 !
Re: Une seule image en barre de navigation
Bonjour !
On va passer par le CSS
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 !
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.
On va passer par le CSS
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;}
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.
Sujets similaires
» Afficher une seule image pour les nouveaux MP dans la barre de navigation
» Forcer la barre de navigation sur une seule ligne
» Fixer ma barre de navigation sur une seule ligne
» Afficher la barre de navigation sur une seule ligne
» hover image sur image barre navigation
» Forcer la barre de navigation sur une seule ligne
» Fixer ma barre de navigation sur une seule ligne
» Afficher la barre de navigation sur une seule ligne
» hover image sur image barre navigation
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum