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 :
SSD interne Crucial BX500 2,5″ SATA – 500 ...
Voir le deal
29.99 €

    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

    Shuna
    Shuna
    FémininAge : 30Messages : 137

    Mer 19 Nov 2014 - 17:12

    merciiiiiiii **
    Depp
    Depp
    FémininAge : 33Messages : 301

    Jeu 20 Nov 2014 - 17:54

    Merci chef :)



    Qeel en 3 colonnes - Page 2 Tumblr_nenygwIlcz1s4u464o1_500
    Kimberlay *
    Kimberlay *
    FémininAge : 34Messages : 161

    Dim 23 Nov 2014 - 1:07

    Merciii
    Acédie
    Acédie
    FémininAge : 26Messages : 91

    Dim 23 Nov 2014 - 15:41

    Merci !
    Daydream
    Daydream
    FémininAge : 27Messages : 44

    Dim 23 Nov 2014 - 20:16

    Merci !
    Stitch56
    Stitch56
    FémininAge : 31Messages : 209

    Jeu 27 Nov 2014 - 23:17

    Merci
    Clémentine
    Clémentine
    FémininAge : 32Messages : 223

    Dim 30 Nov 2014 - 23:17

    Merci ^^



    Qeel en 3 colonnes - Page 2 9w9t
    avatar
    Catblack
    FémininAge : 28Messages : 85

    Mer 10 Déc 2014 - 21:24

    merci
    Mozart
    Mozart
    FémininAge : 30Messages : 54

    Jeu 1 Jan 2015 - 20:00

    Merci beaucoup pour ce partage ! :)



    Qeel en 3 colonnes - Page 2 Tumblr_mjdkx9iT191r24z09o1_500
    AlexeB
    AlexeB
    FémininAge : 29Messages : 165

    Mar 20 Jan 2015 - 18:52

    J'adore :bril:
    Merci du partage :heart:
    .pinkrocks
    .pinkrocks
    FémininAge : 34Messages : 41

    Mar 20 Jan 2015 - 21:15

    C'est beau! J'aime beaucoup! Merci pour le partage! :hug:
    CiitronxMelon
    CiitronxMelon
    FémininAge : 29Messages : 36

    Mer 21 Jan 2015 - 1:41

    Merci pour le partage :)
    Monaka
    Monaka
    FémininAge : 32Messages : 137

    Mer 28 Jan 2015 - 21:07

    j'aime beaucoup
    Kraken
    Kraken
    FémininAge : 31Messages : 137

    Mar 10 Fév 2015 - 13:39

    MERCI !
    Maag
    Maag
    FémininAge : 25Messages : 31

    Ven 6 Mar 2015 - 19:10

    J'adore ! Merci c:
    Kanra
    Kanra
    FémininAge : 24Messages : 113

    Dim 15 Mar 2015 - 10:30

    Merci !
    Kamesora
    Kamesora
    FémininAge : 32Messages : 93

    Ven 20 Mar 2015 - 21:55

    Merci beaucoup
    Melaly
    Melaly
    FémininAge : 30Messages : 91

    Mar 7 Avr 2015 - 23:09

    Merci du partage :) J'adore tes codes Very Happy
    Célestine
    Célestine
    FémininAge : 26Messages : 51

    Mar 5 Mai 2015 - 5:07

    Merci ! Very Happy
    darkhero246
    darkhero246
    MasculinAge : 32Messages : 179

    Mar 5 Mai 2015 - 20:30

    Merci pour ce tuto Very Happy
    Sky104
    Sky104
    FémininAge : 22Messages : 10

    Ven 29 Mai 2015 - 19:18

    Mercecie :3



    Hellow
    avatar
    Etoile*
    FémininAge : 33Messages : 82

    Ven 29 Mai 2015 - 23:48

    Merci :)
    Honeey L.
    Honeey L.
    FémininAge : 32Messages : 80

    Ven 12 Juin 2015 - 22:13

    Merci pour le partage <3
    Little-myrt
    Little-myrt
    FémininAge : 26Messages : 41

    Sam 8 Aoû 2015 - 1:16

    Merci, c'est cool pour les groupes !
    Anonymous
    Invité

    Sam 8 Aoû 2015 - 11:53

    Merci pour ce partage ! (⌒▽⌒)☆
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 10:00