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.

-10%
Le deal à ne pas rater :
PC Portable Gamer ASUS TUF Gaming F15 | 15,6″ FHD IPS 144 Hz – ...
599.99 € 669.99 €
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

    avatar
    Hop80
    MasculinAge : 34Messages : 138

    Mer 20 Mai 2015 - 2:26

    mecri
    lΔω
    lΔω
    FémininAge : 26Messages : 105

    Mer 20 Mai 2015 - 16:07

    Merci du partage ^^
    Ashtar
    Ashtar
    MasculinAge : 24Messages : 44

    Lun 1 Juin 2015 - 17:56

    Je te pique ça. o: Merci ! o/
    Sylfaen
    Sylfaen
    FémininAge : 25Messages : 70

    Mar 2 Juin 2015 - 13:30

    Thank's !
    Samiki
    Samiki
    FémininAge : 25Messages : 84

    Mer 3 Juin 2015 - 14:51

    mici ;33



    Un onglet pour deux contenus - Page 2 Lbxa
    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    Deamyx
    Deamyx
    MasculinAge : 28Messages : 237

    Mer 3 Juin 2015 - 18:24

    Merci
    erika02
    erika02
    FémininAge : 27Messages : 278

    Mer 3 Juin 2015 - 23:21

    merci



    Un onglet pour deux contenus - Page 2 45054210
    Arisu
    Arisu
    FémininAge : 35Messages : 119

    Lun 8 Juin 2015 - 16:53

    Merci !
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Jeu 11 Juin 2015 - 22:36

    Merci !
    Aubynette
    Aubynette
    FémininAge : 22Messages : 25

    Ven 12 Juin 2015 - 22:24

    Merci !
    Fame
    Fame
    MasculinAge : 34Messages : 240

    Dim 14 Juin 2015 - 16:11

    merci
    Devil.
    Devil.
    FémininAge : 26Messages : 58

    Dim 14 Juin 2015 - 18:46

    Merci ! :3
    GreenGage
    GreenGage
    FémininAge : 30Messages : 73

    Lun 15 Juin 2015 - 10:14

    Merci beaucoup !
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Lun 15 Juin 2015 - 11:42

    Merci ! Very Happy
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Ven 26 Juin 2015 - 20:34

    Merci
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Lun 29 Juin 2015 - 13:07

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

    Mer 15 Juil 2015 - 11:11

    Merci ~
    avatar
    N3m0
    FémininAge : 31Messages : 303

    Jeu 16 Juil 2015 - 14:11

    Ty
    Sorako
    Sorako
    FémininAge : 26Messages : 94

    Sam 25 Juil 2015 - 21:50

    Merci !
    defenrir
    defenrir
    MasculinAge : 41Messages : 105

    Sam 25 Juil 2015 - 21:56

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

    Mar 28 Juil 2015 - 17:50

    Meeerciiiiii ♥
    Rosedesvents
    Rosedesvents
    FémininAge : 37Messages : 97

    Jeu 30 Juil 2015 - 23:45

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

    Sam 1 Aoû 2015 - 15:13

    Merci bien ! :3
    Porcelain Detox
    Porcelain Detox
    MasculinAge : 29Messages : 91

    Lun 3 Aoû 2015 - 22:29

    Merci :)
    Mozart
    Mozart
    FémininAge : 29Messages : 53

    Mar 4 Aoû 2015 - 0:17

    C'est superbe ! merci pour ce partage :)



    Un onglet pour deux contenus - Page 2 Tumblr_mjdkx9iT191r24z09o1_500
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 6:37