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
    Ungoliant.
    FémininAge : 19Messages : 22

    le Mar 19 Aoû 2014 - 22:30

    Très beau, merci du partage !
    avatar
    LickingBoot
    FémininAge : 19Messages : 503

    le Mar 19 Aoû 2014 - 23:48

    merci !!!



    avatar
    Nord
    MasculinAge : 18Messages : 169

    le Sam 23 Aoû 2014 - 19:02

    C'est M.A.G.N.I.F.I.Q.U.E ! Merci pour le partage.
    avatar
    Lilie
    FémininAge : 34Messages : 162

    le Dim 24 Aoû 2014 - 16:52

    C'est sublime ! Merci.
    avatar
    demdre
    FémininAge : 23Messages : 24

    le Jeu 28 Aoû 2014 - 13:48

    magnifique! :)
    avatar
    plushmasters
    FémininAge : 25Messages : 70

    le Mer 3 Sep 2014 - 21:24

    sublime :o
    avatar
    Kathee
    FémininAge : 24Messages : 667

    le Jeu 4 Sep 2014 - 15:00

    J'aime beaucoup, merci du partage Hal' !



    • Nous serions ravis de vous accueillir •


    • Venez donc voir ce petit petit fofo •
    avatar
    Nemesyss
    FémininAge : 27Messages : 30

    le Ven 5 Sep 2014 - 8:15

    Merci Very Happy
    avatar
    Meuh Pffeuh
    FémininAge : 18Messages : 37

    le Sam 6 Sep 2014 - 11:51

    merci !
    avatar
    Euterpe
    FémininAge : 31Messages : 301

    le Dim 7 Sep 2014 - 14:19

    Sublime!!
    avatar
    lilissa
    FémininAge : 24Messages : 30

    le Dim 7 Sep 2014 - 18:09

    merci du partage ♥ je vais l'essayer sur mon forum ♥
    avatar
    Pastiche
    FémininAge : 23Messages : 78

    le Lun 8 Sep 2014 - 11:49

    C'est beau ♥ merci du partage.
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Lun 8 Sep 2014 - 18:32

    Tout simplement magnifique !
    avatar
    Depp
    FémininAge : 27Messages : 298

    le Mar 9 Sep 2014 - 14:55

    Merci beaucoup :)



    avatar
    Dixy
    FémininAge : 24Messages : 228

    le Jeu 11 Sep 2014 - 21:24

    Très jolie code bravo ! Et merci !



    avatar
    Mushou
    FémininAge : 24Messages : 6

    le Sam 13 Sep 2014 - 22:27

    C'est vraiment magnifique ! *-*
    Shauna G. Sakihata
    FémininAge : 24Messages : 12

    le Lun 15 Sep 2014 - 14:56

    merci
    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 150

    le Mer 17 Sep 2014 - 15:07

    Il est vraiment magnifique !
    avatar
    Elf-of-Nature
    FémininAge : 23Messages : 152

    le Mer 17 Sep 2014 - 19:09

    Merci :-D



    avatar
    louha
    FémininAge : 30Messages : 213

    le Jeu 18 Sep 2014 - 2:16

    MErci tout plein Halloween c'est superbe !
    avatar
    Kiowa
    FémininAge : 29Messages : 217

    le Jeu 18 Sep 2014 - 21:41

    Magnifique ! Merci pour ce beau partage.
    avatar
    Castielle
    FémininAge : 22Messages : 33

    le Sam 20 Sep 2014 - 21:19

    Merci ♥
    avatar
    Solitude
    FémininAge : 42Messages : 285

    le Dim 21 Sep 2014 - 14:16

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    liliebia
    FémininAge : 30Messages : 67

    le Lun 22 Sep 2014 - 22:14

    Merci ♥
    avatar
    LHOOQ
    MasculinAge : 25Messages : 20

    le Mar 23 Sep 2014 - 23:52

    Merci :)
    Contenu sponsorisé


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