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
    Kilda
    FémininAge : 38Messages : 73

    le Jeu 11 Fév 2016 - 22:48

    merci
    avatar
    Sora65
    FémininAge : 25Messages : 12

    le Sam 13 Fév 2016 - 17:43

    Merci pour le partage Halloween Very Happy ~
    avatar
    Kya-chan
    FémininAge : 22Messages : 127

    le Dim 14 Fév 2016 - 14:21

    Merci beaucoup =3




    If I had a hammer...
    I wanna do bad things with you~

    avatar
    OMJ
    FémininAge : 27Messages : 91

    le Lun 15 Fév 2016 - 14:52

    merciiiiiiii :)
    avatar
    Nunna
    FémininAge : 21Messages : 48

    le Mar 16 Fév 2016 - 15:25

    Merciiii :)
    avatar
    Caroline Forbes
    FémininAge : 20Messages : 27

    le Ven 19 Fév 2016 - 9:53

    Superbe merci !
    avatar
    Rebekaah
    FémininAge : 23Messages : 51

    le Ven 19 Fév 2016 - 10:38

    Magnifique, mercii !
    avatar
    Globule
    FémininAge : 18Messages : 50

    le Ven 19 Fév 2016 - 12:35

    Merci :3
    avatar
    Ariemm
    FémininAge : 17Messages : 107

    le Lun 22 Fév 2016 - 10:50

    merci ^^
    avatar
    Sandym
    FémininAge : 31Messages : 20

    le Mar 23 Fév 2016 - 13:39

    merci Very Happy
    avatar
    ENDLESS-DREAM
    FémininAge : 27Messages : 31

    le Dim 28 Fév 2016 - 2:16

    merci
    avatar
    geen.
    FémininAge : 30Messages : 23

    le Lun 29 Fév 2016 - 15:05

    merci du partage Very Happy
    avatar
    Ghost of Darkness
    FémininAge : 24Messages : 43

    le Mar 1 Mar 2016 - 16:07

    C'est beauuuuu *-*
    Merci beaucoup pour ce partage ♥



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    avatar
    Demily
    FémininAge : 31Messages : 50

    le Mar 1 Mar 2016 - 16:16

    C'est superbe! Merci du partage
    avatar
    Reishi
    MasculinAge : 24Messages : 145

    le Mar 1 Mar 2016 - 22:08

    merci !
    avatar
    Jujudu44
    FémininAge : 30Messages : 61

    le Jeu 10 Mar 2016 - 0:26

    Magnifique ! Merci :)
    avatar
    MissDream
    FémininAge : 23Messages : 144

    le Mer 16 Mar 2016 - 18:30

    merci c'est très jolie :)

    avatar
    JaydenRcr
    MasculinAge : 19Messages : 32

    le Lun 21 Mar 2016 - 22:54

    merci
    avatar
    Liia
    FémininAge : 22Messages : 91

    le Sam 26 Mar 2016 - 15:59

    Super merci ^^
    avatar
    crash_
    FémininAge : 23Messages : 50

    le Sam 26 Mar 2016 - 17:06

    merci pour ce petit libre service :)
    Darouine Lius
    MasculinAge : 28Messages : 65

    le Mar 29 Mar 2016 - 23:08

    merci
    avatar
    Xyyny
    FémininAge : 27Messages : 59

    le Mer 30 Mar 2016 - 14:08

    J'aime beaucoup !
    avatar
    Saphira
    FémininAge : 21Messages : 72

    le Ven 8 Avr 2016 - 17:38

    Merci ^^
    avatar
    Coco-Lapin02
    MasculinAge : 50Messages : 167

    le Ven 8 Avr 2016 - 18:54

    Merci
    avatar
    Océ
    FémininAge : 43Messages : 281

    le Sam 9 Avr 2016 - 11:28

    Jolie et merci <3



    Bonjours voici les pv's que nous cherchons : [url=http://www.never-utopia.com/t63181-les-postes-vacants-pour-les-chronuque-de-aya#960582 L’annonce est ici[/url]
    Contenu sponsorisé


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