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 >
    avatar
    Nyla
    FémininAge : 27Messages : 84

    le Jeu 13 Mar 2014 - 12:09

    merciii, c'est superbe *-* ♥
    avatar
    Depp
    FémininAge : 27Messages : 298

    le Jeu 13 Mar 2014 - 13:43

    Merci beaucoup pour le partage Very Happy



    avatar
    Anastasiaa
    FémininAge : 21Messages : 41

    le Jeu 13 Mar 2014 - 16:30

    Wow, elles sont magnifiques OwO

    Merci. ♥



    avatar
    Milka
    FémininAge : 30Messages : 112

    le Sam 15 Mar 2014 - 10:06

    C'est vraiment super comme travail
    avatar
    petit lu
    FémininAge : 25Messages : 172

    le Sam 15 Mar 2014 - 14:04

    J'aime beaucoup ce que tu fais
    Merci du partage
    avatar
    Budapest
    FémininAge : 18Messages : 46

    le Sam 15 Mar 2014 - 14:29

    C'est magnifique. Merci. (:



    avatar
    nuanciel
    FémininAge : 26Messages : 139

    le Sam 15 Mar 2014 - 17:43

    Merci pour la partage.
    avatar
    Nearween
    FémininAge : 19Messages : 208

    le Sam 15 Mar 2014 - 18:27

    Magnifique





    Stand by Me
    Hiddle
    FémininAge : 17Messages : 20

    le Sam 15 Mar 2014 - 20:43

    Merci, c'est superbe
    avatar
    Kio
    FémininAge : 20Messages : 22

    le Dim 16 Mar 2014 - 17:25

    Waouh merci!
    avatar
    Amber's
    FémininAge : 18Messages : 158

    le Dim 16 Mar 2014 - 18:10

    Merci ♥
    avatar
    Invité

    le Dim 16 Mar 2014 - 19:16

    Génial, ce que mon forum cherche ! Merci beaucoup Wink
    avatar
    Win
    Age : 26Messages : 114

    le Lun 17 Mar 2014 - 14:49

    Je viens de regarder certains de tes codages, et j'aime beaucoup ce que tu fais!
    Merci pour le partage



    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Lun 17 Mar 2014 - 17:43

    Merci Win, ça fait plaisir =)




    < / Libre service codage >
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Mar 18 Mar 2014 - 12:58

    Superbe,merci
    Njie
    FémininAge : 19Messages : 10

    le Mar 18 Mar 2014 - 15:20

    J'adore, merci du partage <3
    avatar
    boogylou
    FémininAge : 22Messages : 24

    le Mar 18 Mar 2014 - 21:24

    Wooooowwww ** c'est magnifique.
    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 714

    le Mer 19 Mar 2014 - 2:22

    j'aime beaucoup ce que tu fait félicitation^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Neko Mimi
    FémininAge : 27Messages : 162

    le Mer 19 Mar 2014 - 16:20

    Je dis waouh également merciii ♥♥♥



    avatar
    Emma-Iseult
    FémininAge : 21Messages : 44

    le Mer 19 Mar 2014 - 16:31

    Merci c'est hyper beau !
    avatar
    Ice06
    FémininAge : 28Messages : 5

    le Mer 19 Mar 2014 - 16:54

    C'est vraiment magnifique !!
    avatar
    Banpaia
    FémininAge : 21Messages : 130

    le Mer 19 Mar 2014 - 19:18

    Merci !
    avatar
    lala zhang
    FémininAge : 27Messages : 345

    le Jeu 20 Mar 2014 - 13:37

    C'est super jolie
    avatar
    Rising Pheonix
    FémininAge : 34Messages : 23

    le Jeu 20 Mar 2014 - 15:49

    Merci du partage, c'est sublime  Very Happy 
    avatar
    lysou
    FémininAge : 21Messages : 29

    le Jeu 20 Mar 2014 - 16:01

    Sublime merci!!
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Juil 2018 - 2:44