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 Littéraire (positionnement manuel)

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9751

    le Sam 19 Juil 2014 - 14:12

    Rappel du premier message :

    Plop,

    Un nouveau LS basé sur une demande de Percylove.

    Comme toujours, un merci donne accès aux codes, ça fait toujours plaisir et ça prend pas 20 minutes de vos vies =3

    /!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



    Qui est en ligne ?


    HTML & CSS ▬ Les éléments sont dans des divisions placées manuellement ▬ La PA est ici.
    Aperçu ▬ www



    CSS
    Code:
        /* -------------------------------- QEEL -------------------------------- */

        /* Positionnement du bloc des statistiques */
        .stats_qeel {
          position: absolute;
          top: 13em;
          left: 3em;
          width: 180px;
          height: 180px;
          overflow: auto;
          font-family: times new roman;
          font-size: 11px;
          text-align: justify;
        }

        /* Positionnement du bloc des plumes passagères */
        .plumes_passagères {
          position: absolute;
          top: 8.5em;
          left: 30em;
          width: 280px;
          height: 50px;
          overflow: auto;
          font-family: times new roman;
          font-size: 11px;
          text-align: justify;
        }

        /* Transparence des anniversaires et des dernières 24h */
        #kaboum .row1 {
          background-color : transparent;
        }

        /* Positionnement du bloc des plumes fêtées */
        .plumes_fetees {
          position: absolute;
          top: 8em;
          left: 56em;
          width: 170px;
          height: 80px;
          overflow: auto;
          font-family: times new roman;
          font-size: 11px;
          text-align: justify;
        }

        /* Positionnement du bloc des crédits */
        .crédits_qeel {
          position: absolute;
          top: 37em;
          left: 4em;
          width: 230px;
          height: 35px;
          overflow: auto;
          font-family: times new roman;
          font-size: 11px;
          text-align: justify;
        }

        /* Mise en forme des liens des crédits */
        .crédits_qeel a {
          color: #20040D !important;
          font-size: 11px !important;
          text-transform: uppercase !important;
          letter-spacing: 1px;
          text-decoration: none !important;
        }

        /* Mise en forme des liens des crédits au survol */
        .crédits_qeel a:hover {
          color: #856570 !important;
          text-decoration: none !important;
        }

        /* Positionnement du bloc des plumes présentes */
        .plumes_presentes {
          position: absolute;
          top: 20em;
          left: 27em;
          width: 270px;
          height: 143px;
          overflow: auto;
          font-family: times new roman;
          font-size: 11px;
          text-align: justify;
          transform: rotate(-5deg);
        }

        /* Mise en forme des liens des plumes présentes */
        .plumes_presentes a {
          text-decoration: none !important;
        }

        /* Positionnement du bloc des groupes */
        .groupes_qeel {
          position: absolute;
          top: 25em;
          left: 59.5em;
          width: 100px;
          font-family: times new roman;
          font-size: 11px;
          text-align: center;
        }

        /* Mise en forme des liens des groupes */
        .groupes_qeel a{
          text-transform: uppercase !important;
          letter-spacing: 3px;
          text-decoration: none !important;
        }

        /* -------------------------------- FIN QEEL -------------------------------- */


    Dans le template index_body, remplacer 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 -->

    Par cela :
    Code:
        <!-- BEGIN disable_viewonline --><div style="position: relative; background-image: url('http://nsa34.casimages.com/img/2014/07/15/140715095157647502.png'); width: 810px; height: 460px;">
        <div class="stats_qeel">{TOTAL_POSTS}. {TOTAL_USERS}. {NEWEST_USER}. <br /><br />
        {TOTAL_USERS_ONLINE}</div>

        <div class="plumes_passagères"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>
        <div class="plumes_fetees"><table id="kaboum">{L_WHOSBIRTHDAY_TODAY}
          {L_WHOSBIRTHDAY_WEEK}</table></div>

        <div class="crédits_qeel">PA et QEEL par Halloween sur <a href="http://www.never-utopia.com">Never Utopia</a>. Forte inter in huic artes alia facultas quis neque ad artes huic quaedam commune quidem cognatione facultas cognatione a se facultas quadam aut quae cognatione fuimus cognatione habent penitus ad penitus quae artes commune in dicendi quis uni ratio dicendi hoc hoc quasi nos quadam ratio ratio quaedam ingeni ne quod dediti dicendi dediti ingeni sit hoc quaedam ita commune se omnes studio Etenim huic habent quis studio ingeni disciplina quadam penitus uni commune nobis nos quaedam nos artes studio quadam et miretur ingeni nos quidem dediti ad quae quae penitus artes ratio dici neque quadam quadam dicendi nos hoc.</div>

        <div class="plumes_presentes">{LOGGED_IN_USER_LIST}</div>

        <div class="groupes_qeel"><a href="http://plume-artistique.forumactif.org/f26-plume-de-rossignol" style="color: #D80543!important;">Rossignol</a><br /><br />
        <a href="http://plume-artistique.forumactif.org/f21-plume-de-becasseau" style="color: #8A6D4B!important;">Bécasseau</a><br /><br />
        <a href="http://plume-artistique.forumactif.org/f22-plume-d-oie" style="color: #EA792A!important;">Oie</a><br /><br />
        <a href="http://plume-artistique.forumactif.org/f23-plume-d-hirondelle" style="color: #8373AB!important;">Hirondelle</a><br /><br />
        <a href="http://plume-artistique.forumactif.org/f24-plume-de-chevalier" style="color: #5B181A!important;">Chevalier</a><br /><br />
          <a href="http://plume-artistique.forumactif.org/f25-plume-d-hibou" style="color: #2C0F96!important;">Hibou</a></div></div>
        <!-- END disable_viewonline -->

    Pensez à activer l'affichage des membres connectés ces 24h dernières heures pour qu'il apparaisse (affichage → généralités).






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




    < / Libre service codage >
    avatar
    The_Psychocat
    MasculinAge : 23Messages : 37

    le Mer 8 Oct 2014 - 13:34

    Merci pour ce joli code ! o/
    avatar
    misssrubi
    FémininAge : 26Messages : 66

    le Ven 10 Oct 2014 - 17:15

    C'est juste magnifique



    avatar
    Freya Lazare
    FémininAge : 30Messages : 112

    le Ven 10 Oct 2014 - 22:14

    Merci ^^
    avatar
    Ailou ~3
    FémininAge : 18Messages : 61

    le Sam 11 Oct 2014 - 14:23

    Merci du partage **
    Catblack
    FémininAge : 22Messages : 85

    le Dim 12 Oct 2014 - 16:25

    Trop jolie, j'adore, merci merci !!!
    avatar
    Angy38
    FémininAge : 48Messages : 212

    le Dim 12 Oct 2014 - 19:53

    Merci



    avatar
    Light Anonymous
    FémininAge : 22Messages : 57

    le Mar 14 Oct 2014 - 21:38

    Merciiiiiiiiiiiiiiii
    avatar
    C. Hook
    FémininAge : 20Messages : 45

    le Ven 17 Oct 2014 - 17:45

    merci **
    avatar
    Nevr0z
    FémininAge : 29Messages : 74

    le Lun 20 Oct 2014 - 15:01

    Merci :)
    avatar
    Leelo
    FémininAge : 26Messages : 147

    le Lun 20 Oct 2014 - 15:54

    merci c'est un vrai bohneur pour les yeux
    avatar
    Nasu
    FémininAge : 21Messages : 70

    le Mer 22 Oct 2014 - 22:01

    J'adore !
    avatar
    ladybr
    FémininAge : 28Messages : 45

    le Dim 26 Oct 2014 - 18:48

    merci bcp
    avatar
    Sorako
    FémininAge : 20Messages : 94

    le Mer 29 Oct 2014 - 19:44

    Merci ♥
    avatar
    benficagirl
    FémininAge : 32Messages : 373

    le Lun 3 Nov 2014 - 21:02

    Merci beaucoup :)
    avatar
    Celska
    FémininAge : 23Messages : 37

    le Mar 4 Nov 2014 - 18:59

    Encore une fois, merci à toi pour ce super tuto ! **



    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    avatar
    Harleen Quinzel
    FémininAge : 22Messages : 65

    le Sam 8 Nov 2014 - 13:33

    Merci !
    avatar
    SamyChou
    FémininAge : 21Messages : 31

    le Dim 9 Nov 2014 - 17:58

      J'étais déjà fan de la PA, mais maintenant je suis amoureuse du QEEL ! Merci du partage !
    avatar
    Thelma
    FémininAge : 27Messages : 32

    le Mer 12 Nov 2014 - 22:32

    Merci beaucoup. (a)
    avatar
    BluesRose's
    MasculinAge : 23Messages : 37

    le Ven 14 Nov 2014 - 19:55

    Thanks pour le partage !



    avatar
    picka234
    Age : 53Messages : 440

    le Sam 15 Nov 2014 - 14:58

    merci



    avatar
    Potatoes
    FémininAge : 16Messages : 11

    le Dim 16 Nov 2014 - 14:49

    Merci!



    En ligne
    avatar
    EverLiam
    FémininAge : 29Messages : 982

    le Lun 17 Nov 2014 - 12:54

    magnifique





    avatar
    Ysamar
    FémininAge : 38Messages : 37

    le Mer 19 Nov 2014 - 20:13

    merci!!
    avatar
    Sensatiion
    FémininAge : 26Messages : 15

    le Jeu 20 Nov 2014 - 22:03

    Joli code :)
    avatar
    Jay-89
    FémininAge : 29Messages : 86

    le Mar 25 Nov 2014 - 23:10

    Merci =)
    Contenu sponsorisé


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