Barre de navigation ou élément CSS mal centré

[Oxtran]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 02/11
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir,

Je cherche à régler un problème de centrage sur mon forum mais je ne parviens pas à définir si c'est ma barre de navigation qui est mal centré par rapport au tableau (codé sur l'index et présent sur le screenshot) ou si inversement, c'est le tableau qui n'est pas bien centré sur ma page.
Je précise que la position de la barre de navigation est bien configuré sur "centré" dans le panneau d'administration.

Template index_body complète :

Code:

{JAVASCRIPT}
<style>
a {
    color: inherit;
    text-decoration: none;
}
    .webcenter {
    position: relative;
    min-width: 950px;
    max-width: 950px;
    height: inherit;
    margin: auto;
    padding: 0 10px;
    display: flex;
}

.flex-columna {
    display: flex;
    flex-direction: column;
  }
    .box {
    background-image: url("https://zupimages.net/up/21/41/1kro.png");
    background-repeat: no-repeat;
    height: 2540px;
}

.wrapper {  
    position: relative;
    min-width: 150px;
    max-width: 950px;
    height: inherit;
    margin: auto;
    padding: 0 0px;
    display: flex;
}  

.box_list {
    position: absolute;
    background-image: url("https://i.imgur.com/ogsoUhP.png");
    background-repeat: no-repeat;
    height: 524px;
    width: 748px;
    top:67px;
    left:89px
}
.carte_box {
    position: absolute;
    background-image: url("https://i.imgur.com/TeBGJCB.png");
    background-repeat: no-repeat;
    height: 452px;
    width: 642px;
    top:596px;
    left:80px
}
.photo_one {
    position: absolute;
    background-image: url("https://i.imgur.com/5fewmqE.png");
    background-repeat: no-repeat;
    height: 252px;
    width: 196px;
    top:656px;
    left:580px
}
.photo_two {
    position: absolute;
    background-image: url("https://i.imgur.com/tQhn8pJ.png");
    background-repeat: no-repeat;
    height: 252px;
    width: 196px;
    top:936px;
    left:580px
}
.photo_three {
    position: absolute;
    background-image: url("https://i.imgur.com/ywYQm6Z.png");
    background-repeat: no-repeat;
    height: 275px;
    width: 210px;
    top:966px;
    left:330px
}
.photo_four {
    position: absolute;
    background-image: url("https://i.imgur.com/fUNvfQi.png");
    background-repeat: no-repeat;
    height: 252px;
    width: 196px;
    top:926px;
    left:110px
}
.livre_box {
    position: absolute;
    background-image: url("https://i.imgur.com/UasFZuZ.png");
    background-repeat: no-repeat;
    height: 509px;
    width: 343px;
    top:1184px;
    left:40px
}
.cassette_box {
    position: absolute;
    background-image: url("https://i.imgur.com/c0UeafF.png");
    background-repeat: no-repeat;
    height: 245px;
    width: 289px;
    top:1205px;
    left:497px;
    z-index: 8;
}
.dossier_box {
    position: absolute;
    background-image: url("https://i.imgur.com/2XBWQos.png");
    background-repeat: no-repeat;
    height: 811px;
    width: 418px;
    top:1349px;
    left:408px;
    z-index: 1;
}
.recrut_box {
    position: absolute;
    background-image: url("https://i.imgur.com/TbJf70s.png");
    background-repeat: no-repeat;
    height: 474px;
    width: 357px;
    top:1661px;
    left:80px;
    z-index: 2;
}
.journal_box {
    position: absolute;
    background-image: url("https://i.imgur.com/B2Nbwdt.png");
    background-repeat: no-repeat;
    height: 470px;
    width: 668px;
    top:2020px;
    left:170px;
    z-index: 1;
}
</style>
    <div class="webcenter flex-columna">      
           <div class="box">
        <a href="https://tourisme-a-bourges.forumactif.com/t1-hierarchie-en-cours">
            <div class="box_list"></div></a>
        <a href="https://tourisme-a-bourges.forumactif.com/f67-territoires">
            <div class="carte_box"></div></a>
        <a href="https://tourisme-a-bourges.forumactif.com/f68-discussions">
            <div class="photo_one"></div></a>
        <a href="https://tourisme-a-bourges.forumactif.com/f5-salle-d-arcade">
            <div class="photo_two"></div></a>
            <div class="photo_three"></div></a>
            <div class="photo_four"></div></a>
        <a href="https://tourisme-a-bourges.forumactif.com/t101-codex-de-la-famille">
            <div class="livre_box"></div></a>
        <a href="https://tourisme-a-bourges.forumactif.com/f2-annonces-discussions">
            <div class="cassette_box"></div></a>
        <a href="https://tourisme-a-bourges.forumactif.com/f16-acces-prives">
            <div class="dossier_box"></div></a>
        <a href="https://tourisme-a-bourges.forumactif.com/t100-sujet-candidature">
            <div class="recrut_box"></div></a>
        <a href="https://tourisme-a-bourges.forumactif.com/f8-activites-criminelles">
            <div class="journal_box"></div></a>
    </div>
</div>

<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN disable_viewonline -->
<div id="qeel">
<h2>
Qui est en ligne ?
</h2>

<div class="qeel-left">


<div class="qeel-stats">
<div><i class="fas fa-users"></i>{TOTAL_USERS}</div>
<div><i class="fas fa-pencil-alt"></i>{TOTAL_POSTS}</div>
</div>

<div class="qeel-last-24">
<div class="qeel-online-content">
  <table>{L_CONNECTED_MEMBERS}</table>
</div>
<h3>Dernières 24h</h3>
</div>
</div>

<div class="qeel-online">
<div class="qeel-online-stats">
{TOTAL_USERS_ONLINE}
</div>
<div class="qeel-online-content qeel-membre-connectes">
{LOGGED_IN_USER_LIST}
</div>
<h3>Actuellement en ligne</h3>
</div>

<div class="qeel-right">
<div>
<div class="qeel-welcome">
<h3>Bienvenue à</h3>
{NEWEST_USER}
</div>
<div class="qeel-discord">
<a href="https://discord.gg/xwM3E7A" target="_blank"><i class="fab fa-discord"></i><div>
Rejoindre notre <b>Discord</b>
</div></a>
</div>

</div>

<div class="qeel-links">
<a href="{U_TODAY_POSTERS}"><i class="far fa-star"></i><div>
Top 20 des posteurs du jour
</div></a>
<a href="/?mode=delete_cookies"><i class="fas fa-hourglass-start"></i><div>
Supprimer les cookies du forum
</div></a>
<a href="{U_OVERALL_POSTERS}"><i class="fas fa-star"></i><div>
Top 20 des posteurs du forum
</div></a>
<a href="{U_TODAY_ACTIVE}"><i class="far fa-file"></i><div>
Sujets actifs du jour
</div></a>
</div>

</div>

</div>
<script>
  $('.qeel-stats').html($('.qeel-stats').html().replace(/Nous avons|membre enregistré|membres enregistrés|Nos membres ont posté un total de |messages|message/ig, ''));
  $('.qeel-last-24').html($('.qeel-last-24').html().replace("Membres connectés au cours des 24 dernières heures : ", ''));
  $('.qeel-online-stats').html($('.qeel-online-stats').html().replace("Il y a en tout ", ''));
  $('.qeel-membre-connectes').html($('.qeel-membre-connectes').html().replace("Utilisateurs enregistrés : ", ''));
  $('.qeel-welcome').html($('.qeel-welcome').html().replace("L'utilisateur enregistré le plus récent est ", ''));
  </script>
<!-- END disable_viewonline -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
<br clear="all" />
{CHATBOX_BOTTOM}
<marquee onmouseover="this.stop();" onmouseout="this.start();"><a href="zzz"><img src="https://i.imgur.com/CrgMPt1.png" /> </a><a href="zzz"><img src="https://i.imgur.com/CrgMPt1.png" /></a> <a href="zzz"><img src="https://i.imgur.com/CrgMPt1.png" /></a></marquee>
{AUTO_DST}

Page CSS complète :

Code:

/* masquer élément de la barre de navi */
.mainmenu[href="/calendar"]{display:none;}
.mainmenu[href="/galery"]{display:none;}
.mainmenu[href="/faq"]{display:none;}
.mainmenu[href="/publications"]{display:none;}
.mainmenu[href="/search"]{display:none;}
.mainmenu[href="/memberlist"]{display:none;}
.mainmenu[href="/groups"]{display:none;}

/* masquer bordure cadre forum */
.bodyline{
  background:none;border:none;}

/*Bloc de la présentation*/
.prez {
background-color:#dbdbdb;
margin: 0 auto;
width:650px;
border:5px solid #000000;
color:#1b1b1f;
padding:25px;
text-align:center;
overflow-wrap: break-word;
}

/*Image du haut de la présentation*/
.prez_titre {
font-family: 'Impact';
font-size: 28px;
text-decoration: underline;
}

/*Nom de la présentation*/
.prez_nom {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  color: #202020;
  text-shadow: -2px -2px 1px white;
  width: 100%;
  text-align: center;
  margin-top: -60px;
  margin-bottom: 15px;
}

/*Petite citation de la présentation*/
.prez_citation {
  width: 100%;
  text-align: center;
  color: #747474;
  font-family: 'Dancing Script', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

/*Blocs de la présentation*/
.prez_bloc {
  background-color: #353535;
  border: 3px solid #101010;
  padding: 10px;
  margin: 0px 10px 0px 10px;
}

/*Autres images de la présentation*/
.prez_ava, .prez_bas {
  display: inline-block;
  width: 35px;
  height: 84px;
  float: left;
  border: #000000 1px dotted;
}

/*Partie de droite du premier bloc de la présentation*/
.prez_right, .prez_right2 {
  display: inline-line;
  margin-left: 5px;
  float: left;
  width: 240px;
}

/*Champs de la présentation*/
.prez_champ {
  color: #000000;
  font-weight: bold;
}

/*Sous-titres de la présentation*/
.prez_title {
  text-align: center;
  font-family: 'Lobster', cursive;
  padding: 5px;
  font-size: 16px;
  background: #000000;
  color: #959595;
  border-top: 2px solid #353535;
  
  margin: 15px 0px 5px 0px;
}

/*Images du bas de la présentation*/
.prez_bas {
  width: 100px;
  height: 100px;
}

/*Partie de droite du dernier bloc de la présentation*/
.prez_right2 {
  width: 100%;
}

/* désactiver soulignement */
a:hover {
  text-decoration: none !important;
}

/* régler espace bouton navi */
a.mainmenu img {margin: 0 19px 0 -20px;}

/*PERSONNALISATION DU QEEL PAR AWFUL*/
/*Le bloc du QEEL*/
#qeel {
     width: 900px;
     margin: auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
     background: #1f1919;
     padding: 20px;
     box-sizing: border-box;
     font-family: "Georgia";
     color: white;
}
 #qeel a, #qeel a:hover, #qeel a:active {
     text-decoration: none!important;
}
/*Titre du QEEL*/
 #qeel h2 {
     -webkit-box-flex: 100%;
         -ms-flex: 100%;
             flex: 100%;
     background: #2b1b03;
     color: #fff;
     margin: -20px -20px 20px;
     font-family: "Georgia Bold";
     text-transform: uppercase;
     font-size: 20px;
     padding: 10px;
}
/*Les titres des boîtes*/
 #qeel h3 {
     background: #2b1b03;
     color: #fff;
     margin: 0;
     font-family: "Georgia Bold";
     text-transform: uppercase;
     font-size: 11px;
     padding: 2px 8px;
     font-weight: 500;
}
 .qeel-left {
     height: 180px;
     width: 220px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     margin-right: 10px;
}
/*Blocs des stastistiques messages et membres*/
 .qeel-stats div {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     background: #e9d9a8;
     color: black;
     height: 30px;
     line-height: 30px;
     -webkit-box-pack: end;
         -ms-flex-pack: end;
             justify-content: flex-end;
     margin-bottom: 5px;
     font-family: "Georgia Bold";
     padding-right: 10px;
     font-size: 12px;
}
 .qeel-stats div i {
     background: #2d1b03;
     color: white;
     width: 30px;
     line-height: 30px;
     text-align: center;
     margin-right: auto;
     font-size: 15px;
}
/*Bloc de la liste des connectés*/
 .qeel-online {
     width: 350px;
     height: 180px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     margin-right: 10px;
}
 .qeel-online .qeel-online-content {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
     padding-right: 10px;
     overflow: auto;
     background: #e9d9a8;
     font-size: 15px;
}
/*Bloc statistique des connectés*/
 .qeel-online-stats {
     font-family: "Georgia Bold";
     text-transform: uppercase;
     font-size: 10px;
     margin-bottom: 5px;
}
/*Bloc des connectés des dernières 24h*/
 .qeel-last-24 {
     background: #e9d9a8;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     overflow: auto;
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
}
 .qeel-last-24 .qeel-online-content{
     overflow: auto;
     margin: 10px;
     padding-right: 5px;
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
}
 .qeel-last-24 .qeel-online-content table {
     border-collapse: collapse;
}
 .qeel-last-24 .qeel-online-content td {
     padding: 0;
     background: transparent;
}
 .qeel-last-24 .qeel-online-content .gensmall {
     font-family: "Georgia";
}
 .qeel-right {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
}
 .qeel-right > div:first-child {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
     margin-right: 10px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
}
 .qeel-welcome h3 {
     margin:0 0 10px!important;
}
/*Bloc du lien vers Discord*/
 .qeel-discord a {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     font-family: "Georgia Bold";
     background: #e8d8a9;
     color: #fff;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a {
     color: black;
}
 .qeel-discord a i {
     font-size: 50px;
     margin: 10px;
     color: #111;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a i {
     color: #1e1e1e;
}
 .qeel-discord a div {
     text-transform: uppercase;
     font-size: 15.5px;
     line-height: 1;
}
 .qeel-discord a div b {
     display: block;
     font-size: 30px;
     color: #6e6e6e;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a div b {
     color: #2d1b03;
}
/*Blocs des liens top 20 posteurs, supprimer cookies, etc*/
 .qeel-links {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-line-pack: start;
         align-content: flex-start;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
}
 .qeel-links a {
     height: 40px;
     width: 40px;
     background: #2b1b03;
     color: #white;
     text-align: center;
     font-size: 10px;
     position: relative;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-links a:hover {
     color: #e8d8a9;
}
 .qeel-links a div {
     position: absolute;
     right: 50px;
     white-space: nowrap;
     color: black;
     background: #fff;
     font-family: "Georgia Bold";
     text-transform: uppercase;
     font-size: 9px;
     height: 10px;
     line-height: 10px;
     padding: 2px 5px;
     top: calc(50% - 7px);
     pointer-events: none;
     -webkit-transform: translate(30px,0);
             transform: translate(30px,0);
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
}
 .qeel-links a div:after {
     content: "";
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 3px 0 3px 5px;
     border-color: transparent transparent transparent #fff;
     position: absolute;
     right: -5px;
     top: 3.5px;
}
 .qeel-links a:hover div {
     -webkit-transform: translate(0,0);
             transform: translate(0,0);
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* Profil du membre dans les sujets */
.profil_posteur{
  width:200px;
  padding:8px 0;
  font-family:Georgia; /* Police sur toute la zone du profil */
  box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
}
/* La partie suivante centre a la fois le pseudo, le rang écrit et l image du rang */
.pseudo_sujet, .rang_sujet{
  text-align:center;
}
/* La partie suivante concerne uniquement le pseudo du membre */
.pseudo_sujet{
  font-size:16px;
}

/* La partie suivante concerne uniquement l image du rang */
.rang_sujet img{
  max-width:100%;
}
/* La partie suivante concerne les div du rang */
.rang_sujet{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* La partie suivante concerne l'effet sur le profil */
.hover_profil{
  position:relative; /* Ne pas modifier cette partie */
  width:200px; /* A modifier en fonction de la taille de votre avatars */
  height:320px; /* A modifier en fonction de la taille de votre avatars */
  overflow:hidden;
  margin:8px 0;
}
.avatar_sujet{
  position:absolute;
  top:0;
  left:0;
  /* La propriete filter permet d appliquer un flou a l image */
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1);
  transform:scale(1);
  /* La propriete transition permet d avoir un effet fluide */
  -webkit-transition:all 400ms;
  transition:all 400ms;
}
.hover_profil:hover .avatar_sujet{
  /* La propriete filter permet d appliquer un flou a l image */
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(2);
  transform:scale(2);
}
.infosprofil_sujet{
  position:absolute; /* Ne pas modifier cette partie */
  top:10px; /* Ne pas modifier cette partie */
  left:10px; /* Ne pas modifier cette partie */
  width:180px;
  height:300px;
  overflow:auto;
  padding:10px;
  background:rgba(0, 0, 0, 0.2); /* La derniere valeur permet de modifier l opacite de la couleur de fond */
  border:4px solid #2d1b03;
  box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
  opacity:0;
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1.5);
  transform:scale(1.5);
  /* La propriete transition permet d avoir un effet fluide */
  -webkit-transition:all 400ms;
  transition:all 400ms;
}
.hover_profil:hover .infosprofil_sujet{
  opacity:1;
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1);
  transform:scale(1);
}
.label_sujet{
  background:#2d1b03;
  padding:3px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  margin:0 0 5px 0;
}
/* Ne pas modifier cette partie */
.label_sujet:last-child{
  margin:0 0 0 0;
}
/* empeche certaines infos du profil de depasser*/
.infosprofil_sujet img,
.infosprofil_sujet textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* forcer taille avatar*/
.avatar img {
   width:200px;
   height:320px;
}

Merci d'avance.

[Oka.mi]

Bonjour,

Dans votre css, vous avez :

Code:

/* régler espace bouton navi */
a.mainmenu img {margin: 0 19px 0 -20px;}

Je ne sais pas quel espace vous vouliez régler avec ce code car quand je le retire, il n'y a aucun espace qui apparaît (même si je ne vois pas les boutons réservés aux membres inscrits) et la barre de navigation est bien centrée.

[Oxtran]

Bonjour,

Dans votre css, vous avez :

Code:

/* régler espace bouton navi */
a.mainmenu img {margin: 0 19px 0 -20px;}

Je ne sais pas quel espace vous vouliez régler avec ce code car quand je le retire, il n'y a aucun espace qui apparaît (même si je ne vois pas les boutons réservés aux membres inscrits) et la barre de navigation est bien centrée.

C'est pour régler un espace vide qui apparaît sur la barre de navigation entre deux boutons lorsque nous sommes connectés au forum.

Pour revenir à ma problématique, j'ai l'impression que la barre de navigation n'est pas centré de la même manière que le tableau présent sur l'index. Ou peut-être est-ce le tableau qui n'est pas correctement centré sur l'index, j'espère être comprehensible haha

[Oka.mi]

Oui, vous êtes compréhensible, mais je le suis peut-être moins ^^ Je vous explique justement que ce réglage margin est à l'origine du décalage de votre barre de navigation (du coup, le corps du forum n'est pas en tort).
Pouvez-vous me communiquer les autres images de la barre de navigation pour que je puisse voir de mon côté quel compromis on peut trouver pour éviter le décalage tout en résolvant le souci d'espace ?

[Oxtran]

Boutons par boutons ou la barre de navigation complète quand nous sommes connectés ?

[Oka.mi]

Tout ce qui s'affiche quand vous êtes connecté
Donc de ce que je vois sur votre capture d'écran : profil, messagerie, déconnexion (puisque j'ai déjà récupéré accueil)

[Oxtran]

Tout ce qui s'affiche quand vous êtes connecté
Donc de ce que je vois sur votre capture d'écran : profil, messagerie, déconnexion (puisque j'ai déjà récupéré accueil)

Autant pour moi, vous avez déjà toute la barre complète. L'élément css que j'avais ajouté était pour empêcher un léger espace entre le bouton messagerie et le bouton déconnexion.

[Oxtran]

Profil : https://2img.net/i.imgur.com/UarDQqg.jpg
Messagerie :
https://2img.net/i.imgur.com/ZOUpF1k.jpg
Déconnexion :
https://2img.net/i.imgur.com/kindiH4.jpg

[Oka.mi]

C'est curieux, parce que en retirant la ligne destinée à corriger l'espace mais qui crée le décalage, je n'ai aucun espace qui apparaît de mon côté :


Alors je me suis permise de m'inscrire sur votre forum pour regarder directement et en retirant la ligne css, là encore, je n'ai aucun espace et tout est bien centré :


Pouvez-vous retirer cette partie du css de votre côté et, si vous constatez l'espace, me montrer par capture d'écran ce que vous voyez ?

[Oxtran]

Bizarrement l'espace qui était présent il y a quelques jours n'est plus là en retirant la partie du css concerné et a réglé ce soucis de décalage.
Problème résolu, un grand merci pour votre aide!

[Oka.mi]

De rien
Je vous laisse le soin de supprimer mon compte test parce que je ne peux pas le faire moi-même sous 7 jours
Bonne soirée !