AccueilDernières imagesRechercherS'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.

Le Deal du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    Sous-forums qui apparaissent au passage de la souris

    Anonymous
    Invité

    Dim 6 Nov 2011 - 15:21

      Ohayo =)

      Bon voila, je galère depuis ce matin pour effectuer quelque chose que j'ai rarement vu sur les forums : j'aimerai qu'au passage de la souris sur le nom d'un forum, un menu déroulant apparaisse avec tous les sous-forums qui s'y trouvent (un peu comme le "profil" de Never Utopia dans les messages, qui laisse voir les informations du membre au passage de la souris) =)

      J'ai essayé d'intégrer le code de la PA en accordéon dans la balise "a.forumlink:hover" pour le menu déroulant mais sans succès.

      Un peu d'aide serait la bienvenue =)
      Merci ♥


    Dernière édition par Halloween le Mer 16 Nov 2011 - 15:14, édité 1 fois
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 8 Nov 2011 - 0:47

    Salut^^

    En fait c'est assez simple, par contre c'est sujet à bugs niveau affichage... les sous-forums ne s'enlèvent pas si tu enlèves trop vite le curseur je trouve.

    Dans le template, le forumlink doit être comme ceci (et évidemment tu dois enelever les variables des sous-forums^^) :

    Code:
    <span class="forumlink">
                                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                <span class="infobulle">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                              </span>

    Ton css :

    Code:
    .forumlink .infobulle
    {
      display: none !important;
    }
    .forumlink:hover .infobulle
    {
      display: block !important;
      position: absolute;
      background-color: #ffffff;
      border: 1px solid #000000;
      margin-left: 50px;
      margin-top: 20px;
    }

    A personnaliser pour le hover^^



    sign
    • Revenir en haut
    Anonymous
    Invité

    Mar 8 Nov 2011 - 16:44

      Merci Sparrow pour ta réponse, mais je dois le mettre dans quel template ? Parce que je n'avais touché qu'au CSS moi =3 Et qu'est-ce que tu entends par variables ?

      Pardon et merci TOT
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 8 Nov 2011 - 18:06

    Ah xD Attends je te donne le template entier, donc il s'agit du template "Page d'accueil - Affichage des catégories" :

    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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          <th nowrap="nowrap" width="50">{L_TOPICS}</th>
          <th nowrap="nowrap" width="50">{L_POSTS}</th>
          <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
       </tr>
       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
             <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                   <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
             </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
       </tr>
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
             <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
             <h{catrow.forumrow.LEVEL} class="hierarchy">

                <span class="forumlink">
                                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                <span class="infobulle">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>

                              </span>
             </h{catrow.forumrow.LEVEL}>
             <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
             <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
             </span>
          </td>
          <td class="row3" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.TOPICS}</span>
          </td>
          <td class="row2" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.POSTS}</span>
          </td>
          <td class="row3 over" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td>
       </tr>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
       </tr>
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


    Les variables ce sont les valeurs entre accolades {...} qui permettent d'afficher quelque chose, un élément, mais qui change en fonction du visiteur ou de l'endroit où il est placé.

    Exemple : les variables qui affichent les sous-forum c'est :

    Code:
    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}



    sign
    • Revenir en haut
    Anonymous
    Invité

    Mar 8 Nov 2011 - 18:34

      Ah, c'est mieux comme ça xD

      Je savais pas que ça s'appelait comme ça =O C'est le même nom pour ".forumlink" par exemple ?

      Effectivement c'est long =/ J'ai peur que ça pénalise les futurs membres, je vais peut-être éviter. Par contre je vais garder l'astuce pour autre chose je pense =D

      Merci beaucoup =)
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 8 Nov 2011 - 21:06

    La commande est terminée ou tu souhaites autre chose ? ^^



    sign
    • Revenir en haut
    Anonymous
    Invité

    Mar 8 Nov 2011 - 21:27

      J'aimerai juste que tu répondes à ceci, pour la culture générale =)

      Je savais pas que ça s'appelait comme ça =O C'est le même nom pour ".forumlink" par exemple ?

    • Revenir en haut
    Angel Ezekiel
    Angel Ezekiel
    MasculinAge : 32Messages : 1377

    Mer 16 Nov 2011 - 14:48

    Je vais essayer de répondre à la place du capitaine . Les variables accolades sont des variables codées en Php soit du côté serveur du forum avec le code source (ce qui est secret) . Le .forumlink est en réalité une classe qu'on définit et qui est remarquable par son point dans le css .



    • Revenir en haut
    Anonymous
    Invité

    Mer 16 Nov 2011 - 15:11

      Je n'avais pas pensé qu'on pouvait appeler une classe "classe" ><" Merci pour l'information =)
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 16 Nov 2011 - 15:39

    Ah désolé j'avais pas vu ta question ^^"



    sign
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 21:19