Une seule image en barre de navigation

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

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 le 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 http://illiweb.com/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("http://www.patmax.eu/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("http://www.patmax.eu/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("http://www.patmax.eu/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("http://www.patmax.eu/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
+ Hyperactif +

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

http://www.planet-series.com/
Neptunia 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