Center la barre de navigation via CSS

[drogoth]

Bonsoir,

J'ai réalisé ce tuto : https://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 ?

Merci !

[drogoth]

Up ?

[Scoubifitz]

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*/
}

[drogoth]

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