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.


    Catégories avec infobulles

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Mer 5 Fév 2014 - 18:07

    Rappel du premier message :



    Catégories


    Version  phpBB2 ▬ CSS & HTML ▬ Système d'infobulle

    Aperçu ▬ www


    Template index_box
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
       <tr>
          <td valign="bottom">
             <!-- BEGIN switch_user_logged_in -->
             <span class="gensmall">{LAST_VISIT_DATE}<br />
             {CURRENT_TIME}<br />
             </span>
             <!-- END switch_user_logged_in -->
             <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
             <!-- BEGIN switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
             <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
             <!-- END switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
       </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <div class="cate_titre"><div class="titrecategorie">{catrow.tablehead.L_FORUM}</div></div>

    <div class="categorie">

       <!-- END tablehead -->
       <!-- BEGIN cathead -->
      
     <!-- END cathead -->
       <!-- BEGIN forumrow -->
     
    <div class="forum">
      
    <table><tr>
      <td style="vertical-align: middle; padding: 10px;" class="bloccate"><nobr><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        <span style="font-size: 11px;"><span style="COLOR: #fe6d6d; FONT-SIZE: 11px;">✘ {catrow.forumrow.TOPICS}</span> rebondissements dans <span style="COLOR: #fe6d6d; FONT-SIZE: 11px;">{catrow.forumrow.POSTS}</span> aventures.</span><br />
       </nobr> <center><div class="last_mess"><span class="gensmall" id="last">{catrow.forumrow.LAST_POST}</span></div>
    <script type="text/javascript">
    jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');
      </script>
        <p> <r class="hoverme">Hover Me!<span class="gensmall1">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span> </r> </p></center></td>
      <td style="vertical-align: middle;">
      {catrow.forumrow.FORUM_DESC}</td>
      <td><img class="new01" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        </td>
    </tr></table>
        
        </div><br />

       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
      
       <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
      </div><div class="cate_footer"><br /><div class="footer_texte">Nom du forum</div></div>
      
    <!-- END tablefoot --><!-- END catrow -->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Parisienne" />

    CSS
    Code:
       /* --------------------------------- CATEGORIES --------------------------------- */

            .hoverme {
              font-size: 11px;
              font-family: arial;
              color: #FE6D6D;
              text-align: center !important;
              margin-top: 10px;
            }

            r:focus{
            background: #020202;
            z-index: 1;
            }

                r span {
                z-index: 1;
                position: absolute;
                margin-top: -95px;
                margin-left: -135px;
                  color: #F0F0ED;
                width: 180px;
                 height: 55px;
                  overflow: auto;
                  background: #141517;
                padding: 15px;
                border-radius: 3px;
                transform: scale(0) rotate(-12deg);
              -webkit-transform: scale(0) rotate(-12deg);
              -ms-transform: scale(0) rotate(-12deg);
                  transition: all .25s;
                }

                r:hover span, r:focus span {
                z-index: 1;
                transform: scale(1) rotate(0);
              -webkit-transform: scale(1) rotate(0);
              -ms-transform: scale(1) rotate(0);
                }


            /* Catégories */

            .titrecategorie h2 {
              top: 1.5em;
              position: relative;
              font-size: 27px;
            font-family: parisienne;
              color: #FE6D6D !important;
              letter-spacing: 1px !important;
              z-index: 1;
            }

            .cate_titre {
              text-align: center;
              margin: auto;
              background-color: #1B1B1F;
              width: 750px;
              height: 210px;
              border-radius: 130% 130% 0% 0%;
            }

            .cate_footer {
              text-align: center;
              margin: auto;
              z-index: 1;
              position: relative;
              margin-top: -100px;
              background-color: #1B1B1F;
              width: 750px;
              height: 210px;
              border-radius: 0% 0% 130% 130%;
            }

            .footer_texte {
              top: 5.5em;
              position: relative;
              font-size: 20px;
            font-family: parisienne;
              color: #FE6D6D !important;
              letter-spacing: 1px !important;
            }

            .categorie {
              width: 750px;
              margin: auto;
              background-color: #1B1B1F !important;
              margin-top: -100px;
            }

            /* New */
            .new01 {
              transform: rotate(5deg);
            }

            /* Forum */

            .forum {
              width: 700px;
              height: 120px;
              margin-left: auto;
              margin-right: auto;
              margin-top: 5px;
              margin-bottom: 5px;
              background: #141517;
              position: relative;
              padding: 2px;
              z-index: 2;
            }

            a.forumlink {
              position: relative;
              display: block;
              width: 100%;
              color: #F0F0ED !important;
              text-align: left;
              font-family: parisienne;
              font-size: 22px;
              font-weight: bold;
              letter-spacing: 1px;
              transform: all;
              -moz-transform: all;
              -o-transform: all;
              -htm-transform: all;
              -webkit-transform: all;
              transition: 1s;
              -moz-transition: 1s;
              -o-transition: 1s;
              -htm-transition: 1s;
              -webkit-transition: 1s;
            }

            a.forumlink:hover {
              letter-spacing: 2px;
              color: #FE6D6D !important;
              text-decoration: none !important;
              transform: all;
              -moz-transform: all;
              -o-transform: all;
              -htm-transform: all;
              -webkit-transform: all;
              transition: 1s;
              -moz-transition: 1s;
              -o-transition: 1s;
              -htm-transition: 1s;
              -webkit-transition: 1s;
            }

            /* Description */
            .description {
              width: 280px;
              height: 80px;
              overflow: auto;
              background-color: #141517;
            text-align: justify;
              font-family: arial;
              font-size: 11px;
            }

            /* Bloc derniers messages */

            .bloccate {
              width: 180px;
            }

            .stats_last
            {
              display: block;
              width: 160px;
              height: 75px;
              margin-left: -200px;
              margin-top: 30px;
              background: #E3A6A6;
              padding: 10px;
              border: 1px solid #2E2E2E;
              box-shadow: 2px 2px 10px #2E2E2E;
            -moz-box-shadow: 2px 2px 10px #2E2E2E;
              -webkit-box-shadow: 2px 2px 10px #2E2E2E;
            }

            .stats {
              display: block;
              text-align: center;
              font-size: 10px;
              color: #7E2727;
              border-bottom: 1px solid #7E2727;
              padding-bottom: 4px;
              margin-bottom: 4px;
            }

            .last_mess {
              display: block;
              text-align: center;
              font-size: 11px;
              color: #F0F0ED;
            }

            .last_mess a{
              text-align: center;
              font-size: 11px;
              color: #F0F0ED;
            }

            /* Sous-forum */


            /*--------------------------------- FIN CATEGORIES --------------------------------- */

    Et à ajouter dans la description de vos forum
    Code:
    <table>
     
    <tbody>
     <tr>
     
    <td>
     <img class="image1" src="http://i56.servimg.com/u/f56/18/71/36/65/lar1ge10.jpg" />
    </td>
     
    <td>
     
    <div class="description">
     Amnis in superato pedes celsi regnis Pompeius pedes Orontes Gnaeus Cassii Parthenium in Romanae Parthenium regnis illius autem dicioni provincias abstractas Pompeius Cassii abstractas Pompeius Cassii pedes illius quas Tigrane Pompeius amnis regnis montis quas illius autem dicioni celsi Parthenium praetermeans Armeniorum ambiens regnis montis dicioni pedes Pompeius celsi funditur imosque montis dicioni funditur autem montis praetermeans ambiens provincias regnis montis illius montis pedes pedes in montis dicioni funditur illius provincias imosque Gnaeus montis dicioni illius provincias imosque abstractas Romanae montis illius celsi autem regnis Gnaeus Parthenium amnis quas illius superato Parthenium praetermeans celsi abstractas superato Gnaeus quas funditur Tigrane.
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
    </table>

    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Halloween le Sam 2 Aoû 2014 - 22:09, édité 3 fois




    < / Libre service codage >
    PINK-APPLE
    FémininAge : 24Messages : 11

    le Ven 21 Mar 2014 - 6:45

    Merciiii
    avatar
    Invité

    le Ven 21 Mar 2014 - 8:28

    Très joli code, merci du partage !
    avatar
    Allison01
    FémininAge : 34Messages : 199

    le Ven 21 Mar 2014 - 10:15

    Merci superbe ^^
    avatar
    tenderness
    FémininAge : 24Messages : 54

    le Ven 21 Mar 2014 - 12:49

    Merci !
    Løve
    MasculinAge : 23Messages : 189

    le Ven 21 Mar 2014 - 17:35

    C'est super beau!
    avatar
    Insane paper-plane
    FémininAge : 21Messages : 139

    le Ven 21 Mar 2014 - 22:07

    joli ! merci !
    avatar
    Sorako
    FémininAge : 20Messages : 94

    le Sam 22 Mar 2014 - 16:20

    Superbe, merci du partage !
    avatar
    Lilie
    FémininAge : 35Messages : 162

    le Sam 22 Mar 2014 - 19:11

    J'adore !!! Merci beaucoup
    avatar
    Chione
    MasculinAge : 17Messages : 397

    le Sam 22 Mar 2014 - 19:38

    It's sow magnifucal !




    FEZ!FEZ!
    avatar
    Gokuhan
    MasculinAge : 22Messages : 59

    le Sam 22 Mar 2014 - 20:33

    Merci du partage





    Je te bat comme je veux en duel...
    avatar
    Raween
    FémininAge : 26Messages : 112

    le Dim 23 Mar 2014 - 2:35

    Merci ^^
    avatar
    Maiie
    FémininAge : 28Messages : 55

    le Dim 23 Mar 2014 - 3:54

    Merci beaucoup ! Magnifique !
    avatar
    Ibtissem.
    FémininAge : 21Messages : 22

    le Dim 23 Mar 2014 - 13:39

    Super merci !
    avatar
    EnjoyPhoenix
    FémininAge : 21Messages : 22

    le Dim 23 Mar 2014 - 14:18

    superbe !
    avatar
    Irony
    FémininAge : 20Messages : 102

    le Dim 23 Mar 2014 - 16:39

    Merci beaucoup. ♥
    avatar
    Ema Skye
    FémininAge : 20Messages : 134

    le Dim 23 Mar 2014 - 19:42

    Mercii ! :3
    avatar
    Pooni
    FémininAge : 20Messages : 39

    le Dim 23 Mar 2014 - 20:54

    Le rendu est super chouette !
    Merci x3
    avatar
    Lovehurt
    FémininAge : 21Messages : 36

    le Lun 24 Mar 2014 - 14:40

    Juste perfect
    avatar
    Tity
    FémininAge : 26Messages : 114

    le Lun 24 Mar 2014 - 16:03

    Merci, j'ai plus qu'a tester Very Happy
    avatar
    Narcisse
    FémininAge : 103Messages : 21

    le Lun 24 Mar 2014 - 21:32

    Merci du partage.  :hug: 
    avatar
    SpicAsh
    FémininAge : 21Messages : 170

    le Mar 25 Mar 2014 - 17:00

    Merci !
    avatar
    Shannon{sweetie}
    FémininAge : 22Messages : 22

    le Mar 25 Mar 2014 - 19:01

    Whaaa, c'est magnifique. Depuis le temps que je cherchais quelque chose de ce style.
    Merci beaucoup pour le partage.
    avatar
    M.T
    FémininAge : 28Messages : 53

    le Jeu 27 Mar 2014 - 15:18

    A tester, merci beaucoup ! =)
    avatar
    Mezou
    FémininAge : 19Messages : 56

    le Ven 28 Mar 2014 - 18:20

    C'est magnifique *-*
    avatar
    Flower_*
    FémininAge : 23Messages : 600

    le Ven 28 Mar 2014 - 18:57

    Merci pour ce tuto :)
    Joli boulot Halloween !
    Contenu sponsorisé


      La date/heure actuelle est Mar 17 Juil 2018 - 4:15