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


    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

    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 714

    le Mar 24 Mar 2015 - 10:24

    je le trouve super ^^ merci



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Bunny Lune
    FémininAge : 28Messages : 142

    le Jeu 26 Mar 2015 - 20:05

    Merci pour le partage ♥
    avatar
    Necko
    MasculinAge : 20Messages : 26

    le Mer 1 Avr 2015 - 17:24

    Merci !!
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Jeu 2 Avr 2015 - 6:58

    Merci du partage
    avatar
    rajani
    MasculinAge : 19Messages : 15

    le Jeu 2 Avr 2015 - 14:03

    merci
    avatar
    smily
    FémininAge : 19Messages : 64

    le Jeu 2 Avr 2015 - 16:45

    merci ~
    avatar
    Lorris
    MasculinAge : 20Messages : 32

    le Dim 5 Avr 2015 - 21:02

    Merci Very Happy
    avatar
    triple_snake_
    MasculinAge : 34Messages : 45

    le Lun 6 Avr 2015 - 16:11

    merci
    avatar
    Wavy
    FémininAge : 17Messages : 39

    le Dim 12 Avr 2015 - 1:18

    Merci Beaucoup !
    avatar
    Clémentine
    FémininAge : 25Messages : 223

    le Ven 17 Avr 2015 - 1:20

    Merciiii ^^



    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 150

    le Sam 18 Avr 2015 - 14:46

    Merci beaucoup^^
    avatar
    Ab0utxMe
    FémininAge : 23Messages : 185

    le Sam 18 Avr 2015 - 18:38

    Wooow ! Merci j'adopte :)



    avatar
    LOUVE ☽
    FémininAge : 28Messages : 53

    le Dim 19 Avr 2015 - 17:40

    merci Very Happy
    avatar
    Layla4
    FémininAge : 18Messages : 149

    le Ven 24 Avr 2015 - 20:16

    Merci **
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Sam 25 Avr 2015 - 10:48

    sublime merci
    avatar
    Cruelly
    FémininAge : 25Messages : 2563

    le Mar 28 Avr 2015 - 4:13

    Merci !



    MON PROJET :heart: j'ai besoin d'avis ^^


    avatar
    dark3593
    MasculinAge : 24Messages : 6

    le Lun 4 Mai 2015 - 13:19

    Il est cool ton QEEL, merci beaucoup !
    avatar
    MOON LEE
    FémininAge : 24Messages : 149

    le Mar 5 Mai 2015 - 7:46

    Merci
    avatar
    MEGALAXY
    MasculinAge : 28Messages : 18

    le Jeu 7 Mai 2015 - 15:26

    Merci
    avatar
    Deed01
    MasculinAge : 40Messages : 340

    le Ven 8 Mai 2015 - 17:35

    merci
    avatar
    Zarwins
    FémininAge : 22Messages : 154

    le Mer 13 Mai 2015 - 14:32

    merci beaucoup ! :)



    avatar
    Mariketa
    FémininAge : 41Messages : 79

    le Dim 17 Mai 2015 - 18:52

    Merci !
    avatar
    Kokoro Korou
    MasculinAge : 22Messages : 70

    le Mar 19 Mai 2015 - 15:52

    Merci
    avatar
    pinkwinee
    FémininAge : 23Messages : 44

    le Mar 19 Mai 2015 - 22:25

    Génial ! Merci ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 11:31