AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Un onglet pour deux contenus

    Partagez
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Mer 18 Mar 2015 - 22:53

    Rappel du premier message :


    Un onglet pour deux contenus


    Suite à une demande de Filou voici un QEEL.

    Je précise que l'arrière plan rose foncé correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www ~ phpBB2


    Et le code :
    Le template index-body.

    Repérez ceci (entre les lignes 173 et 221 du template de base) :
    Code:
    <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
       </tr>
       <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
       </tr>
       <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
       </tr>
       {L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}
       <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
       </tr>
       <!-- BEGIN switch_chatbox_activate -->
       <tr>
          <td class="row1">
             <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
             </span>
          </td>
       </tr>
       <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->

    Et remplacez-le par ça :
    Code:
    <!-- BEGIN disable_viewonline -->
    <br /><div class="QEEL_img"></div>
    <div class="QEEL_fond">
          <!-- BEGIN switch_viewonline_nolink -->
          <div class="QEEL_titre">Qui est en ligne ?</div>
          <!-- END switch_viewonline_nolink -->
    <script type="text/javascript">
            //<!--
                    function change_onglet(bouya)
                    {
                            document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                            document.getElementById('onglet_'+bouya).className = 'onglet_1 onglet';
                            document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                            document.getElementById('contenu_onglet_'+bouya).style.display = 'block';
             document.getElementById('contenu_onglet2_'+anc_onglet).style.display = 'none';
                            document.getElementById('contenu_onglet2_'+bouya).style.display = 'block';
                            anc_onglet = bouya;
                    }
            //-->
    </script><div class="QEEL_bloc"><div class="onglet_0 onglet" id="onglet_un" onmouseover="javascript:change_onglet('un');">Groupe 1</div><div class="onglet_0 onglet" id="onglet_deux" onmouseover="javascript:change_onglet('deux');">Groupe 2</div><div class="onglet_0 onglet" id="onglet_trois" onmouseover="javascript:change_onglet('trois');">Groupe 3</div><div class="onglet_0 onglet" id="onglet_quatre" onmouseover="javascript:change_onglet('quatre');">Groupe 4</div><div class="onglet_0 onglet" id="onglet_cinq" onmouseover="javascript:change_onglet('cinq');">Groupe 5</div><div class="onglet_0 onglet" id="onglet_six" onmouseover="javascript:change_onglet('six');">Groupe 6</div><div class="onglet_0 onglet" id="onglet_sept" onmouseover="javascript:change_onglet('sept');">Groupe 7</div><div class="onglet_0 onglet" id="onglet_huit" onmouseover="javascript:change_onglet('huit');">Groupe 8</div></div>
    <div class="contenu_onglet" id="contenu_onglet_un">
        Contenu du 1er onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_deux">
        Contenu du 2ième onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_trois">
        Contenu du 3ième onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_quatre">
        Contenu du 4ième onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_cinq">
        Contenu du 5ième onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_six">
        Contenu du 6ième onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_sept">
        Contenu du 7ième onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_huit">
        Contenu du 8ième onglet
    </div>
    <div class="contenu_onglet2" id="contenu_onglet2_un">
        Membres du 1er onglet
    </div>
    <div class="contenu_onglet2" id="contenu_onglet2_deux">
        Membres du 2ième onglet
    </div>
    <div class="contenu_onglet2" id="contenu_onglet2_trois">
        Membres du 3ième onglet
    </div>
    <div class="contenu_onglet2" id="contenu_onglet2_quatre">
        Membres du 4ième onglet
    </div>
    <div class="contenu_onglet2" id="contenu_onglet2_cinq">
        Membres du 5ième onglet
    </div>
    <div class="contenu_onglet2" id="contenu_onglet2_six">
        Membres du 6ième onglet
    </div>
    <div class="contenu_onglet2" id="contenu_onglet2_sept">
        Membres du 7ième onglet
    </div>
    <div class="contenu_onglet2" id="contenu_onglet2_huit">
        Membres du 8ième onglet
    </div><script type="text/javascript">
            //<!--
                    var anc_onglet = 'un';
                    change_onglet(anc_onglet);
            //-->
      </script>
    <div class="QEEL_desc"><div class="QEEL_soustitre">Description :</div>
    </div><div class="QEEL_user"><div class="QEEL_soustitre">Membres :</div>
    </div>
    <div class="QEEL_stat"><div class="QEEL_soustitre">Statistiques :</div>{TOTAL_POSTS}<br />{TOTAL_USERS}<br />{NEWEST_USER}<br /><br />{TOTAL_USERS_ONLINE}<br />{RECORD_USERS}<br /><br />{LOGGED_IN_USER_LIST}<table class="transparent">{L_CONNECTED_MEMBERS}</table>
    </div>
    <a href="http://www.never-utopia.com" style="display: block; text-decoration: none; position: absolute; top: 355px; left: 380px;">A-Lice | Never-Utopia</a>
    </div>
    <!-- END disable_viewonline -->


    CSS :
    Code:
    /************QEEL par A-Lice************/
    .QEEL_img {
    width: 850px;
    height: 230px;
    overflow: hidden;
    margin: auto;
    background: url(http://nsa34.casimages.com/img/2015/03/18/150318061744808586.png);
    }

    .QEEL_fond {
    width: 850px;
    height: 375px;
    margin: auto;
    background: dimgray;
    color: black;
    font-size: 12px;
    position: relative;
    }

    .QEEL_titre {
    font-size: 40px;
    font-family: Times New Roman;
    text-align: center;
    color: black;
    position: relative;
    top: -15px;
    }

    .QEEL_stat {
    width: 600px;
    height: 140px;
    padding: 10px;
    text-align: justify;
    background: silver;
    overflow: auto;
    position: absolute;
    top: 190px;
    left: 205px;
    }

    .transparent .row1 {
    background-color: transparent;
    }
    .transparent .gensmall {
    font-size: 12px;
    }

    .QEEL_desc {
    width: 340px;
    height: 130px;
    padding: 10px;
    background: silver;
    position: absolute;
    top: 20px;
    left: 205px;
    }

    .QEEL_user {
    width: 230px;
    height: 130px;
    padding: 10px;
    background: silver;
    position: absolute;
    top: 20px;
    left: 575px;
    }

    .QEEL_soustitre {
    font-size: 16px;
    font-weight: bold;
    }

    .QEEL_bloc {
    width: 170px;
    height: 375px;
    position: absolute;
    top: 20px;
    left: 20px;
    }

    /*onglets*/
    .onglet {
    width: 155px;
    height: 22px;
    padding: 5px;
    background: silver;
    margin-bottom: 10px;
    box-shadow: 1px 2px 5px black;
    }

    .onglet_0 {
    background: silver;
    }

    .onglet_1 {
    background: white;
    }

    #onglet_un {
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    }

    #onglet_deux {
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    }

    #onglet_trois {
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    }

    #onglet_quatre {
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    }

    #onglet_cinq {
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    }

    #onglet_six {
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    }

    #onglet_sept {
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    }

    #onglet_huit {
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    }

    .contenu_onglet {
    color: black;
    position: relative;
    width: 340px;
    height: 110px;
    left: 215px;
    top: 50px;
    display: none;
    overflow: auto;
    z-index: 20;
    }

    #contenu_onglet_un {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet_deux{
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet_trois {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet_quatre {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet_cinq {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet_six {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet_sept {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet_huit {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    .contenu_onglet2 {
    color: black;
    position: relative;
    width: 230px;
    height: 110px;
    left: 585px;
    top: -60px;
    display: none;
    overflow: auto;
    z-index: 20;
    }

    #contenu_onglet2_un {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet2_deux{
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet2_trois {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet2_quatre {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet2_cinq {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet2_six {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet2_sept {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }

    #contenu_onglet2_huit {
    font-size: 12px;
    text-align: justify;
    font-family: Times New Roan Regular;
    }
    /*fin onglets*/
    /************Fin QEEL par A-Lice************/


    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par A-Lice le Mar 24 Mar 2015 - 13:38, édité 1 fois

    En ligne
    avatar
    Kelalin
    FémininAge : 25Messages : 1871

    le Mar 4 Aoû 2015 - 14:11

    Merci ! ヽ(;▽;)ノ
    avatar
    Orange Sanguine
    FémininAge : 22Messages : 82

    le Mar 18 Aoû 2015 - 15:57

    Merci :)



    avatar
    Nymeria.
    FémininAge : 23Messages : 306

    le Mar 18 Aoû 2015 - 19:04

    J'aime beaucoup ce QEEL, tout s'y trouve :)
    avatar
    Zoé
    FémininAge : 19Messages : 185

    le Lun 24 Aoû 2015 - 11:43

    merciii :)



    avatar
    Fizzz
    FémininAge : 24Messages : 17

    le Sam 5 Sep 2015 - 11:03

    Thanks !!
    avatar
    SunshineD
    FémininAge : 28Messages : 113

    le Lun 7 Sep 2015 - 13:50

    Merci <3
    avatar
    petit lu
    FémininAge : 25Messages : 172

    le Jeu 10 Sep 2015 - 20:16

    Merci du partage ♥
    avatar
    Soleilou
    FémininAge : 17Messages : 49

    le Jeu 24 Sep 2015 - 15:23

    Wowowow merci *^*
    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Lun 5 Oct 2015 - 23:21

    merci :)
    avatar
    ~Nodoka~
    FémininAge : 21Messages : 182

    le Ven 23 Oct 2015 - 14:26

    merci
    avatar
    Victor-57
    MasculinAge : 27Messages : 13

    le Sam 7 Nov 2015 - 14:02

    Merci à toi
    avatar
    Neyokan
    FémininAge : 21Messages : 43

    le Sam 28 Nov 2015 - 14:38

    Merci!
    avatar
    Saphire
    FémininAge : 20Messages : 146

    le Sam 5 Déc 2015 - 16:56

    merci!! c'est superbe!
    avatar
    Faïryna
    FémininAge : 15Messages : 63

    le Dim 6 Déc 2015 - 18:47

    MERCIIIIIIIIIIIIII!!!!!!!
    avatar
    Jenova
    MasculinAge : 23Messages : 126

    le Jeu 10 Déc 2015 - 11:34

    Hey merci c'est presque exactement ce que je cherchais =)



    avatar
    Elenna
    FémininAge : 23Messages : 32

    le Jeu 17 Déc 2015 - 18:21

    Merci !
    avatar
    Crazy-Sweet
    FémininAge : 26Messages : 128

    le Jeu 17 Déc 2015 - 18:40

    Trop beau <3 Merci !



    What if I need you baby?
    I PROMISE THAT ONE DAY I’LL BE AROUND, I’LL KEEP YOU SAFE ! IT'S SUCH A CRUEL WORLD BUT I FOUND SOMETHING GOOD.. ‘CAUSE IN ALL THIS BITTERNESS YOU STAY SO SWEET ...
    avatar
    Elenna
    FémininAge : 23Messages : 32

    le Lun 28 Déc 2015 - 16:59

    Plop ♪

    J'ai mis le QEEL sur mon forum, il est parfait. J'ai juste une petite question :

    - De base, il y a le générateur de membres d'un groupe sur le QEEL (on clique sur un groupe et on voit les membres de celui-ci). Cependant, lorsque je mets ton code, comment faire pour que les membres du groupe en question soit généré automatiquement ?

    Merci d'avance. :love:
    avatar
    Akiro
    FémininAge : 25Messages : 54

    le Mar 29 Déc 2015 - 19:22

    Superbe structure, merci beaucoup de partager!
    avatar
    Lulus
    FémininAge : 27Messages : 143

    le Sam 2 Jan 2016 - 23:23

    Il me tente bien celui là, merci ! :)
    avatar
    Sacha73
    MasculinAge : 38Messages : 67

    le Ven 22 Jan 2016 - 22:09

    Hello,

    Merci
    avatar
    Likilou
    MasculinAge : 24Messages : 301

    le Sam 23 Jan 2016 - 21:01

    Merci =)



    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Ven 18 Mar 2016 - 18:34

    Merci !!
    avatar
    Fuyuka
    FémininAge : 23Messages : 62

    le Mer 6 Avr 2016 - 22:54

    Merci beaucoup !
    avatar
    Akina-chan
    FémininAge : 24Messages : 138

    le Sam 9 Avr 2016 - 12:48

    Merci <3
    Contenu sponsorisé


      La date/heure actuelle est Jeu 24 Mai 2018 - 19:14