Center la barre de navigation via CSS

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

Résolu Center la barre de navigation via CSS

Message par drogoth le Lun 7 Mai 2012 - 20:06

Bonsoir,

J'ai réalisé ce tuto : http://forum.forumactif.com/t246228-images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris

Tout fonctionne comme prévu, j'ai néanmoins fait un tri car je ne veux pas afficher les boutons "Calendrier" "Portail" et "Galeries". Reste que tous les hovers fonctionnent à merveille.

Néanmoins ma barre de navigation (par l'abscence des autres boutons peut-être ? ) n'est pas centrée alors qu l'option est coché dans le panneau d'administration, je pense que c'est à cause du CSS. J'ai cherché un solution de code pour centrer la barre de navigation voici mon code :



Code:
#global {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}   

/*IMAGE INDEX*/
        #i_icon_mini_index{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/acceui11.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_index:hover{
          background-image:url('http://img254.imageshack.us/img254/6362/acceuilhover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE PORTAIL*/
        #i_icon_mini_portal{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_portal:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE CALENDRIER*/
        #i_icon_mini_calendar{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_calendar:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE FAQ*/
        #i_icon_mini_faq{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/faq10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_faq:hover{
          background-image:url('http://img526.imageshack.us/img526/8080/faqhover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE RECHERCHE*/
        #i_icon_mini_search{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/recher10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_search:hover{
          background-image:url('http://img843.imageshack.us/img843/298/rechercherhover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE LISTE MEMBRES*/
        #i_icon_mini_members{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/membre10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_members:hover{
          background-image:url('http://img42.imageshack.us/img42/9103/membreshover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE GROUPES*/
        #i_icon_mini_groups{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/groupe10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_groups:hover{
          background-image:url('http://img818.imageshack.us/img818/5100/groupeshover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE PROFIL*/
        #i_icon_mini_profile{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/profil10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_profile:hover{
          background-image:url('http://img135.imageshack.us/img135/2828/profilhover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE MP (pas de nouveaux messages)*/
        #i_icon_mini_message{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/messag10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_message:hover{
          background-image:url('http://img269.imageshack.us/img269/4412/messageshover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE MP (nouveaux messages)*/
        #i_icon_mini_new_message{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/newmes10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_new_message:hover{
          background-image:url('http://img225.imageshack.us/img225/8471/newmessagehover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE DECONEXION*/
        #i_icon_mini_logout{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/deicon10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_logout:hover{
          background-image:url('http://img99.imageshack.us/img99/5907/dconnexionhover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE S'ENREGISTRER*/
        #i_icon_mini_register{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/sinscr11.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_register:hover{
          background-image:url('http://img268.imageshack.us/img268/2964/sinscrirehover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        /*IMAGE CONNEXION*/
        #i_icon_mini_login{
          background-image:url('http://i49.servimg.com/u/f49/17/49/17/45/connex10.png'); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }
        #i_icon_mini_login:hover{
          background-image:url('http://img651.imageshack.us/img651/2815/connexionhover.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:30px; /*Hauteur de l'image*/
        }


Quelqu'un pourrait-il me dire d'où vient le problème dans mon code, ou si il y a une autre façon de régler ce problème de centrage ? Sad

Merci ! Very Happy


Dernière édition par drogoth le Mar 8 Mai 2012 - 17:49, édité 1 fois

drogoth
Nouveau membre

Messages : 23
Inscrit(e) le : 17/01/2011

http://dr-design.forumsactifs.com
drogoth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Center la barre de navigation via CSS

Message par drogoth le Mar 8 Mai 2012 - 16:55

Up ? Smile

drogoth
Nouveau membre

Messages : 23
Inscrit(e) le : 17/01/2011

http://dr-design.forumsactifs.com
drogoth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Center la barre de navigation via CSS

Message par Scoubifitz le Mar 8 Mai 2012 - 17:11

bonjour,

dans votre CSS vous avez des boutons sans image , mais avec une largeur et hauteur définie ...

mettez ces valeurs à zéro si vous ne les utilisez pas ...

/*IMAGE PORTAIL*/
#i_icon_mini_portal{
background-image:url('URL'); /*image si la souris ne survole pas*/
width:100px; /*Largeur de l'image*/
height:30px; /*Hauteur de l'image*/
}
#i_icon_mini_portal:hover{
background-image:url('URL'); /*image si la souris survole*/
width:100px; /*Largeur de l'image*/
height:30px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
background-image:url('URL'); /*image si la souris ne survole pas*/
width:100px; /*Largeur de l'image*/
height:30px; /*Hauteur de l'image*/
}
#i_icon_mini_calendar:hover{
background-image:url('URL'); /*image si la souris survole*/
width:100px; /*Largeur de l'image*/
height:30px; /*Hauteur de l'image*/
}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Center la barre de navigation via CSS

Message par drogoth le Mar 8 Mai 2012 - 17:49

Merci Scoubifitz ! Tu as résolu mon problème, je t'en suis très reconnaissant Smile

drogoth
Nouveau membre

Messages : 23
Inscrit(e) le : 17/01/2011

http://dr-design.forumsactifs.com
drogoth 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