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.

Le Deal du moment :
Réassort du coffret Pokémon 151 ...
Voir le deal

    QEEL tout simplet et rond

    Eunkyung
    Eunkyung
    FémininAge : 29Messages : 1099

    Jeu 13 Fév 2014 - 18:01

    Ma demande



    Bonjour à vous tous les gens o/ Alors voilà je fais une demande de QEEL car j'ai tenté en vain de le faire moi-même et le rendu est comment dire...affreux ? XD Voici donc ma demande :

    Schéma(s) et Eléments
    Schémas : Voici un schéma fait rapidement
    Tailles des éléments : Mon forum fait déjà 900px de largeur ça je le sais. Donc déjà ça peut aider sinon en hauteur, faut que ça soit raisonnable que ça prend pas une taille énorme XD Disons que 500px ça va ?
    Effets voulus : (si vous désirez des effets particuliers, arrondis, transitions...) Comme expliquer sur le schéma, il faudrait que les descriptions des groupes s'affiche au passage de la souris sur le nom du groupe. Et des scrollbars automatique pour pas que ça fasse un gros pâté de pseudos XD

    Ressources
    L'image de fond : ici

    Autres précisions ?
    Si vous avez besoin de signaler autre chose ou d'indiquer un supplément d'information...


    Dernière édition par Eunkyung le Mer 12 Mar 2014 - 18:09, édité 1 fois



    QEEL tout simplet et rond GWvuU22
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 8 Mar 2014 - 10:30

    Cette demande est-elle toujours d'actualité ?
    • Revenir en haut
    Eunkyung
    Eunkyung
    FémininAge : 29Messages : 1099

    Sam 8 Mar 2014 - 12:47

    Oui toujours ! Désolé de pas avoir upper ^^"



    QEEL tout simplet et rond GWvuU22
    • Revenir en haut
    Anonymous
    Invité

    Mar 11 Mar 2014 - 18:47

    Plop,

    Je prends !

    EDIT : Mon résultat www.
    • Revenir en haut
    Eunkyung
    Eunkyung
    FémininAge : 29Messages : 1099

    Mar 11 Mar 2014 - 23:31

    Hanw mais c'est parfait ! ** ♥ Merci Halloween ! Very Happy



    QEEL tout simplet et rond GWvuU22
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Mar 2014 - 13:02

    Nickel =)
    Voici les codes alors Wink

    CSS
    Code:
    /***************************** MISE EN FORME QEEL *****************************/
    .groupeonglet {
      display: inline-block;
    }

    .groupeonglet_0 {
      font-size: 12px;
      text-align: center;
      font-family: 'Carrois Gothic SC', sans-serif;
    }
           
    .groupeonglet_1 {
      color: #57949A;
      font-size: 12px;
      text-align: center;
      font-family: 'Carrois Gothic SC', sans-serif;
    }

    .contenu_groupeonglet {
      display: none;
      background-color: #212121;
      width: 250px;
      height: 100px;
      border-radius: 25px 25px 25px 25px;
      border: 4px solid #57949A;
      padding: 15px;
      text-align: center;
      font-size: 11px;
    }

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

    .les24h {
      background-color: #212121;
      width: 250px;
      height: 100px;
      overflow: auto;
      border-radius: 25px 25px 25px 25px;
      border: 4px solid #57949A;
      padding: 15px;
    }

    /***************************** MISE EN FORME QEEL *****************************/

    Et dans le template index_body, repères ceci :
    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 -->

    Que tu remplaces par
    Code:
    <!-- BEGIN disable_viewonline -->
    <center>     <div style="background-image: url('http://i.imgur.com/X89BfoD.jpg'); height: 300px; width: 800px; border-radius: 25px 25px 25px 25px; border: 4px solid #57949A; padding: 20px;"><center><span class="gensmall">{TOTAL_POSTS}.
          {TOTAL_USERS}.<br />
                      {NEWEST_USER}.<br /><br /><div style="width: 400px; height: 150px; overflow: auto; text-align: justify !important;">{LOGGED_IN_USER_LIST}</div></span></center>
      <center><table style="position: relative; top: -5em;" class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> 
      <tr><td>
        <div style="background-color: #212121; width: 150px; height: 100px; overflow: auto; border-radius: 25px 25px 25px 25px; border: 4px solid #57949A; padding: 15px; text-align: center; font-size: 11px;"><div class="groupeonglets"><div class="fondgroupe">
                <center><span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe1" onmouseover="javascript:change_groupeonglet('groupe1');">Groupe 1</span><br />
                  <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe2" onmouseover="javascript:change_groupeonglet('groupe2');">Groupe 2</span><br />
                  <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe3" onmouseover="javascript:change_groupeonglet('groupe3');">Groupe 3</span><br />
                  <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe4" onmouseover="javascript:change_groupeonglet('groupe4');">Groupe 4</span><br />
                  <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe5" onmouseover="javascript:change_groupeonglet('groupe5');">Groupe 5</span><br />
                  </center></div>

        </div></div><script type="text/javascript">
                //<!--
                        function change_groupeonglet(name)
                        {
                                document.getElementById('groupeonglet_'+anc_groupeonglet).className = 'groupeonglet_0 groupeonglet';
                                document.getElementById('groupeonglet_'+name).className = 'groupeonglet_1 groupeonglet';
                                document.getElementById('contenu_groupeonglet_'+anc_groupeonglet).style.display = 'none';
                                document.getElementById('contenu_groupeonglet_'+name).style.display = 'block';
                                anc_groupeonglet = name;
                        }
                //-->
                </script><script type="text/javascript">
                //<!--
                        var anc_groupeonglet = 'groupe1';
                        change_groupeonglet(anc_groupeonglet);
                //-->
                </script></td><td>
                <div class="contenu_groupeonglets">
                 
                  <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe1"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">1 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>
                 
    <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe2"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">2 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>
                 
    <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe3"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">3 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>
     
    <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe4"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">4 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>

    <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe5"><div style="width: 250px; height: 90px; overflow: auto; text-align: justify;">5 Meminit quorum intendebantur haec perfusus adventu et sunt atque exilium absolutum in actique quorum in Paulus sunt catenis quisquam atque squalorem et maestitiam eculei quorum ubi sunt nec sub sunt adventu adventu eculei maestitiam cruore non cruore quorum et nullos tormenta maestitiam sceleste sub nullos is carnifex principis maestitiam exilium multos sceleste et susurro ita carnifex gladii sceleste deiectos tenus ad paene ubi intendebantur quorum coopertos ad atque carnifex multos Constantio non sceleste tenus uncosque movebantur castra plures alii perfusus et movebantur haec plures sceleste multos Paulus intendebantur parabat patratis eculei movebantur enim gladii enim squalorem non tenus sunt facile.</div></div>
                 


                </div>
        <script type="text/javascript">
                //<!--
                        function change_groupeonglet(name)
                        {
                                document.getElementById('groupeonglet_'+anc_groupeonglet).className = 'groupeonglet_0 groupeonglet';
                                document.getElementById('groupeonglet_'+name).className = 'groupeonglet_1 groupeonglet';
                                document.getElementById('contenu_groupeonglet_'+anc_groupeonglet).style.display = 'none';
                                document.getElementById('contenu_groupeonglet_'+name).style.display = 'block';
                                anc_groupeonglet = name;
                        }
                //-->
                </script><script type="text/javascript">
                //<!--
                        var anc_groupeonglet = 'groupe1';
                        change_groupeonglet(anc_groupeonglet);
                //-->
                </script></td>
           
        <td><div class="les24h"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>
        </td></tr>
        </table></center></div></center><link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'>
    <!-- END disable_viewonline -->
    • Revenir en haut
    Eunkyung
    Eunkyung
    FémininAge : 29Messages : 1099

    Mer 12 Mar 2014 - 13:31

    Merci beaucoup pour ton travail ! ♥ :)



    QEEL tout simplet et rond GWvuU22
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Mar 2014 - 13:33

    Avec grand plaisir Wink
    Penses à éditer ton premier message pour y apposer le logo "terminé" =3
    Bonne continuation.
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Dim 28 Avr 2024 - 4:50