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
    summerby
    FémininAge : 24Messages : 36

    le Ven 1 Mai 2015 - 16:00

    très beau (a)
    avatar
    Náriël
    FémininAge : 39Messages : 22

    le Sam 2 Mai 2015 - 14:02

    Merci pour le code :)
    avatar
    Asuka
    FémininAge : 24Messages : 105

    le Sam 16 Mai 2015 - 21:00

    Merci ♥



    avatar
    Emma-Iseult
    FémininAge : 21Messages : 44

    le Lun 18 Mai 2015 - 17:07

    Wow ! Merci !
    avatar
    Ekinox
    FémininAge : 23Messages : 15

    le Mar 19 Mai 2015 - 3:41

    Magnifique! *-*
    Little--Angel
    FémininAge : 22Messages : 46

    le Mar 19 Mai 2015 - 16:22

    Merci <3
    avatar
    Amasis
    FémininAge : 45Messages : 307

    le Mar 19 Mai 2015 - 21:33

    Il est très joli ce QEEL. Merci beaucoup!
    avatar
    Kimirsu Anko
    MasculinAge : 17Messages : 88

    le Sam 23 Mai 2015 - 16:14

    Merci beaucoup :3
    avatar
    Natsuhi
    FémininAge : 21Messages : 35

    le Lun 25 Mai 2015 - 16:38

    Thanks pour le partage !
    avatar
    Kokoro Korou
    MasculinAge : 22Messages : 70

    le Lun 25 Mai 2015 - 19:18

    Merci !
    avatar
    SunshineD
    FémininAge : 28Messages : 113

    le Mer 27 Mai 2015 - 6:39

    Aussi superbe que la PA! :)
    avatar
    MLD
    FémininAge : 25Messages : 86

    le Ven 29 Mai 2015 - 8:05

    Merci du partage !
    avatar
    Ronron
    FémininAge : 22Messages : 68

    le Ven 29 Mai 2015 - 21:22

    Merci !
    avatar
    Izaya Orihara
    FémininAge : 16Messages : 105

    le Dim 7 Juin 2015 - 21:34

    Merci du partage !
    avatar
    Damned
    FémininAge : 16Messages : 109

    le Ven 12 Juin 2015 - 17:27

    Merci
    avatar
    Callisto
    FémininAge : 21Messages : 44

    le Jeu 18 Juin 2015 - 12:55

    merci beaucoup !
    avatar
    LyN[ss]
    FémininAge : 26Messages : 105

    le Mar 23 Juin 2015 - 16:29

    Sublime ce QEEL, merci beaucoup pour le partage <3
    avatar
    Aurifereis
    MasculinAge : 25Messages : 39

    le Mer 1 Juil 2015 - 14:46

    Merci du partage :)
    avatar
    Kaamee
    FémininAge : 22Messages : 110

    le Jeu 2 Juil 2015 - 18:52

    Merci ♥



    avatar
    Zibeline
    FémininAge : 32Messages : 83

    le Ven 10 Juil 2015 - 5:15

    Merci beaucoup :love:
    avatar
    Dayaxa
    FémininAge : 24Messages : 60

    le Mar 21 Juil 2015 - 22:42

    Merci beaucoup, c'est super !



    Bloup.
    avatar
    Nighthayah
    FémininAge : 30Messages : 69

    le Ven 31 Juil 2015 - 18:42

    ho mon dieu j'adore mille merci
    avatar
    poloch
    MasculinAge : 24Messages : 109

    le Sam 1 Aoû 2015 - 23:11

    Merciiiii Very Happy



    avatar
    Chae Lee
    FémininAge : 21Messages : 116

    le Lun 10 Aoû 2015 - 13:30

    Merci beaucoup ! *.*
    En ligne
    avatar
    Kelalin
    FémininAge : 25Messages : 1871

    le Lun 10 Aoû 2015 - 18:34

    Merci ! (*≧▽≦)
    Contenu sponsorisé


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