Mon tableau à onglet dépasse du tableau de la page d'acceuil

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

Résolu Mon tableau à onglet dépasse du tableau de la page d'acceuil

Message par Loula ♥ le Dim 13 Nov 2011 - 19:41

Bonjour, j'ai créer un tableau à onglet dans le tableau de la page d'accueil de mon forum et voici le résultat =>



J'aimerais que le tableau à onglet ne dépasse plus du tableau de la page d'accueil, comment faire ?
Merci d'avance =)


Dernière édition par Loula ♥ le Lun 14 Nov 2011 - 19:41, édité 1 fois

Loula ♥
*

Féminin
Messages : 41
Inscrit(e) le : 12/07/2011

http://amoursucre-rpg.forumgratuit.org/
Loula ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon tableau à onglet dépasse du tableau de la page d'acceuil

Message par diedblack le Dim 13 Nov 2011 - 22:25

Il suffi de le fixed Wink ou de lui mettre un alignement.

Tu peu me donner le code du tableau?

Si je pouvais avoir l'Adresse de votre forum pour aller faire des test a partir de firebug sa serait bien

diedblack
****

Masculin
Messages : 206
Inscrit(e) le : 09/04/2011

http://www.frsociety.com
diedblack a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon tableau à onglet dépasse du tableau de la page d'acceuil

Message par tupac le Lun 14 Nov 2011 - 2:02

Bonsoir Loula

Pour ce que vous souhaitez je vous conseille de prendre le troisième menu proposé dans le tuto.

Donc dans votre page d'accueil placer ce code.
Code:

        <div id="mes_onglets">

            <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
            <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
            <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
            <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span>

  <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></div>
Dans votre feuille de style css placer celui-la.

Code:
/* onglets */

.mon_onglet{
          padding: 4px;
          margin: 10px;
          color: #000;
          background-color: #cecece;
          border: 1px solid #000;
          font-size: 14px;
          display: inline;
}
       
/* onglet au survol de la sourie */

.mon_onglet:hover{
          background: #b8efa1;
}
             
/* onglet sélectionné */

.mon_onglet_selected{
          color: #000;
          background-color: #fff;
          border: 1px solid #000;
          font-size: 14px;
          padding: 4px;
          margin: 10px;
          display: inline;
}
             
/* le contenu du menu */

.mon_contenu{
          color: #000;
          background-color: #cecece;
          border: 1px solid #000;
          font-size: 12px;
          padding: 10px;
          height: 250px;      /* hauteur du tableau */
          width:330px;        /* largeur du tableau */
          margin-top: 5px;    /* marge entre le tableau et les onglets */
}
pour finir placer le code suivant dans la gestion des codes JavaScript donc pour ce faire allez dans => Modules => gestion des codes JavaScript => cliquer sur Créer un nouveau JavaScript => mettre un titre puis cocher sur " sur l'index " placer le code et valider.

Code:
        function changeOnglet(_this){
            var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
            for(var i = 0; i < getOnglets.length; i++){
                if(getOnglets[i].id){
                    if(getOnglets[i].id == _this.id){
                        getOnglets[i].className = 'mon_onglet_selected';
                        document.getElementById('c' + _this.id).style.display            = 'block';
                    }
                    else{
                        getOnglets[i].className = 'mon_onglet';
                        document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                    }
                }
            }   
        }

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Mon tableau à onglet dépasse du tableau de la page d'acceuil

Message par diedblack le Lun 14 Nov 2011 - 4:11

En forçant l'alignement du tableau à droite sa devrais tout réglé le problème puisque si vous remarquez bien il y a de l'espace en masse à droite ! ^^'

Avec l'adresse du forum je pourrais allez testé live ! :O

diedblack
****

Masculin
Messages : 206
Inscrit(e) le : 09/04/2011

http://www.frsociety.com
diedblack a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon tableau à onglet dépasse du tableau de la page d'acceuil

Message par Loula ♥ le Lun 14 Nov 2011 - 19:40

Tupac => Merci, ça marche maintenant =)

diedblack => Merci pour la réponse, j'ai réussi à résoudre le problème ^^

Loula ♥
*

Féminin
Messages : 41
Inscrit(e) le : 12/07/2011

http://amoursucre-rpg.forumgratuit.org/
Loula ♥ 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