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 : 9754

    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
    Gabriiielle
    FémininAge : 27Messages : 53

    le Sam 29 Mar 2014 - 15:07

    merci beaucoup !
    encore une fois je suis séduite de ton talent
    Japan S
    MasculinAge : 28Messages : 106

    le Sam 29 Mar 2014 - 16:47

    Merci ! :)



    Arrow
    avatar
    Féhéla
    FémininAge : 45Messages : 238

    le Dim 30 Mar 2014 - 4:31

    ohhhh génial Very Happy
    avatar
    Piratress
    FémininAge : 21Messages : 215

    le Lun 31 Mar 2014 - 15:32

    Tout juste magnifique ! J'adore <3
    avatar
    Rhythm Star
    FémininAge : 17Messages : 52

    le Lun 31 Mar 2014 - 20:09

    Merci infiniment du partage ♥



    avatar
    Fallaha
    FémininMessages : 80

    le Lun 31 Mar 2014 - 21:18

    Merci !!! :)
    avatar
    Shanyme Thibolt
    FémininAge : 24Messages : 149

    le Lun 31 Mar 2014 - 22:34

    Merci beaucoup pour le partage
    avatar
    [W]endy
    FémininAge : 28Messages : 117

    le Mar 1 Avr 2014 - 19:29

    Merci, c'est magnifique <3
    avatar
    Lena'
    FémininAge : 24Messages : 41

    le Mar 1 Avr 2014 - 22:48

    Merci ♥



    avatar
    Ryosaki
    MasculinAge : 26Messages : 109

    le Mer 2 Avr 2014 - 11:40

    Merci



    avatar
    GreenGage
    FémininAge : 25Messages : 73

    le Mer 2 Avr 2014 - 12:01

    C'est vraiment très beau ! Bravo ! Et merci pour le partage !
    avatar
    Jull421
    FémininAge : 24Messages : 141

    le Mer 2 Avr 2014 - 14:41

    Merci



    avatar
    Heavensky
    FémininAge : 23Messages : 66

    le Mer 2 Avr 2014 - 21:01

    Merci :p
    avatar
    AMIANTE
    FémininAge : 22Messages : 36

    le Jeu 3 Avr 2014 - 8:56

    très joli, merci /o/



    uc
    avatar
    Lutine
    FémininAge : 30Messages : 102

    le Jeu 3 Avr 2014 - 12:32

    merci :)
    avatar
    Layla4
    FémininAge : 19Messages : 149

    le Jeu 3 Avr 2014 - 16:53

    Merci !
    avatar
    Susan Storm
    FémininAge : 38Messages : 77

    le Jeu 3 Avr 2014 - 18:35

    Merci Wink
    avatar
    LyN[ss]
    FémininAge : 26Messages : 105

    le Ven 4 Avr 2014 - 12:30

    Très joli, je serais curieuse de voir comment on s'y prend pour arriver à ce résultat
    Ϫ JAYCE.
    FémininAge : 28Messages : 29

    le Ven 4 Avr 2014 - 15:50

    Juste parfait ! Merci !!
    avatar
    Shakespeare
    FémininAge : 28Messages : 109

    le Ven 4 Avr 2014 - 23:29

    merci infiniment du partage ;w;
    avatar
    1charlotte
    FémininAge : 17Messages : 196

    le Sam 5 Avr 2014 - 1:32

    Sympas, j'aime bien ^^
    avatar
    Amaliiah
    FémininAge : 19Messages : 50

    le Sam 5 Avr 2014 - 12:37

    Merci, c'est magnifique !
    avatar
    Airore
    FémininAge : 19Messages : 132

    le Sam 5 Avr 2014 - 18:29

    Merci !
    avatar
    Uther
    MasculinAge : 21Messages : 93

    le Sam 5 Avr 2014 - 19:55

    Délicious !
    avatar
    Luxuria
    FémininAge : 21Messages : 83

    le Sam 5 Avr 2014 - 21:17

    Merci Beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Lun 24 Sep 2018 - 7:55