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

    le Mer 5 Fév 2014 - 18:07



    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
    Dydy
    FémininAge : 28Messages : 490

    le Jeu 6 Fév 2014 - 18:08

    Merci et WAOUH! c'est juste magnifique! ♥



    avatar
    Dydy
    FémininAge : 28Messages : 490

    le Jeu 6 Fév 2014 - 22:23

    désolée du double post mais j'ai une question! Voilà, je suis sous google chrome et j'ai essayé le code (ouais, il me plait et c'est pile ce que je voulais) mais il y a un bug. Quand je clique sur 1er forum, j'arrive donc sur la page où il y a les sujets. Le problème réside dans le fait que le titre du sujet n'est pas à sa place! il est descendu sur la barre.
    Voilà voilà, j'espère ne pas t'embêter avec ma question xD



    avatar
    Halloween
    FémininAge : 24Messages : 9757

    le Ven 7 Fév 2014 - 19:32

    Disons que pour les questions, il y a cette section Wink
    Je crois que c'est un problème avec le "h2" ... dans le template topics_list_box essaie de remplacer ceci :

    Code:
    <h2 class="topic-title">
                   <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                </h2>

    Par ceci
    Code:
    <span class="topic-title">
                   <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                </span>




    < / Libre service codage >
    avatar
    Ailou ~3
    FémininAge : 19Messages : 61

    le Lun 10 Mar 2014 - 0:10

    Wahou ** Merci du partage ! :)
    avatar
    Apokalip'z
    MasculinAge : 25Messages : 290

    le Lun 10 Mar 2014 - 0:34

    Veux voir



    avatar
    Doku
    FémininAge : 23Messages : 66

    le Lun 10 Mar 2014 - 2:45

    Wow, joli !  :friends: 
    avatar
    Aile
    FémininAge : 30Messages : 134

    le Lun 10 Mar 2014 - 11:36

    J'aime beaucoup le rendu, c'est super beau *o* Merci de partager le tuto <3



    avatar
    bubulle
    FémininAge : 31Messages : 76

    le Lun 10 Mar 2014 - 12:36

    merci :)
    avatar
    Lakxi
    FémininAge : 25Messages : 40

    le Lun 10 Mar 2014 - 17:44

    oh c'est parfait ! merci !
    avatar
    Swann Calder
    FémininAge : 25Messages : 27

    le Lun 10 Mar 2014 - 18:41

    C'est magnifique *-*
    avatar
    Err0r
    FémininAge : 25Messages : 134

    le Mar 11 Mar 2014 - 2:44

    voyons voir ce beau truc Very Happy



    avatar
    Ryu-Kin
    FémininAge : 31Messages : 125

    le Mar 11 Mar 2014 - 5:14

    super merci
    avatar
    Asriel
    FémininAge : 23Messages : 120

    le Mar 11 Mar 2014 - 10:08

    J'aime merci du partage =)



    avatar
    Doan Lavita
    FémininAge : 20Messages : 72

    le Mar 11 Mar 2014 - 11:46

    Superbe! *^*



    avatar
    Valhalla
    MasculinAge : 27Messages : 105

    le Mar 11 Mar 2014 - 17:36

    Merci beaucoup ^^
    avatar
    Opaline
    FémininAge : 18Messages : 86

    le Mar 11 Mar 2014 - 19:10

    Merci !



    Hop80
    MasculinAge : 29Messages : 138

    le Mar 11 Mar 2014 - 19:25

    cool merci
    avatar
    Cruelly
    FémininAge : 25Messages : 2572

    le Mer 12 Mar 2014 - 3:56

    Simplement magnifique merci du partage :)



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Meilia
    FémininAge : 24Messages : 92

    le Mer 12 Mar 2014 - 10:54

    Superbe merci !
    avatar
    Meilia
    FémininAge : 24Messages : 92

    le Mer 12 Mar 2014 - 11:16

    Désolée du double poste, :p j'ai un petit soucis avec le code, j'ai cet espèce de rectangle noir sur les stats, je ne sais pas d'où ça vient et je n'arrive pas à trouver, un petit coup de main ?



    Mon Css:
    Code:
    body {
      background-color : #1F1E22;
        background-image: url(http://img15.hostingpics.net/pics/437464716990skin01.jpg), url(http://img15.hostingpics.net/pics/378140716990skin05.jpg);
        background-attachment: scroll, fixed;
        background-position: top center, center center;
        background-repeat: no-repeat, repeat;
        background-size: auto, auto;
    }

    #newbottom
    {
    clear: both;
    background-image: url(http://img15.hostingpics.net/pics/767072716990skin06.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 103px;
    }


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

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

    r:focus{
    background: #9bca3c;
    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);
      transition: all .25s;
    }

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


    /* Catégories */

    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: #9bca3c;
      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: #9bca3c;
      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: #9bca3c !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: #d4ee9e;
      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: #d4ee9e;
    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 --------------------------------- */

    Mon 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" />

    Merci d'avance :
    avatar
    Halloween
    FémininAge : 24Messages : 9757

    le Mer 12 Mar 2014 - 12:57

    Meilia ; Pour les problèmes c'est plutôt par ici comme c'est indiqué dans le rappel du règlement Wink




    < / Libre service codage >
    avatar
    laurie chloë
    FémininAge : 26Messages : 8

    le Mer 12 Mar 2014 - 21:09

    Merci !
    avatar
    Ayane Jun
    FémininAge : 26Messages : 81

    le Mer 12 Mar 2014 - 22:38

    Superbe ! J'adore tout simplement

    Merci !
    avatar
    alex24d
    FémininAge : 30Messages : 95

    le Jeu 13 Mar 2014 - 10:54

    j'adore merci
    Contenu sponsorisé


      La date/heure actuelle est Sam 15 Déc 2018 - 9:51