AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Manga Fire Force : où commander le Tome 34 Fire Force édition ...
11.50 €
Voir le deal

    Un onglet pour deux contenus

    A-Lice
    A-Lice
    FémininAge : 29Messages : 4939

    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

    Anonymous
    Invité

    Mar 4 Aoû 2015 - 14:11

    Merci ! ヽ(;▽;)ノ
    Orange Sanguine
    Orange Sanguine
    FémininAge : 27Messages : 86

    Mar 18 Aoû 2015 - 15:57

    Merci :)



    Un onglet pour deux contenus - Page 3 Sans_t11
    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Mar 18 Aoû 2015 - 19:04

    J'aime beaucoup ce QEEL, tout s'y trouve :)
    Zoé
    Zoé
    FémininAge : 24Messages : 189

    Lun 24 Aoû 2015 - 11:43

    merciii :)



    Un onglet pour deux contenus - Page 3 274643signaaaa
    Fizzz
    Fizzz
    FémininAge : 29Messages : 17

    Sam 5 Sep 2015 - 11:03

    Thanks !!
    Anonymous
    Invité

    Lun 7 Sep 2015 - 13:50

    Merci <3
    petit lu
    petit lu
    FémininAge : 31Messages : 184

    Jeu 10 Sep 2015 - 20:16

    Merci du partage ♥
    Soleilou
    Soleilou
    FémininAge : 23Messages : 49

    Jeu 24 Sep 2015 - 15:23

    Wowowow merci *^*
    Lilynufare
    Lilynufare
    FémininAge : 33Messages : 341

    Lun 5 Oct 2015 - 23:21

    merci :)
    ~Nodoka~
    ~Nodoka~
    FémininAge : 27Messages : 185

    Ven 23 Oct 2015 - 14:26

    merci
    Victor-57
    Victor-57
    MasculinAge : 33Messages : 13

    Sam 7 Nov 2015 - 14:02

    Merci à toi
    Neyokan
    Neyokan
    FémininAge : 26Messages : 43

    Sam 28 Nov 2015 - 14:38

    Merci!
    Saphire
    Saphire
    FémininAge : 26Messages : 146

    Sam 5 Déc 2015 - 16:56

    merci!! c'est superbe!
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Dim 6 Déc 2015 - 18:47

    MERCIIIIIIIIIIIIII!!!!!!!
    Jenova
    Jenova
    MasculinAge : 29Messages : 153

    Jeu 10 Déc 2015 - 11:34

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



    Un onglet pour deux contenus - Page 3 I3k3
    Elenna
    Elenna
    FémininAge : 28Messages : 32

    Jeu 17 Déc 2015 - 18:21

    Merci !
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 32Messages : 131

    Jeu 17 Déc 2015 - 18:40

    Trop beau <3 Merci !




    Our ice hearts beat
    Voir le monde dans un grain de sable. Et le paradis dans une fleur sauvage. Tenir l'infini dans le creux de sa main. Et l'éternité dans une heure - SIR WILLIAM BLAKE

    Elenna
    Elenna
    FémininAge : 28Messages : 32

    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:
    Akiro
    Akiro
    FémininAge : 31Messages : 55

    Mar 29 Déc 2015 - 19:22

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

    Sam 2 Jan 2016 - 23:23

    Il me tente bien celui là, merci ! :)
    Anonymous
    Invité

    Ven 22 Jan 2016 - 22:09

    Hello,

    Merci
    Likilou
    Likilou
    MasculinAge : 30Messages : 307

    Sam 23 Jan 2016 - 21:01

    Merci =)



    Un onglet pour deux contenus - Page 3 707828SignArthur2
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Ven 18 Mar 2016 - 18:34

    Merci !!
    Fuyuka
    Fuyuka
    FémininAge : 29Messages : 63

    Mer 6 Avr 2016 - 22:54

    Merci beaucoup !
    Akina-chan
    Akina-chan
    FémininAge : 30Messages : 140

    Sam 9 Avr 2016 - 12:48

    Merci <3
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 8:46