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
    Voxiom
    MasculinAge : 18Messages : 8

    le Jeu 9 Mar 2017 - 21:48

    Merci
    avatar
    Ran94
    FémininAge : 24Messages : 26

    le Ven 10 Mar 2017 - 19:42

    J'aime :omg:
    avatar
    Swan2
    FémininAge : 19Messages : 49

    le Jeu 16 Mar 2017 - 15:44

    omg c'est superbe **
    avatar
    madame-al
    FémininAge : 27Messages : 12

    le Ven 31 Mar 2017 - 23:00

    merci
    avatar
    Mariana Greyson
    FémininAge : 20Messages : 78

    le Jeu 13 Avr 2017 - 10:48

    mercii
    avatar
    viteundoliprane
    MasculinAge : 27Messages : 3

    le Sam 15 Avr 2017 - 12:54

    merci ham3
    avatar
    Alsan
    MasculinAge : 21Messages : 53

    le Ven 21 Avr 2017 - 2:01

    Merci
    avatar
    Llunn
    FémininAge : 28Messages : 88

    le Lun 15 Mai 2017 - 2:34

    Merci !
    avatar
    Kizuro hoki
    MasculinAge : 23Messages : 45

    le Lun 5 Juin 2017 - 16:42

    Merci !
    avatar
    Araki
    MasculinAge : 28Messages : 135

    le Dim 11 Juin 2017 - 16:34

    Merci !
    avatar
    Sadie White
    FémininAge : 27Messages : 36

    le Mer 21 Juin 2017 - 19:43

    merci =)
    avatar
    Araik
    FémininAge : 23Messages : 250

    le Sam 22 Juil 2017 - 11:21

    Merci je pense que c'est se que je cherche



    avatar
    Momiji-chan
    FémininAge : 20Messages : 38

    le Dim 23 Juil 2017 - 12:51

    Merci :)
    avatar
    Destan
    MasculinAge : 39Messages : 37

    le Lun 24 Juil 2017 - 6:44

    Superbe !

    Merci
    avatar
    JemAedan
    FémininAge : 31Messages : 27

    le Sam 5 Aoû 2017 - 14:59

    merci du partage c'est tellement beau *-*
    avatar
    Jixdu
    FémininAge : 17Messages : 37

    le Sam 5 Aoû 2017 - 15:07

    Vraiment bien, j'adore ! Merci !
    avatar
    Celtyndir
    FémininAge : 22Messages : 52

    le Lun 7 Aoû 2017 - 1:46

    Merci !
    avatar
    CaraDelevngnie
    FémininAge : 19Messages : 370

    le Mer 9 Aoû 2017 - 13:09

    J'adore ses catégories, merci beaucoup !



    avatar
    Loo
    FémininAge : 24Messages : 22

    le Lun 28 Aoû 2017 - 2:01

    Merci beaucoup c'est top !! ^^
    avatar
    Silver Blast
    MasculinAge : 18Messages : 73

    le Lun 28 Aoû 2017 - 17:25

    Merci :)
    avatar
    Calico
    FémininAge : 23Messages : 14

    le Dim 10 Sep 2017 - 1:31

    merci!
    avatar
    Raynold
    MasculinAge : 18Messages : 39

    le Dim 24 Sep 2017 - 17:22

    MRCCCCCCCCC
    avatar
    Lucrécya
    FémininAge : 25Messages : 38

    le Mar 30 Jan 2018 - 19:42

    Merci !
    avatar
    Mirony
    FémininAge : 31Messages : 44

    le Lun 12 Fév 2018 - 19:15

    Merci pour ce partage, c'est super beau! Wink
    avatar
    Noak
    MasculinAge : 24Messages : 29

    le Mar 13 Fév 2018 - 19:53

    C'est parfait, merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 17 Oct 2018 - 17:59