centrer le forum

[S0me0ne]

Bonjour, Je refaisais le design d'un forum où je suis administratrice et sans que je comprenne pourquoi le forum s'est soudainement tasser à gauche. nous avons tout essayer pour le remettre au centre et rien ne fonctionne
voici le lien pour voir ce dont je parle :http://secretcountry.forumactif.org/

Merci de votre aide

S0me0ne

[Matriochka]

Bonjour,

Peux-tu envoyer ici le contenu de ta feuille CSS personnalisée ?

Quelles modifications as-tu fait récemment sur ce forum ?

[S0me0ne]

J'ai simplement changer les images pour les personnaliser et ajouter le carré d'acceuil. La feuille CSS est blanche désactivée.

[Matriochka]

Dans ce cas, ça peut peut-être venir de la page d’accueil. peux-tu me l’envoyer ici sous balises code stp ?

[S0me0ne]

voilà

Code:

<script type="text/javascript">
  //<!--
  // La fonction Javascript va permettre de changer d'onglet lorsque l'on clique sans recharger la page.
  // Le principe est simple. Le cadre gérant le contenu que l'on souhaite voir reçoit la calver onglet_actif alors que les autres reçoivent onglet_inactif pour les cacher.
      function change_onglet(name)
      {
        document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet';
        document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet';
        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
        document.getElementById('contenu_onglet_'+name).style.display = 'block';
        anc_onglet = name;
      }
  //-->
  </script>
  <style type="text/css">
  body
  {
      width:800px;
      margin:auto;
  }
  img
  {
      border:none;
  }
  .systeme_onglets
  {
      margin-top:5px;
      margin-left:5px;
      width:57%;
      float:left;
  }
  .bloc_general_onglet
  {
      display:inline-block;
      margin-left:3px;
      margin-right:3px;
      padding:3px;
      border:1px solid black;
      cursor:pointer;
  }
  .onglet_inactif
  {
    font-size: 12px;
      background:#bbbbbb;
      border-bottom:1px solid black;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 3px;
  }
  .onglet_actif
  {
    font-size: 12px;
      background:#eeeeee;
      border-top:1px solid #eeeeee;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 3px;

  } 
  .contenu_onglet
  {
      background : transparent;
      border:1px solid black;
      margin-top:1px;
      padding:5px;
      display:none;
      -moz-border-radius: 10px 10px 10px 10px ;
      height:200px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 3px;
  }
  .titre
  {
      text-align:center;
      text-decoration:underline;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 3px;
  }
 
  /* Le css suivant permet de mettre l'info bulle... */
 

  /* Rend visible tout notre bloc span et lui attribue une taille */
  a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
  {
      top        :  auto;
      left      :  auto;
      height    :  auto;
      overflow  :  visible;
  }
  span.contenu
  {
      display    : block;
      padding    : 0 8px;
  }   

/* _________________infobulle par Rits-u __________*/

/* PERSONNALISATION DE L'INFO-BULLE*/

.infobulle:hover span
 {
  background : transparent;
  display: inline;
  white-space: nowrap;
  position: absolute;
  top: -140px; /* position de l'infobulle verticalement */
  left: -2px; /* position de l'infobulle horizontalement */
  width: 80px; /* largeur de l'infobulle */
  height: 150px; /* hauteur de l'infobulle */
  color:#000000; /* couleur du texte */
  border: 1px solid #000000; /* taille, style et couleur de la bordure */
  background:  #F4F4F3; /* couleur d'arrière-plan de l'infobulle */
  padding: 1px; /* espacement entre les bords et le texte */
}

/* NE PAS TOUCHER */

a.infobulle { 
background : transparent;
position: relative;}
a.infobulle span {  display: none; }
a.infobulle:hover {  background: none;  z-index: 999;}

  </style>

      <div style="width:800px;margin:auto;height:250px;">
        <div class="systeme_onglets">

          <div class="contenu_onglets">
              <div class="contenu_onglet" id="contenu_onglet_premier">
                <div class="titre">Bienvenu</div>
Bonjour à tous et à toutes, Le présent forum se trouve présentement en reconstruction. Les design catégorie et autres risques de varier beaucoup dans les prochain jour. Vous pouvez toutefois vous inscrire et profiter de la CB pour connaître les autres joueurs.
              </div>
             
             
              <div class="contenu_onglet" id="contenu_onglet_deuxieme">
              <div class="titre">Contexte</div>
Des gens sont enlevés pour ensuite être revendus à d'autres gens plus riches et cruels. Ils sont vendus  au plus offrants, après avoir été divisé en 4 catégories selon leurs capacités et aptitude. Les esclaves enfants, ménagers, sexuels et généraux.
              </div>
             
             
              <div class="contenu_onglet" id="contenu_onglet_troisieme">
              <div class="titre">News & Annonces</div> 
    Contenue onglet 3
            </div>
          </div>
         

          <div class="onglets" style="padding-left:10px;">
              <span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Bienvenue</span>
              <span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Contexte</span>
              <span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">News & Annonces</span>
            </div>
      </div>
      <script type="text/javascript">
      //<!--
        var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1
        change_onglet(anc_onglet);
      //-->
      </script>
     
      <!-- Ci dessous le cadre du staff -->
        <div style="width:40%;float:right;border:1px solid black;height:200px;padding:5px;margin-right:5px;margin-top:5px;">
            <div class="titre">STAFF & Crédits</div>
            <a href="#" class="infobulle"><img src="http://img15.hostingpics.net/pics/694483Sanstitre5.png">
  <span><center>Kawano Yumehito
<br> Fonda
<br>Actif
<br>Nombre de
<br>messages
<br>postés :variable</center>
  </span></a>

 <a href="#" class="infobulle"><img src="http://img15.hostingpics.net/pics/583777Sanstitre6.png">
  <span><center>Kim Jaejoong
<br>Admin
<br>Actif
<br>Nombre de
<br>messages
<br>postés : variable</center>
  </span></a>

<br><a href="LIEN">Voire tout le Staff</a>
 
        </div>
      </div>
      <!-- Fin du cadre du staff -->
     
     
      <!-- Debut du cadre des infos importantes -->
      <div style="width:46%;border:1px solid black;height:200px;float:left;margin-top:5px;overflow:auto;">
        <div class="titre">Partenaires/Crédits</div>
 
  <img src="http://kewee.free.fr/ressources/standarts/88X31.jpg" border="0" alt="" />
        <img src="http://kewee.free.fr/ressources/standarts/88X31.jpg" border="0" alt="" />
    <img src="http://kewee.free.fr/ressources/standarts/88X31.jpg" border="0" alt="" />
<br><br>
Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

       
      </div>
      <!-- Fin informations importantes -->
     
     
      <!-- Début cadre en bas à droite -->
      <div style="width:50%;border:1px solid black;height:225px;margin-top:-20px;float:right;">
     
            <!-- player de musique (dewplayer pour faire un exemple) -->
            <div style="margin-left:10px;margin-top:10px;">
              <object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashswf/dewplayer.swf" width="200" height="60" id="dewplayer" name="dewplayer">
              <param name="wmode" value="transparent" />
              <param name="movie" value="http://www.alsacreations.fr/flashswf/dewplayer.swf" />
              <param name="flashvars" value="mp3=la_musique.mp3&showtime=1" />
              </object>
            </div>
           
              Image....
      </div>
      <br><center> (c) Faucon sur <a href="http://epicode.bbactif.com">Epicode</a></center>

[S0me0ne]

Le forum est tassé sur la droite  lorsque l'on est connecté  et sur la page d'acceuil
voici un print screen de la situation:
https://2img.net/r/hpimg15/pics/226912print.png

[MasDan]

Bonjour,

Dans le code fournit ci-haut repéré ceci

Code:

<style type="text/css">
  body
  {
      width:800px;
      margin:auto;
  }

et remplacer la ligne 4

Code:

     width:800px;

par

Code:

     width:auto;

[S0me0ne]

Mille merci tout est parfaitement régler *0*