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.


    Qeel en jeu d'onglets

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

    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 ^^

    Adibou
    Adibou
    FémininAge : 26Messages : 14

    Mar 9 Fév 2016 - 19:10

    Merci Very Happy
    Liberty Grim
    Liberty Grim
    FémininAge : 26Messages : 128

    Sam 13 Fév 2016 - 20:19

    Merci, c'est très sympa ^^
    Arisu
    Arisu
    FémininAge : 35Messages : 119

    Mer 24 Fév 2016 - 21:19

    Merci !
    Ari
    Ari
    FémininAge : 22Messages : 109

    Ven 26 Fév 2016 - 16:52

    merci, mercii ^^
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Ven 25 Mar 2016 - 19:10

    Merci
    Darouine Lius
    Darouine Lius
    MasculinAge : 34Messages : 76

    Jeu 3 Nov 2016 - 14:30

    merci
    Dreamy
    Dreamy
    FémininAge : 30Messages : 22

    Dim 6 Nov 2016 - 18:40

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

    Dim 4 Juin 2017 - 19:25

    Merci :)
    Momiji-chan
    Momiji-chan
    FémininAge : 25Messages : 38

    Dim 13 Aoû 2017 - 14:09

    Merci :)
    Deed01
    Deed01
    MasculinAge : 46Messages : 343

    Lun 28 Aoû 2017 - 10:20

    merci Very Happy
    Littleelda
    Littleelda
    FémininAge : 33Messages : 49

    Ven 8 Sep 2017 - 15:49

    merci



    Qeel en jeu d'onglets - Page 2 Elora_10
    Alborio
    Alborio
    MasculinAge : 24Messages : 37

    Sam 30 Sep 2017 - 20:58

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 4:04