Problème script accueil en onglet

[Invité]

J'ai essaye le script pour les onglet dans l'accueil mais sa ne marche pas :
- ma page se "dérègle" complètement, les widget passe en bas ect..
- se n'ai surement pas du au code css vu que je l'ai enlevé en laissant le script javacript la page reste "déréglé"

J'aimerais bien pouvoir mettre tous de même se script, mon forum est sous phpbb 3.0 y a-il un rapport ?

Merci d'avance

Ps : source : https://forum.forumactif.com/t285426-de-quel-facon-faire-des-onglets#2522468

[Invité]

Petit up !

[Invité]

Bonjour,

Je ne rencontre pas de soucis sur mon forum, en version phpBB3. J'ai légèrement modifié la partie CSS, mais je n'ai pas touché au code du message d'accueil.
Le message d’accueil test:

Code:

<script src="http://sd-5.archive-host.com/membres/up/86411517957321821/onglet.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 id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Onglet 5</li>
        </ul>
        <div class="clear"><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 id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
</div></div></div>

Le code CSS test:

Code:

.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  cursor: pointer;
  margin-bottom: -1px;
  list-style-type: none;} 

.mon_onglet:hover{
  background: #b8efa1;
  list-style-type: none;}           

.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;
  list-style-type: none;}             

.clear{
  clear: both;
}

.mon_contenu{
  color: #666;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  padding: 10px;
  font-size: 11px;           
  list-style-type: none;}

#mes_contenus, #mes_onglets{
  width: 600px;
}

Avez-vous autre chose dans votre message d'accueil? un script ajouté sur votre forum? Pourriez vous me donner le lien du forum où sont installés les onglets?

Cordialement.

[Invité]

Merci infiniment pour le script sa venais surement du CSS par contre j'ai fait la balise <br> pour sauter une ligne et les textes passe les uns par dessus les autres
Que faire ??

[Invité]

J'ai parlé trop vite sa redéregle tous !!
Sa ne vient pas du css, je l'ai enlever et tous reste pareil :no
j'ai installé les scripts : bannière aléatoire et la page de chargement.

Merci d'avance

[Invité]

Attention! Evitez les double post, pensez à la fonction .
Pourriez-vous me donner le code que vous utilisez avec toutes les modifications que vous avez apportées?

Cordialement.

[Invité]

Je n'ai presque rien changer :

Code:

<script src="http://sd-5.archive-host.com/membres/up/86411517957321821/onglet.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 id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Onglet 5</li>
        </ul>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">

Bienvenue {USER&amp;#8288;NAME},

Vous vous trouvez sur la {FORUMNAME}.

Version 0.5 stable du forum !!

    <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 id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
</div></div></div>

Voila

[Invité]

J'ai trouvé ce qu'il faut ajouter au CSS pour que les lignes ne se superposent pas. Il faut modifier la partie ".mon_contenu" comme ceci:

.mon_contenu{
color: #666;
background: #b8efa1;
border: 1px solid #68ce3e;
padding: 10px;
font-size: 11px;
line-height: 14px;}

Cela fait varier la hauteur de l'interligne, le nombre de px doit toujours être supérieur à la taille de la police (font-size).

Pour les widgets qui passent en dessous, c'est une simple petite faute d'inattention: vous n'avez pas fermé la div de votre premier contenu .
Ajoutez </div> après" Version 0.5 stable du forum !!" .

Cordialement.

[Invité]

Merci beaucoup !!