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

    Hop80
    MasculinAge : 28Messages : 138

    le Mer 20 Mai 2015 - 2:26

    mecri
    avatar
    lΔω
    FémininAge : 20Messages : 105

    le Mer 20 Mai 2015 - 16:07

    Merci du partage ^^
    avatar
    Ashtar
    MasculinAge : 18Messages : 44

    le Lun 1 Juin 2015 - 17:56

    Je te pique ça. o: Merci ! o/
    avatar
    Sylfaen
    FémininAge : 20Messages : 69

    le Mar 2 Juin 2015 - 13:30

    Thank's !
    avatar
    Samiki
    FémininAge : 20Messages : 84

    le Mer 3 Juin 2015 - 14:51

    mici ;33




    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Mer 3 Juin 2015 - 18:24

    Merci
    avatar
    erika02
    FémininAge : 21Messages : 262

    le Mer 3 Juin 2015 - 23:21

    merci



    avatar
    Arisu
    FémininAge : 29Messages : 109

    le Lun 8 Juin 2015 - 16:53

    Merci !
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Jeu 11 Juin 2015 - 22:36

    Merci !
    avatar
    Aubynette
    FémininAge : 16Messages : 25

    le Ven 12 Juin 2015 - 22:24

    Merci !
    avatar
    Fame
    MasculinAge : 28Messages : 229

    le Dim 14 Juin 2015 - 16:11

    merci
    avatar
    Devil.
    FémininAge : 21Messages : 58

    le Dim 14 Juin 2015 - 18:46

    Merci ! :3
    avatar
    GreenGage
    FémininAge : 25Messages : 73

    le Lun 15 Juin 2015 - 10:14

    Merci beaucoup !
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Lun 15 Juin 2015 - 11:42

    Merci ! Very Happy
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Ven 26 Juin 2015 - 20:34

    Merci
    avatar
    Kirito
    MasculinAge : 22Messages : 200

    le Lun 29 Juin 2015 - 13:07

    Il a l'air génial, je vais le tester de suite o/
    avatar
    Le Panda.
    FémininAge : 21Messages : 34

    le Mer 15 Juil 2015 - 11:11

    Merci ~
    N3m0
    FémininAge : 25Messages : 303

    le Jeu 16 Juil 2015 - 14:11

    Ty
    avatar
    Sorako
    FémininAge : 20Messages : 94

    le Sam 25 Juil 2015 - 21:50

    Merci !
    avatar
    defenrir
    MasculinAge : 35Messages : 70

    le Sam 25 Juil 2015 - 21:56

    merchi o/
    avatar
    LyN[ss]
    FémininAge : 26Messages : 105

    le Mar 28 Juil 2015 - 17:50

    Meeerciiiiii ♥
    avatar
    Rosedesvents
    FémininAge : 31Messages : 96

    le Jeu 30 Juil 2015 - 23:45

    Merci! Je vais essayer :)
    avatar
    Yamamura
    FémininAge : 21Messages : 72

    le Sam 1 Aoû 2015 - 15:13

    Merci bien ! :3
    avatar
    Porcelain Detox
    MasculinAge : 23Messages : 91

    le Lun 3 Aoû 2015 - 22:29

    Merci :)
    avatar
    Mozart
    FémininAge : 23Messages : 52

    le Mar 4 Aoû 2015 - 0:17

    C'est superbe ! merci pour ce partage :)



    Contenu sponsorisé


      La date/heure actuelle est Sam 26 Mai 2018 - 11:59