Problème avec message d'accueil par onglets

[Binarian]

Bonjour/Bonsoir tout le monde.

Sur mon forum, j'ai voulu mettre un message de bienvenue par onglets que j'ai pu mettre grâce à ce sujet.
Or, lorsque tout est publié sur le forum, tout le forum se décale sur la droite, mais le système d'onglets fonctionne (pour voir le forum, cliquer ici).

Je vous remercie par avance.
Bud.

[Invité]

Bonjour,

Si le forum se décale comme cela c'est qu'il y a un soucis avec le code CSS ou le code de la page d'accueil. pourriez vous nous les mettre, entre les balises code, s'il vous plait? cela nous permettra de trouver d'où vient le soucis.

Cordialement.

[Binarian]

Salut Isolde.

Je peux mettre les codes, mais comme vous pourrez le voir, je n'ai rien touché aux codes du tutoriel, juste pour tester le script.

Code html du message de bienvenue :

Code:

<script src="http://bud.v.free.fr/ffa.js"></script><div id="mes_onglets">
   <ul>
      <li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
      <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
      <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
      <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
      <li class="mon_onglet"><a href="http://www.google.fr" target="_blank">Lien</a></li>
      <div class="clear"></div>
   </ul>
</div><div id="mes_contenus">
   <div id="co_1" class="mon_contenu">Mon contenu 1</div>
   <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
   <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
   <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div>

Code CSS :

Code:

*{
   margin: 0px;
   padding: 0px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
}
body{
   width: 400px;
   margin: 10px auto;
}
a{
   text-decoration: none;
   color: #666;
}
ul, li{
   list-style: none;
}
.mon_onglet{
   float: left;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #d8f8ca;
   border: 1px solid #68ce3e;
   cursor: pointer;
   margin-bottom: -1px;
}   
.mon_onglet:hover{
   background: #b8efa1;
}            
.mon_onglet_selected{
   float: left;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #b8efa1;
   border-top: 1px solid #68ce3e;
   border-right: 1px solid #68ce3e;
   border-left: 1px solid #68ce3e;   
   border-bottom: 1px solid #b8efa1;   
   cursor: pointer;   
   margin-bottom: -1px;
}               
.clear{
   clear: both;
}
.mon_contenu{
   color: #666;
   background: #b8efa1;
   border: 1px solid #68ce3e;
   padding: 10px;            
}
#mes_contenus, #mes_onglets{
   width: 400px;
}

Le code javascript est aussi le même que sur le tutoriel.

Merci de prendre le soin de vouloir m'aider.

[Invité]

Re,

Essayez en supprimant cette partie dans la feuille CSS:

Code:

*{
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
body{
  width: 400px;
  margin: 10px auto;
}

Elle n'est pas utile et crée un conflit avec d'autres paramètres du forum.

Cordialement.

[Binarian]

Re.

Merci pour cette précieuse aide qui fonctionne.
Par contre, je me dis que si l'auteur du tutoriel a mis cette partie, c'est que ça doit servir à quelque chose, non ?

Cordialement.

[Invité]

Oui cette partie sert lors d'une création complète d'un site ou d'un forum. Ce sont des éléments qui servent pour les pages PhP.
"body" est un identifiant présent dans le CSS de base des forum forumactif. Ajoutez par exemple ceci "body{ background-color :#FF0000;}" et vous aurez le fond de votre forum en rouge.
En fait, quand j'ai trouvé ce tuto, il n'était pas fait pour forumactif, nous nous sommes mis à plusieurs pour l'adapter et qu'il fonctionne sur nos forums sans tout déformer.

[Binarian]

Ok, merci de cette information. J'hésitais pour "body" entre le contenu du forum ou du script, comme j'ai quelques connaissances en XHTML/CSS et PHP.

Merci pour votre aide précieuse, je mets le sujet en résolu .