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 : -28%
-28% Machine à café avec broyeur ...
Voir le deal
229.99 €

    Codage de l'avatar du dernier posteur

    Ciàran
    Ciàran
    FémininAge : 34Messages : 187

    Mer 6 Avr 2016 - 13:19

    Coucou, alors voilà, je m'explique. J'aimerais bien mettre l'avatar du dernier posteur dans les catégories, hors, j'ai mon code qui foire légèrement - voir beaucoup- . J'aimerais positionner celui-ci entre le bloc de description et les statistiques, mais il se met sous les statistiques tout court :/ Voici une capture d’écran + cc+ template :) je suis en PHBB2

    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>
              <!-- **** Début des modifications effectuées par
                        ****** Phantasmagoria*** -->
       
        <!-- BEGIN catrow -->
          <!-- BEGIN tablehead -->
       
        <table class="modifcat" width="100%" border="0" cellspacing="0" cellpadding="0">
        <div class="catégoz" align="center">{catrow.tablehead.L_FORUM}</div>
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <tr>
                  <!-- END cathead -->
              <!-- BEGIN forumrow -->
              <!-- BEGIN inc -->
                    <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
                    <!-- END inc -->
       
                    <td align="left" valign="top">
        <div class="fondglobal02">
                      <table width="100%" cellpadding="5" cellspacing="0">
       
        <tr><td valign="top" align="left" style="margin-bottom: -20px;">
          <div class="forumtitre">
                         
            <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div></td>
       
                            <td valign="top" align="right" colspan="2">
                           
                              <div class="image_cat"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
                             
                        </td></tr>
                        <tr><td><align="center" valign="top">
       
                  <div class="statdescrip">
       
                                            <div class="descrip_bloc"><span class="genmed"> {catrow.forumrow.FORUM_DESC}</span>
                                           
                                      </div>
                                  </div>
                             
       
       
        </td>
                          <td align="center" valign="top">
                                          <div class="stat_general">
                              <span class="genmed"><div class="stat1">
                                Sujets {catrow.forumrow.TOPICS} | Messages {catrow.forumrow.POSTS}</div></span>
                                            <div id="lastpost" class="gensmall clickinfopost">{catrow.forumrow.LAST_POST}</div>
                </div>
                <div class="lastpost-avatar-container infopost">
                  <div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
                </div>
       
                                          </div>
                            </td>
                     
                          <td align="center" valign="middle">
                            <div class="sousfofo">
                                              <span class="sousforum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></span>
                <script type="text/javascript">
                jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
          </script></div></td>
                   
                   
       
       
                </tr>
        </table>
        </td></tr>
       
                <!-- *******Fin des modifications par Phantasmagoria ******
                            ********* Toute reproduction complète
                            ******* ou partielle est prohibée ****** -->
           
          <!-- 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 -->

    Code:
        /*********** CODE DES CATEGORIES ********/
        .modifcat {
        background-color: #e6ff8d;
        border-bottom: 2px solid #c5e34c;
        border-radius: 0px 0px 20px 20px;
        -webkit-border-radius-: 20px; width: 750px;}
       
        .catégoz { background-color: #e6ff8d;
        margin-bottom: -10px;; height: 50px; margin-top:5px; padding-top: -10px;
        border-radius: 20px 20px 0px 0px;
        -webkit-border-radius: 20px 20px 0px 0px;
            border-top: 2px solid #9ce5f3; width: 750px;}
       
        .catégoz h2 { font-size: 17px; font-family: Helvari; text-shadow: 1px 1px 2px #fff;
        text-transform: uppercase; color: #09aafc; letter-spacing: -1px;}
       
        .forumtitre{text-align:center;}
       
        .statdescrip {
        background-color: #f9ffff;
        padding: 5px; border-solid: 0px;
        -webkit-border-solid: 0px;}
       
        .image_cat { margin-bottom: -10px; margin-right: 4px;}
       
        .descrip_bloc {
        width: 380px;
        height:70px;
        overflow: auto;
        text-align: justify;
        font-family: 'Yanone Kaffeesatz';
        color: #fff; font-size: 09px;}
       
        .stat_general {
        background-color: #f9ffff;
        padding: 5px;
        height:70px; width: 180px; font-size: 9px; border-radius: 10px;
        -webkit-border-radius: 10px;}
       
        .stat1 {
        padding: 1px;
          border-bottom: 1px #f1e5a2 dashed; }
       
        .forumdesc1 {
        text-align: center;
        padding: 5px; border-solid: 10px;
        -webkit-border-solid: 10px;
            }
       
        .sousfofo {
        background-color: #f9ffff;
        padding: 5px; text-transform : uppercase;
        height:70px; width: 130px; overflow: auto;
          font-family: 'KenyanCoffee';
            font-size: 9px;
        -webkit-transition: all 1s ease; /* pour navigateur webkit */
        -moz-transition: all 1s ease; /* pour navigateur mozilla */
        -o-transition: all 1s ease; /* pour navigateur opera */
        transition: all 1s ease; /* pour les navigateurs récents */ border-solid: 1px;
        -webkit-border-solid: 1px; }
       
        .sousfofo a {
        color: #a9a6a7;
        padding: 2px;
        text-decoration: none; text-transform : uppercase;
          font-family: 'KenyanCoffee';
            font-size: 9px;
        -webkit-transition: all 1s ease; /* pour navigateur webkit */
        -moz-transition: all 1s ease; /* pour navigateur mozilla */
        -o-transition: all 1s ease; /* pour navigateur opera */
        transition: all 1s ease; /* pour les navigateurs récents */ }
       
        .sousfofo a:hover {
        color: #3396da;
        padding: 2px;
        text-decoration: none; text-transform : uppercase;
          font-family: 'KenyanCoffee';
            font-size: 9px;
        -webkit-transition: all 1s ease; /* pour navigateur webkit */
        -moz-transition: all 1s ease; /* pour navigateur mozilla */
        -o-transition: all 1s ease; /* pour navigateur opera */
        transition: all 1s ease; /* pour les navigateurs récents */
        text-align: justify;}
       
        .forumtitre a {
        display:inline-block;
        font-size: 25px;
        color: #fe668a; margin-bottom: -22px;
        text-align:left;
        font-family: 'KenyanCoffee'sans-serif;
        -moz-transition: all 1s;
        -o-transition: all 1s ease 0s;
        -webkit-transition: all 1s ease 0s;
        letter-spacing: -1px;}
       
       
        /* Personnalisation titre - lien survolé */
        .forumtitre  a:hover, .forumtitre  a:active {
        color:#d1cb00;
        font-size: 20px;
        text-decoration: none;
        font-family: 'KenyanCoffee', cursive;
        letter-spacing: 1px;}
       
       
       
                    /************** FIN DES CODES ********************/
       
       
        .lastpost-avatar {
            float: left;
            padding: 2px;
            }
            .lastpost-avatar img {
            width: 40px;
            height: 50px;
            border-solid: 0px;
            -moz-border-solid: 0px;
            -webkit-border-solid: 0px;
            }
    Youp
    Youp
    FémininAge : 29Messages : 579

    Mer 6 Avr 2016 - 13:42

    Est ce que tu aurais une capture d'écran à nous montrer s'il te plaît ? (tu l'as oublié dans ton message) J'arrive pas à visualiser sans.



    Codage de l'avatar du dernier posteur 262632clip20160315at092522
    Ciàran
    Ciàran
    FémininAge : 34Messages : 187

    Mer 6 Avr 2016 - 13:52

    Ah oui zut désolé voilà :)
    Spoiler:
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 8 Avr 2016 - 14:48

    Salut!

    Si tu essaies ceci, cela fonctionne? :
    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>
              <!-- **** Début des modifications effectuées par
                        ****** Phantasmagoria*** -->
       
        <!-- BEGIN catrow -->
          <!-- BEGIN tablehead -->
       
        <table class="modifcat" width="100%" border="0" cellspacing="0" cellpadding="0">
        <div class="catégoz" align="center">{catrow.tablehead.L_FORUM}</div>
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <tr>
                  <!-- END cathead -->
              <!-- BEGIN forumrow -->
              <!-- BEGIN inc -->
                    <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
                    <!-- END inc -->
       
                    <td align="left" valign="top">
        <div class="fondglobal02">
                      <table width="100%" cellpadding="5" cellspacing="0">
       
        <tr><td valign="top" align="left" style="margin-bottom: -20px;">
          <div class="forumtitre">
                         
            <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div></td>
       
                            <td valign="top" align="right" colspan="3">
                           
                              <div class="image_cat"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
                             
                        </td></tr>
                        <tr><td><align="center" valign="top">
       
                  <div class="statdescrip">
       
                                            <div class="descrip_bloc"><span class="genmed"> {catrow.forumrow.FORUM_DESC}</span>
                                           
                                      </div>
                                  </div>
                             
       
       
        </td>
        <td>
    <div class="lastpost-avatar-container infopost">
                  <div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
                </div>
        </td>
                          <td align="center" valign="top">
                                          <div class="stat_general">
                              <span class="genmed"><div class="stat1">
                                Sujets {catrow.forumrow.TOPICS} | Messages {catrow.forumrow.POSTS}</div></span>
                                            <div id="lastpost" class="gensmall clickinfopost">{catrow.forumrow.LAST_POST}</div>
                </div>
               
       
                                          </div>
                            </td>
                     
                          <td align="center" valign="middle">
                            <div class="sousfofo">
                                              <span class="sousforum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></span>
                <script type="text/javascript">
                jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
          </script></div></td>
                   
                   
       
       
                </tr>
        </table>
        </td></tr>
       
                <!-- *******Fin des modifications par Phantasmagoria ******
                            ********* Toute reproduction complète
                            ******* ou partielle est prohibée ****** -->
           
          <!-- 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 -->



    Ciàran
    Ciàran
    FémininAge : 34Messages : 187

    Ven 8 Avr 2016 - 18:37

    ça fonctionne c'est parfait :love: Je peux juste te demander comment tu as fais si ça ne te dérange pas ou tu aurais un lien d'un tuto qui l'expliquerait? Vu que j'aimerais apprendre et que je touche doucement au codage, j'aime bien savoir ce qui a été fait pour au moins apprendre de mes erreurs :)
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 8 Avr 2016 - 19:06

    Tu sais comment un tableau fonctionne?
    Et une div?

    Une div, c'est un bloc. À moins qu'on utilise le float (il y a une étape de cursus sur ça), les blocs se mettent toujours un en dessous de l'autre.

    Quant à un tableau, c'est structuré comme ça :
    Code:
    <table> *On ouvre le tableau*
      <tr> *On ouvre la 1ère rangée du tableau*

        <td> *On ouvre la 1ère cellule de la 1ère rangée*
          Truc
        </td> *On ferme la 1ère cellule de la 1ère rangée*

        <td> *On ouvre la 2ème cellule de la 1ère rangée qui va se mettre à droite de la 1ère cellule*
          Machin
        </td> *On ferme la 2ème cellule de la 1ère rangée*

      </tr> *On ferme la 1ère rangée*
    </table> *On ferme le tableau*

    À la place de rajouter une cellule entre la description et les statistiques et y mettre l'image, tu avais ajouté l'image dans la même cellule que les statistiques. Automatiquement, l'image se met en dessous des statistiques parce que les stats et l'image sont des blocs (divs) et les divs se mettent un en dessous de l'autre alors qu'une cellule (td) se met un après l'autre.

    Tu avais fait ceci :
    Code:
    <table> *On ouvre le tableau*
      <tr> *On ouvre la 1ère rangée du tableau*

        <td> *On ouvre la 1ère cellule de la 1ère rangée*
          Description
        </td> *On ferme la 1ère cellule de la 1ère rangée*

        <td> *On ouvre la 2ème cellule de la 1ère rangée qui va se mettre à droite de la 1ère cellule*
          Statistiques
          Image *Se met en dessous des statistiques*
        </td> *On ferme la 2ème cellule de la 1ère rangée*

        <td> *On ouvre la 3ème cellule de la 1ère rangée qui va se mettre à droite de la 2ème cellule*
          Sous-forums
        </td> *On ferme la 3ème cellule de la 1ère rangée*

      </tr> *On ferme la 1ère rangée*
    </table> *On ferme le tableau*

    Alors qu'il fallait faire ceci :
    Code:
    <table> *On ouvre le tableau*
      <tr> *On ouvre la 1ère rangée du tableau*

        <td> *On ouvre la 1ère cellule de la 1ère rangée*
          Description
        </td> *On ferme la 1ère cellule de la 1ère rangée*

        <td> *On ouvre la 2ème cellule de la 1ère rangée qui va se mettre à droite de la 1ère cellule*
          Image
        </td> *On ferme la 2ème cellule de la 1ère rangée*

        <td> *On ouvre la 3ème cellule de la 1ère rangée qui va se mettre à droite de la 2ème cellule*
          Statistiques
        </td> *On ferme la 3ème cellule de la 1ère rangée*

        <td> *On ouvre la 4ème cellule de la 1ère rangée qui va se mettre à droite de la 3ème cellule*
          Sous-forums
        </td> *On ferme la 4ème cellule de la 1ère rangée*

      </tr> *On ferme la 1ère rangée*
    </table> *On ferme le tableau*



    Ciàran
    Ciàran
    FémininAge : 34Messages : 187

    Ven 8 Avr 2016 - 20:00

    Merci beaucoup je comprends mieux du coup :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 21:29