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.


    Qeel en jeu d'onglets

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

    le Mer 22 Avr 2015 - 22:09

    Rappel du premier message :


    Qeel en jeu d'onglets


    Suite à une demande de Dooh-Nem voici un QEEL avec un système d'onglet pour les statistiques et les groupes.

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

    HTML & CSS ~ Voici donc un aperçu : www et au passage de la souris ~ phpBB2


    Et le code :
    Template Index_body

    Chercher ligne 173 et supprimer tout ce qu'il y a entre ces balises :
    Code:
    <!-- BEGIN disable_viewonline -->
    <!-- END disable_viewonline -->

    Puis coller le code à la ligne 173 :
    Code:
    <!-- BEGIN disable_viewonline -->
    <div class="QEEL_fond">
    <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';
                            anc_onglet = bouya;
                    }
            //-->
    </script><div class="onglet_0 onglet" id="onglet_un" onmouseover="javascript:change_onglet('un');">Connectés</div><div class="onglet_0 onglet" id="onglet_deux" onmouseover="javascript:change_onglet('deux');">Statistiques</div><div class="onglet_0 onglet" id="onglet_trois" onmouseover="javascript:change_onglet('trois');">Crédits</div>
    <div class="contenu_onglet" id="contenu_onglet_un">
       {TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}
    </div>
    <div class="contenu_onglet" id="contenu_onglet_deux">
          {TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}<br />
       <table class="transparent">{L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}</table>
    </div>
    <div class="contenu_onglet" id="contenu_onglet_trois">
        Contenu du 3ième onglet
    </div><script type="text/javascript">
            //<!--
                    var anc_onglet = 'un';
                    change_onglet(anc_onglet);
            //-->
      </script>
    <div class="QEEL_img"></div>
    <div class="QEEL_titre">Qui est présent dans nos murs ?</div>
    <a href="http://www.never-utopia.com" style="position: absolute; left: 380px; top: 5px; font-size: 11px;">A-Lice | Never-Utopia</a>
    <div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -153px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -306px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -459px;">DESCRIPTION</div></div><div class="QEEL_groupe1"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle1" style="margin-left: -612px;">DESCRIPTION</div></div>

    <div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -153px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -306px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -459px;">DESCRIPTION</div></div><div class="QEEL_groupe2"><img src="http://nsa38.casimages.com/img/2015/04/19/150419075900768852.png" /><div class="infobulle2" style="margin-left: -612px;">DESCRIPTION</div></div>
    </div>
    <!-- END disable_viewonline -->


    CSS :
    Code:
    /************QEEL par A-Lice************/
    .QEEL_fond {
    background: black;
    width: 900px;
    height: 505px;
    position: relative;
    margin: auto;
    }

    .QEEL_img {
    border-radius: 100px;
    width: 180px;
    height: 180px;
    overflow: hidden;
    background: url(http://nsa37.casimages.com/img/2015/04/19/150419065016844471.png);
    position: absolute;
    left: 3em;
    top: 1em;
    }

    .QEEL_titre {
    position: absolute;
    left: 7em;
    top: 3.8em;
    font-family: Arizonia;
    font-size: 40px;
    font-weight: bold;
    color: white;
    }

    .transparent .row1 {
    background-color: transparent;
    }

    .gensmall {
    font-size: 12px;
    }

    /*onglets statistiques*/
    .onglet {
    width: 100px;
    height: 30px;
    padding: 5px;
    }

    .onglet_0 {
    color: silver;
    }

    .onglet_1 {
    color: white;
    }

    #onglet_un {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    transform: rotate(-45deg);
    position: absolute;
    top: 30px;
    }

    #onglet_deux {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    transform: rotate(45deg);
    position: absolute;
    top: 30px;
    left: 170px;
    }

    #onglet_trois {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    top: 195px;
    left: 80px;
    }

    .contenu_onglet {
    color: black;
    position: relative;
    width: 380px;
    height: 80px;
    padding: 10px;
    left: 380px;
    top: 3em;
    display: none;
    overflow: auto;
    z-index: 20;
    background: #303030;
    }

    #contenu_onglet_un {
    font-size: 12px;
    text-align: justify;
    }

    #contenu_onglet_deux{
    font-size: 12px;
    text-align: justify;
    }

    #contenu_onglet_trois {
    font-size: 12px;
    text-align: justify;
    }
    /*fin onglets statistiques*/

    /*onglets groupes*/
    .QEEL_groupe1 {
    position: relative;
    height: 80px;
    width: 150px;
    opacity: 0.3;
    display: inline-block;
    top: 130px;
    left: 4em;
    margin-right: 3px;
    }

    .QEEL_groupe1:hover {
    opacity: 1;
    }

    .QEEL_groupe1 .infobulle1 {
    position: absolute;
    left: -2.5em;
    width: 840px;
    height: 90px;
    padding: 5px;
    color: white;
    background: #303030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    top: 84px;
    }

    .QEEL_groupe1:hover .infobulle1 {
    opacity: 1;
    visibility: visible;
    z-index: 100;
    transition: all 0.5s;
    }

    .QEEL_groupe2 {
    position: relative;
    height: 80px;
    width: 150px;
    opacity: 0.3;
    display: inline-block;
    top: 238px;
    left: 4em;
    margin-right: 3px;
    }

    .QEEL_groupe2:hover {
    opacity: 1;
    }

    .QEEL_groupe2 .infobulle2 {
    position: absolute;
    left: -2.5em;
    width: 840px;
    height: 90px;
    padding: 5px;
    color: white;
    background: #303030;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    top: -104px;
    }

    .QEEL_groupe2:hover .infobulle2 {
    opacity: 1;
    visibility: visible;
    z-index: 100;
    transition: all 0.5s;
    }
    /*fin onglets groupes*/

    /************Fin QEEL************/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    S'il y a des problèmes avec ce code, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

    avatar
    Adibou
    FémininAge : 21Messages : 14

    le Mar 9 Fév 2016 - 19:10

    Merci Very Happy
    avatar
    Liberty Grim
    FémininAge : 20Messages : 128

    le Sam 13 Fév 2016 - 20:19

    Merci, c'est très sympa ^^
    avatar
    Arisu
    FémininAge : 29Messages : 109

    le Mer 24 Fév 2016 - 21:19

    Merci !
    avatar
    Ariemm
    FémininAge : 17Messages : 107

    le Ven 26 Fév 2016 - 16:52

    merci, mercii ^^
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Ven 25 Mar 2016 - 19:10

    Merci
    Darouine Lius
    MasculinAge : 28Messages : 65

    le Jeu 3 Nov 2016 - 14:30

    merci
    avatar
    Dreamy
    FémininAge : 24Messages : 22

    le Dim 6 Nov 2016 - 18:40

    merci du partage, c'est vraiment original **
    avatar
    Loralei
    FémininAge : 26Messages : 7

    le Dim 4 Juin 2017 - 19:25

    Merci :)
    avatar
    Momiji-chan
    FémininAge : 19Messages : 38

    le Dim 13 Aoû 2017 - 14:09

    Merci :)
    avatar
    Deed01
    MasculinAge : 40Messages : 339

    le Lun 28 Aoû 2017 - 10:20

    merci Very Happy
    avatar
    Littleelda
    FémininAge : 28Messages : 44

    le Ven 8 Sep 2017 - 15:49

    merci



    avatar
    Alborio
    MasculinAge : 19Messages : 33

    le Sam 30 Sep 2017 - 20:58

    Merci
    Contenu sponsorisé


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