[CSS] Probleme centrage de division

Bonjour,

Je vous explique moi problème, j'ai conçu une feuille de style css pour un forum de type punbb, et j'ai un soucis au niveau du centrage de la toolbar, voici une représentation :

http://www.hostingpics.net/viewer.php?id=34782usersimple.png­

Sur cette photo, pas de soucis tout est centré, mais lorsque je me connecte sous un compte admin, la case "Administration" décale tout :

http://www.hostingpics.net/viewer.php?id=104036decale.png

J'arrive en jouant avec les marges à corriger ce probleme, mais vous aurez compris que si la toolbar admin est cadrée, celle des utilisateurs simple n'est alors plus centrée, et vice et versa...

Je voudrais donc savoir quoi modifier dans mon code pour que la toolbar puisse ce centrer par rapport au milieu d'une page, et non par rapport à un de ses coté, voici mon code css concernant la toolbar:

#brdmenu {
border-width: 1px !important;
border-style: solid !important;
border-color: white !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 1 !important;
.width: 250px;
.border-radius: 10px 10px !important;
}

#brdmenu a {
display: block!important;
float:left!important;
height: 21px!important;
margin: 0 3px 0 0!important;
padding: 3px 20px 0px 25px!important;
background: url(img_brdmenu.gif) repeat-x !important;
border-top: 1px solid!important;
border-left: 1px solid!important;
border-right: 1px solid!important;
border-bottom: 1px solid!important;
text-align: center!important;
font-size: 9px!important;
font-weight: bold!important;
text-decoration:none!important;
border-top-color: red!important;
}

#brdmenu a:hover {
background-image: url(img_brdmenu2.gif)!important;
text-decoration:none!important;
color: white !important;
}

#brdmenu a:link{
color : white !important;
-moz-border-radius-bottomleft: 10px !important;
-moz-border-radius-bottomright : 10px !important;
text-decoration:none!important;
color: white!important;
border-top-color: #101818 !important;
}

#brdmenu a:visited {
-moz-border-radius-bottomleft: 10px !important;
-moz-border-radius-bottomright : 10px !important;
text-decoration:none!important;
border-top-color: #101818 !important;
color : white !important;
}

#brdmenu ul {
margin-left: 92px!important;
line-height: 12px!important;
list-style-image: none!important;
list-style-position: outside!important;
list-style-type: none!important;
position:relative !important;
bottom:+10px!important;
overflow: visible!important;
}

et le code html :

<div id="brdmenu" class="inbox">
<ul>
<li id="navindex"><a href="index.php">Accueil forums</a></li>
<li id="navuserlist"><a href="userlist.php">Rechercher un membre</a></li>
<li id="navrules"><a href="misc.php?action=rules">Règles</a></li>

<li id="navsearch"><a href="search.php">Recherche</a></li>
<li id="navprofile"><a href="profile.php?id=643">Profil</a></li>
<li id="navpm"><a href="pms_list.php"><acronym title="Messages Privés">MP</acronym></a></li>
<li id="navextra1"><a href="chan.php" target="_blank"><b>Tchat</b></a></li>
<li id="navlogout"><a href="login.php?action=out&id=643&csrf_token=3e0937393726c260afa9c8937a049b7e64e4d0b7">Déconnexion</a></li>
<li id="navextra2"><a href="donation.php" target="_blank">Donation</a></li>

<li id="navextra3"><a href="support.php" target="_blank">Support</a></li>
</ul>
</div>

En espérant que vous pourrez m'aider, passez une bonne journée!
Modifié par ATK (02 Apr 2009 - 17:35)

Bonjour,

Est-ce que tu pourrais éditer ton message et remplacer les bbcodes [ quote] et[ /quote] par [ code] et [ /code] (sans espace, afin de te conformer aux règles de présentation du forum.

Pour ton problème, j'aurais tendance à dire qu'il est normal que l'ajout d'un élément supplémentaire perturbe le "centrage" de ton menu, puisque celui-ci ne semble pas centré mais positionné au pixel près dans ton conteneur.

J'ajouterais également que tu semble utiliser de nombreux hack, ce qui n'est pas toujours des plus facile et pratique à gérer.

Laurie-Anne a écrit :
J'aurais tendance à dire qu'il est normal que l'ajout d'un élément supplémentaire perturbe le "centrage" de ton menu, puisque celui-ci ne semble pas centré mais positionné au pixel près dans ton conteneur.

Effectivement, mais justement comment le centrer?

Laurie-Anne a écrit :
J'ajouterais également que tu semble utiliser de nombreux hack, ce qui n'est pas toujours des plus facile et pratique à gérer.

Que veux-tu dire par "hack"?

ATK a écrit :
Effectivement, mais justement comment le centrer?

Le plus propre serait de pouvoir donner une largeur précise à ul (ça peut se calculer en JS) et de lui attribuer des marge gauche et droite à auto.
Il y a aussi la solution de donner un text-align:center;" au contenu du ul.

ATK a écrit :
Que veux-tu dire par "hack"?

L'utilisation de "!important" ou de ".width:".

Ok merci, je vais essayer de me débrouiller.

Edit:

C'est bon j'ai réussi, merci
Modifié par ATK (04 Apr 2009 - 18:49)