Onglets & affichage : la liste des forums "descend"

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Onglets & affichage : la liste des forums "descend"

Message par # Eve le Dim 3 Avr 2011 - 18:20

Bonjour à tous, Wink

Pardonnez-moi pour le titre peu explicite, je n'ai pas trouvé mieux.

J'ai organisé la PA de mon forum en onglets en suivant un tutoriel. Souci : lorsque j'ouvre successivement mes onglets de gauche à droite, la liste des forums qui leur est liée "descend" dans ma PA. C'est un peu compliqué de faire un screenshot de ce problème, si besoin je peux me débrouiller. Voici l'extrait de mon template index_box (code dédié aux onglets) suivie l'extrait de ma feuille CSS dédiée :


Code:
<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

var i = 0;

document.write('<div align="center">
<ul class="onglet">

 
<li onclick="change_cat(0);" class="onglet_actif" id="cat_0">Bienvenue !</li>
<li onclick="change_cat(1);" class="onglet_nactif" id="cat_1">Psy et traitements</li>
<li onclick="change_cat(2);" class="onglet_nactif" id="cat_2">Troubles alimentaires</li>
<li onclick="change_cat(3);" class="onglet_nactif" id="cat_3">Soutien psychologique</li>
<li onclick="change_cat(4);" class="onglet_nactif" id="cat_4">Le Quotidien</li>

</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}

//-->
</script>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">


<script type="text/javascript">
<!--
capture_cat();
//-->
</script>   

<!-- FIN MODIF ONGLETS -->

Code:
    /* --- ONGLETS FORUM --- */
    text
    {
          color:#FF0000; /*Couleur du texte de vos onglets*/
          cursor: crosshair;
    }

    #cat_Bienvenue,#cat_Psy,#cat_Troubles,#cat_Soutien,#cat_Quotidien
    /*nomonglet... � remplacer par le nom des onglets*/
    {
          padding-top:10px;
          padding-bottom:10px;
    }

    .spoiler_content { display: block; }
    .hidden .spoiler_content { display: none; }

    .cat_forum
    {
          background-color: #000000;
          margin: auto;
          margin-bottom:30px;
          width:800px;
    }

    .onglet
    {
          display:inline-block;
          margin-top:15px;
          margin-bottom:30px;
          text-decoration:none;
          cursor:crosshair;
    }

    .onglet li
    {
          float:left;
          list-style-type:none;
          margin-bottom:-22px;
          text-decoration:none;
          cursor:crosshair;
    }

    .onglet li:hover
    {
          text-decoration:none;
          cursor:pointer;
    }

    .onglet li a
    {
          display:block;
          text-decoration:none;
          list-style-type: none;
          cursor:pointer;
    }

    .onglet li a: hover
    {
          text-decoration:none;
          list-style-type:none;
          cursor:pointer
    }

    .onglet_actif
    {
                color:#FFFFFF;
                font-family:Trebuchet MS;
                font-size:13px;
                text-align:center;
                padding:5px;
                text-shadow: #000000 4px 4px 4px;
                background:url('http://img121.imageshack.us/img121/4928/fondpb.png') no-repeat; /*URL de l'onglet �tant actif*/
                width:90px; /*Largeur de l'onglet �tant actif*/
                height:40px; /*Hauteur de l'onglet �tant actif*/
                cursor:crosshair;
                -moz-border-radius: 10px
                border: 1px #777777 solid;
                margin-right:10px;
              -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
              -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
              -goog-ms-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    }

    .onglet_nactif
    {
                color:#FFFFFF;
                font-family:Trebuchet MS;
                font-size:13px;
                text-align:center;
                padding: 5px;
                text-shadow: #000000 4px 4px 4px;
                background:url('http://img121.imageshack.us/img121/4928/fondpb.png') no-repeat; /*URL de l'onglet �tant inactif*/
                width:90px; /*Largeur de l'onglet �tant inactif*/
                height:40px; /*Hauteur de l'onglet �tant inactif*/
                cursor:crosshair;
                -moz-border-radius: 10px
                border: 1px #777777 solid;
                margin-right:10px;
              -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
              -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
              -goog-ms-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    }

Toute forme d'aide serait grandement appréciée. Wink

Amicalement,

Eve.


Dernière édition par # Eve le Lun 4 Avr 2011 - 14:30, édité 1 fois

# Eve
**

Féminin
Messages : 54
Inscrit(e) le : 02/10/2010

# Eve a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets & affichage : la liste des forums "descend"

Message par # Eve le Lun 4 Avr 2011 - 14:30

Bonjour ! Wink

Je vous informe simplement que le sujet est résolu.
Il s'agissait d'un problème de positionnement CSS de mon forumline.
Je poste ici la solution que j'ai trouvée, si d'autres rencontrent le même problème.
(Sous toutes réserves : pas sûre que cela fonctionne partout, je suis une bille en positionnement).

Code:
.forumline
    {
        clear: both;
        float: left;
        }

Tout bêtement. Laughing

Amicalement,

Eve.

# Eve
**

Féminin
Messages : 54
Inscrit(e) le : 02/10/2010

# Eve a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum