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 :
(CDAV) 50 à 150€ à cagnotter sur ...
Voir le deal

    Qeel en 3 colonnes

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

    Mer 30 Juil 2014 - 17:33

    Rappel du premier message :


    Qeel en 3 colonnes


    Suite à une demande de Airore voici un Qeel en 3 colonnes avec les groupes en infobulles.

    Je précise que l'arrière plan jaune correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www


    Et le code :
    Remplacer cette partie du template index-body :
    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 celle-ci :
    Code:
    <!-- BEGIN disable_viewonline -->
    <div id="qeel_titre">Qui est là ?</div>
    <table id="qeel_position">
      <tr>
        <td class="qeel_colonne1"><div class="qeel_bloc">{TOTAL_POSTS}<br/>{TOTAL_USERS}<br/>{NEWEST_USER}<br/>{RECORD_USERS}
    </div><br/>
    <div class="qeel_bloc">{TOTAL_USERS_ONLINE}<br/>{LOGGED_IN_USER_LIST}
    </div>
    </td>
    <td width="20px;"></td>
    <td class="qeel_centre">
    <div class="qeel_groupe" style="background:#5C1010"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
    <div class="qeel_groupe" style="background:#0F2652"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
    <div class="qeel_groupe" style="background:#739E93"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
    <div class="qeel_groupe" style="background:#23471A"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
    <div class="qeel_groupe" style="background:#876716"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/><a href="http://www.never-utopia.com/" class="ALice">© By A-Lice</a>
    </td>
    <td width="20px;"></td>
        <td class="qeel_colonne2"><table class="transparent">{L_CONNECTED_MEMBERS}</table>
    </td>
      </tr>
    </table>
    <!-- END disable_viewonline -->

    CSS :
    Code:
    .transparent .row1 {
    background-color: transparent;
    }
    .transparent .gensmall {
    font-size:12px;
    }

    #qeel_position {
    position: relative;
    margin:auto;
    }

    #qeel_titre {
    font-size:30px;
    font-weight: bold;
    color:black;
    text-align:center;
    }

    .qeel_colonne1 {
    font-size: 12px;
    text-align: justify;
    width: 255px;
    height: 345px;
    background:#5c7885;
    padding:10px;
    border-top-left-radius:30px;
    border-bottom-left-radius:30px;
    }

    .qeel_centre {
    background:transparent;
    width:130px;
    height:305px;
    padding:20px;
    }

    .qeel_colonne2 {
    width: 255px;
    height: 345px; 
    background:#5c7885;
    padding:10px;
    text-align:center;
    font-size:12px;
    border-top-right-radius:30px;
    border-bottom-right-radius:30px;
    }

    .qeel_bloc {
    width: 235px;
    padding:10px;
    height: 150px;
    background:#d8d2cb;
    border-radius:30px;
    overflow:auto;
    }

    .qeel_groupe {
    position: relative;
    height: 60px;
    width: 60px;
    border-radius:100px;
    overflow: visible;
    margin:auto;
    }

    .qeel_groupe .infobulle {
    position: absolute;
    top: 0px;
    left: 50px;
    width: 150px;
    height: 100px;
    background:#d8d2cb;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    padding:10px;
    border-radius:30px;
    }

    .qeel_groupe:hover .infobulle {
    opacity: 1;
    visibility: visible;
    z-index: 100;
    transition: 0.5s;
    }

    .ALice {
    font-size:12px;
    text-decoration:none;
    display:block;
    text-align:center;
    }

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


    Dernière édition par A-Lice le Lun 16 Fév 2015 - 11:52, édité 1 fois

    Airore
    Airore
    FémininAge : 25Messages : 132

    Dim 9 Aoû 2015 - 10:01

    merci
    Shacka
    Shacka
    MasculinAge : 36Messages : 7

    Sam 26 Sep 2015 - 22:07

    Merci pour le partage
    Misery Mind™
    Misery Mind™
    FémininAge : 33Messages : 153

    Sam 26 Sep 2015 - 22:40

    merci



    GaaraXGaara
    GaaraXGaara
    MasculinAge : 34Messages : 49

    Lun 2 Nov 2015 - 16:44

    Meuuurci.



    Je préfère avoir la maladie de parkinson que la maladie Alzheimer, pourquoi?
    Parce que je préfère renverser une goutte de mon verre que d'oublié de le boire.


    :nawak:
    Ciàran
    Ciàran
    FémininAge : 34Messages : 187

    Mar 12 Jan 2016 - 9:10

    merci
    Hiruyio Atame
    Hiruyio Atame
    MasculinAge : 22Messages : 87

    Sam 23 Jan 2016 - 17:21

    Merci
    miriam94
    miriam94
    FémininAge : 30Messages : 168

    Sam 23 Jan 2016 - 21:12

    Merci Very Happy



    Qeel en 3 colonnes - Page 3 24786310
    mon-etoile
    mon-etoile
    FémininAge : 36Messages : 140

    Mer 9 Mar 2016 - 11:25

    Merci beaucoup !
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 56Messages : 167

    Ven 25 Mar 2016 - 18:27

    Merci
    Mme Layton
    Mme Layton
    FémininAge : 28Messages : 93

    Sam 26 Mar 2016 - 14:49

    Superbe ! :)
    blomkvist
    blomkvist
    FémininAge : 33Messages : 44

    Jeu 31 Mar 2016 - 16:46

    merci pour le partage et les explications cheers :love:



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    blomkvist
    blomkvist
    FémininAge : 33Messages : 44

    Ven 1 Avr 2016 - 19:23

    merci pour le partage :heart:
    Ce qeel est magnifique :han:



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    Lunatic Café
    Lunatic Café
    FémininAge : 33Messages : 27

    Dim 1 Mai 2016 - 0:49

    Sympa! Merci beaucoup pour le partage! :love:
    Kira de Shola
    Kira de Shola
    FémininAge : 27Messages : 60

    Lun 2 Mai 2016 - 16:19

    merci
    Iyokan
    Iyokan
    FémininAge : 24Messages : 15

    Sam 14 Mai 2016 - 18:55

    Merci!
    Koalaz
    Koalaz
    MasculinAge : 27Messages : 50

    Sam 28 Mai 2016 - 0:58

    Merci du partage, très joli o/
    Pooni
    Pooni
    FémininAge : 26Messages : 39

    Mer 1 Juin 2016 - 22:04

    Merci !
    Neko Mimi
    Neko Mimi
    FémininAge : 34Messages : 165

    Jeu 2 Juin 2016 - 15:15

    Parfait ♥♥ merci :hug: :hug:



    Qeel en 3 colonnes - Page 3 Tumblr_me5uxaCZuJ1qj73e2o1_500
    Sadja
    Sadja
    MasculinAge : 26Messages : 79

    Jeu 2 Juin 2016 - 16:22

    Merci beaucoup !
    yooh
    yooh
    FémininAge : 33Messages : 143

    Dim 3 Juil 2016 - 20:47

    merci
    Leelo
    Leelo
    FémininAge : 33Messages : 157

    Lun 18 Juil 2016 - 18:06

    merci beaucoup
    petit lu
    petit lu
    FémininAge : 32Messages : 184

    Ven 12 Aoû 2016 - 9:53

    merci
    fedra
    fedra
    FémininAge : 28Messages : 8

    Dim 14 Aoû 2016 - 15:06

    Merci A-Lice! :love:
    Anonymous
    Invité

    Mer 17 Aoû 2016 - 21:32

    Merci pour ce beau partage !
    Rosalie Hale
    Rosalie Hale
    FémininAge : 31Messages : 185

    Sam 26 Nov 2016 - 14:09

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 16:28