PA avec 2 onglets

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

Résolu PA avec 2 onglets

Message par Vicsius le Jeu 25 Aoû 2011 - 19:41

Bonjour à tous alors voilà j'aimerais créer un PA comme ceci:



et la même chose pour les 2 onglets, je ne saurais quoi vous dire d'autre car je ne sais pas se qu'il faut en plus pour créer ceci.

Merci par avance et si des questions je suis là^^

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Vicsius le Ven 26 Aoû 2011 - 19:32

Up, please, j'arrive à créer mon panneau mais pas à mettre les cellules dedans et là où ils devraient.

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Vicsius le Sam 27 Aoû 2011 - 19:57

up

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Lixyr le Sam 27 Aoû 2011 - 20:17

@Vicsius a écrit:Up, please, j'arrive à créer mon panneau mais pas à mettre les cellules dedans et là où ils devraient.

Bonjour.

Si vous avez déjà tenté quelque chose, pourrais-je avoir le code en entier s'il vous plait, ainsi que le css qui va avec ?

Cordialement. ::fleur::

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Vicsius le Dim 28 Aoû 2011 - 13:12

Et bien rien de bien compliqué:

HTML:
Code:
        <div id="mes_onglets";align="center">
            <ul>
                <li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet1</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet2</li>

<div class="clear"><div id="co_2" class="mon_contenu1" >Mon contenu 1</div>

<div id="co_2" class="mon_contenu2" style="display: none;">Mon contenu 2</div>

        </ul>
</div>

CSS:
Code:
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #fff;
          background: #000;
          border: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }

        .mon_onglet:hover{
          background: #b8efa1;
        }       
 
        .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #fff;
          background: #000;
          border-top: 1px solid #fff;
          border-right: 1px solid #fff;
          border-left: 1px solid #fff;
          border-bottom: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}     
   
        .clear{
  clear: both;
}

        .mon_contenu1{
          color: #ABD3D7;
          background: #transparent;
          border: 1px solid #fff;
          padding: 10px;
          line-height: normal;
          font-size: 11px;}

        #mes_contenus, #mes_onglets{
          width:800px;
          margin: 5px;}



/* Scroller Box */

#scroller_container {
width: 100%;
height: 250px;
overflow: hidden;
}

/* CSS Hack Safari */

#dummy {;# }

#scroller_container {
overflow: auto;
}

Et mon Script:
Code:
function changeOnglet(_this){
            var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
            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';
                    }
                }
            }         
        }

Merci à vous.

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Lixyr le Lun 29 Aoû 2011 - 13:24

Une petite erreur dans le code html : (dans la pa)

<div id="mes_onglets" align="center">
<ul>
<li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet2</li>

<div class="clear"><div id="co_1" class="mon_contenu1" >Mon contenu 1</div>

<div id="co_2" class="mon_contenu2" style="display: none;">Mon contenu 2</div>

</ul>
</div>

attention aux fautes de frappe et à bien mettre le bon chiffre pour chaque onglet : le 1 pour le rpemier et le 2 pour le deuxième.

Maintenant les onglets fonctionnent, il suffit juste de remplacer les contenus par les tableaux désirés.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Vicsius le Lun 29 Aoû 2011 - 21:05

Oui, merci pour la correction des erreurs, je n'avais pas fait attention et avez mis mon test de PA (ma version corrigé avait tout de même une petite erreur de point-virgule), mon problème ne viens pas à l'origine de la construction du cadre et des onglet mais de le remplir, si je rajoute quelques chose à l'intérieur, les cadre se mettent l'un en dessous de l'autre sans possibilité de les déplacer et les titre de mes cellules reste dans mon 2è onglet.

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Lixyr le Lun 29 Aoû 2011 - 21:17

Hum, et bien il me faudrait un exemple de ces contenus, que vous mettez, pour que je vois pourquoi ça ne marche pas. Razz





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Vicsius le Mar 30 Aoû 2011 - 18:15

Voici donc se que j'avais fait, cela doit être bourré d'erreur, mais bon, j'espère que vous pourrez m'aider et ainsi me faire comprendre mes erreurs:

Code:
<div id="mes_onglets" align="center">
<ul>
<li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet2</li>

<div class="clear"><div id="titre">texte1</div><div id="co_1" class="mon_contenu1"style="width:40%"; class="left">
       
<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/jscroller2-161.js"></script><div id="scroller_container"><div class="jscroller2_up jscroller2_speed-10 jscroller2_mousemove">
blablabla...
</div>
</div>
</div>

<div class="clear"><div id="titre">texte2</div><div id="co_1" class="mon_contenu1"style="width:40%"; class="right">

<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/jscroller2-161.js"></script><div id="scroller_container"><div class="jscroller2_up jscroller2_speed-10 jscroller2_mousemove">
blablabla...2
</div>
</div>
</div>

<div id="co_2" class="mon_contenu2" style="display: none;">Mon contenu 2</div>

</ul>
</div>

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Lixyr le Mer 31 Aoû 2011 - 11:41

Ah oui je vois.

C'est normal que ça ne marche pas, si vous modifiez le code html. ^^

Le code doit impérativement rester ainsi, et seules les parties en orange peuvent être modifiées :

<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>
</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></div></div>

(et en violet aussi, mais si vous gérez le code, déjà : c'est pour changer si ça change quand on clique ou juste quand on passe la souris dessus : dans ce cas on met onmousover.)

et ensuite vous remplacez ce qui est en orange par ce que vous voulez. Mais il ne faut pas toucher au reste, sinon c'est sûr que ça ne marchera pas.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Vicsius le Mer 31 Aoû 2011 - 18:05

Ah d'accord je comprend mieux et je peux lui ajouter des script et autre aux parties orange ou cela me limite et je dois pratiquer autrement ???

Merci à vous.

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA avec 2 onglets

Message par Lixyr le Mer 31 Aoû 2011 - 19:14

Dans la partie orange du contenu, vous mettez ce que vous voulez, tant que vous ne mettez pas deux fois le même script javascript (le code pour les onglets). Sinon il y aura interférence, et seul le dernier code onglet marchera.

Donc au pire, si jamais vous souhaitez mettre des onglets dans des onglets, mettez deux codes différents à onglets. Sinon, vous êtes libre de mettre ce que vous voulez, tant que vous ne modifiez pas la structure du code de départ.

Cordialement.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr 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