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 en 3 colonnes

    Partagez
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le 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

    avatar
    Airore
    FémininAge : 19Messages : 132

    le Dim 9 Aoû 2015 - 10:01

    merci
    avatar
    Shacka
    MasculinAge : 29Messages : 7

    le Sam 26 Sep 2015 - 22:07

    Merci pour le partage
    avatar
    Misery Mind™
    FémininAge : 27Messages : 152

    le Sam 26 Sep 2015 - 22:40

    merci
    avatar
    GaaraXGaara
    MasculinAge : 28Messages : 49

    le 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:
    avatar
    Ciàran
    FémininAge : 27Messages : 187

    le Mar 12 Jan 2016 - 9:10

    merci
    avatar
    Hiruyio Atame
    MasculinAge : 16Messages : 87

    le Sam 23 Jan 2016 - 17:21

    Merci
    avatar
    miriam94
    FémininAge : 24Messages : 167

    le Sam 23 Jan 2016 - 21:12

    Merci Very Happy



    avatar
    mon-etoile
    FémininAge : 29Messages : 140

    le Mer 9 Mar 2016 - 11:25

    Merci beaucoup !
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Ven 25 Mar 2016 - 18:27

    Merci
    avatar
    Mme Layton
    FémininAge : 21Messages : 78

    le Sam 26 Mar 2016 - 14:49

    Superbe ! :)
    avatar
    blomkvist
    FémininAge : 27Messages : 44

    le 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.
    avatar
    blomkvist
    FémininAge : 27Messages : 44

    le 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.
    avatar
    Lunatic Café
    FémininAge : 27Messages : 25

    le Dim 1 Mai 2016 - 0:49

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

    le Lun 2 Mai 2016 - 16:19

    merci
    avatar
    Iyokan
    FémininAge : 18Messages : 15

    le Sam 14 Mai 2016 - 18:55

    Merci!
    avatar
    Koalaz
    MasculinAge : 20Messages : 49

    le Sam 28 Mai 2016 - 0:58

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

    le Mer 1 Juin 2016 - 22:04

    Merci !
    avatar
    Neko Mimi
    FémininAge : 27Messages : 162

    le Jeu 2 Juin 2016 - 15:15

    Parfait ♥♥ merci :hug: :hug:



    avatar
    Sadja
    MasculinAge : 20Messages : 74

    le Jeu 2 Juin 2016 - 16:22

    Merci beaucoup !
    avatar
    yooh
    FémininAge : 26Messages : 142

    le Dim 3 Juil 2016 - 20:47

    merci
    avatar
    Leelo
    FémininAge : 26Messages : 147

    le Lun 18 Juil 2016 - 18:06

    merci beaucoup
    avatar
    petit lu
    FémininAge : 25Messages : 172

    le Ven 12 Aoû 2016 - 9:53

    merci
    avatar
    fedra
    FémininAge : 21Messages : 8

    le Dim 14 Aoû 2016 - 15:06

    Merci A-Lice! :love:
    avatar
    Invité

    le Mer 17 Aoû 2016 - 21:32

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

    le Sam 26 Nov 2016 - 14:09

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 27 Mai 2018 - 15:32