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 €

    Codage de catégorie simple

    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Lun 27 Oct 2014 - 11:19

    Rappel du premier message :

    Ma demande



    Bonjour Never Utopia, je souhaiterai vous demander de l'aider s'il vous plait. Je souhaiterai un codage simple pour mes catégories mais je n'ai pas trouvé mon bonheur dans la multitude de codages proposés... oui vous pouvez dire que je suis chiante XD Je me décide donc à faire une petite demande :-)

    Schéma(s) et Eléments
    Schémas : j'ai réalisé un schéma en espérant que ce dernier soit le plus clair possible :-)
    Codage de catégorie simple - Page 2 1419176362-plan

    Tailles des éléments : les proportions seront approximatives car je ne suis pas douée XD Largeur = 700px Hauteur = 150px
    Effets voulus : ce sera rapide car je ne veux aucun effet LOL
    Version de votre forum : PHPBB2

    Ressources
    Il n'y aura pas d'image dans le codage des catégories et les couleurs ne sont pas définies donc n'hésitez pas à mettre des couleurs qui vous arrangent :-)

    Autres précisions ?
    Je suis à votre disposition pour toutes vos questions :-)


    Je vous remercie beaucoup pour votre aide :love:


    Dernière édition par Kahlan le Jeu 1 Jan 2015 - 13:26, édité 3 fois
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Dim 28 Déc 2014 - 15:13

    WAOUH *-* ! C'est superbe !
    Est-ce que la partie avec les liens vers les sous-forums peut être plus basse ? Je veux dire : les liens peuvent être au même niveau que les descriptions ?
    • Revenir en haut
    Anonymous
    Invité

    Dim 28 Déc 2014 - 15:24

    Comme ceci ?
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Dim 28 Déc 2014 - 15:32

    Je t'aime !!!! C'est parfait !!!
    • Revenir en haut
    Anonymous
    Invité

    Dim 28 Déc 2014 - 16:51

    Ah ! Very Happy C'mignon ♥

    Voici le CSS :
    Code:
    /************************************ CATEGORIES ************************************/

    /* Mise en forme nom catégorie */
    .titre_cate h2 {
      width: 700px;
      background-color: #595267;
      color: #EDECF0;
      text-align: center;
      font-family: 'Qwigley', cursive;
      font-size: 40px;
      margin: auto;
      padding: 15px;
    }

    /* Contenu des forum */
    .categorie {
      background-color: #E4E1E2;
      max-width: 700px;
      height: 150px;
      padding: 15px;
      margin: auto;
    }

    /* Mise en forme nom du forum */
    a.nom_forum {
      font-family: 'Dancing Script', cursive;
      font-size: 25px;
      font-weight: bold;
    }

    a.nom_forum:hover {
      text-decoration: none !important;
      color: #968EA6 !important;
    }

    /* Mise en forme des statistiques sujets et messages */
    .mess_sujets {
      float: right;
      font-size: 9px;
      top: 1.3em;
      position: relative;
    }

    /* Mise en forme de la description des forum */
    .description_forum {
      width: 350px;
      height: 100px;
      overflow: auto;
      font-size: 11px;
      text-align: justify;
    }

    /* Mise en forme des sous-forum */
    .sous_forum {
      width: 150px;
      height: 100px;
      overflow: auto;
      text-align: justify;
      border-left: 6px solid #81B031;
      margin-left: 10px;
      padding-left: 10px;
      margin-top: 30px;
    }

    /* Taille de l'image "no new", "new" et "lock" */
    .statut_forum {
      width: 150px;
    }

    /* Mise en forme du bloc dernier message */
    .derniers {
      margin-left: 10px;
      font-size: 11px;
    }

    /************************************ FIN CATEGORIES ************************************/

    Et le 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 --><br /><br />
        <div class="titre_cate" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>



          <!-- END tablehead -->
          <!-- BEGIN cathead -->
         
          <!-- END cathead -->
          <!-- BEGIN forumrow -->
       
       
          <div class="categorie">
        <table><tr>
          <td width="350px"><a class="nom_forum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <div class="mess_sujets"><span style="color: #81B031; font-weight: bold;">{catrow.forumrow.POSTS}</span> Messages <span style="color: #595267; font-weight: bold;">|</span> <span style="color: #81B031; font-weight: bold;">{catrow.forumrow.TOPICS}</span> Sujets </div>
            <br /><div class="description_forum">{catrow.forumrow.FORUM_DESC}</div></td>
          <td><div class="sous_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            <script type="text/javascript">
              jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
            </script></div></td>
          <td><div class="derniers"><img class="statut_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
           
            <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->
            <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td>
        </tr>
        </table>
      </div>

          <!-- END forumrow -->
          <!-- BEGIN catfoot -->
         
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
       

        <!-- END tablefoot --><!-- END catrow -->
    <link href='http://fonts.googleapis.com/css?family=Qwigley|Dancing+Script' rel='stylesheet' type='text/css'>

    Dis-moi si tu rencontres des problèmes Wink
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Dim 28 Déc 2014 - 18:29

    Pas de soucis mais tout est parfait :-)

    EDIT : en faites j'aurais une question... Comment je fais pour que le bouton "old", "new", "no new" reste à la même hauteur que la description du forum ? Comment je peux mettre un espace entre le bouton et les statistiques ?
    • Revenir en haut
    Anonymous
    Invité

    Dim 28 Déc 2014 - 19:42

    Essaies de remplacer cette partie du CSS :
    Code:
    /* Mise en forme du bloc dernier message */
    .derniers {
      margin-left: 10px;
      font-size: 11px;
    }

    Par :
    Code:
    /* Mise en forme du bloc dernier message */
    .derniers {
      margin-left: 10px;
      font-size: 11px;
      min-height: 100px;
      margin-top: 20px;
    }

    Et d'ajouter deux "br" entre les deux balises dans le template, ce qui donnerait :
    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 --><br /><br />
        <div class="titre_cate" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>



          <!-- END tablehead -->
          <!-- BEGIN cathead -->
         
          <!-- END cathead -->
          <!-- BEGIN forumrow -->
       
       
          <div class="categorie">
        <table><tr>
          <td width="350px"><a class="nom_forum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <div class="mess_sujets"><span style="color: #81B031; font-weight: bold;">{catrow.forumrow.POSTS}</span> Messages <span style="color: #595267; font-weight: bold;">|</span> <span style="color: #81B031; font-weight: bold;">{catrow.forumrow.TOPICS}</span> Sujets </div>
            <br /><div class="description_forum">{catrow.forumrow.FORUM_DESC}</div></td>
          <td><div class="sous_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            <script type="text/javascript">
              jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
            </script></div></td>
          <td><div class="derniers"><img class="statut_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            <br /><br />
            <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->
            <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td>
        </tr>
        </table>
      </div>

          <!-- END forumrow -->
          <!-- BEGIN catfoot -->
         
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
       

        <!-- END tablefoot --><!-- END catrow -->
    <link href='http://fonts.googleapis.com/css?family=Qwigley|Dancing+Script' rel='stylesheet' type='text/css'>
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Dim 28 Déc 2014 - 19:55

    Merci beaucoup :-) J'y avais pensé pour le
    mais j'avais peur de faire une erreur XD
    • Revenir en haut
    Anonymous
    Invité

    Dim 28 Déc 2014 - 19:59

    C'est bon comme ça ? :3
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Dim 28 Déc 2014 - 20:47

    Tout est parfait :-) Je voulais seulement savoir s'il est possible de mettre une image derrière le titre de la catégorie ?
    • Revenir en haut
    Anonymous
    Invité

    Lun 29 Déc 2014 - 19:55

    Oui c'est possible ^^ J'en ai pas sous la patte pour essayer, mais en la mettant dans le ".titre_cate h2" en background ça doit passer :3
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Lun 29 Déc 2014 - 22:34

    j'essaierai alors et en cas de soucis, je reviendrai ici :-)
    en tout cas, je te remercie beaucoup !
    • Revenir en haut
    Anonymous
    Invité

    Lun 29 Déc 2014 - 22:38

    Ok tiens-moi au jus ^^
    Et au besoin, fais passer l'image et je tenterai de mon côté :)
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Mer 31 Déc 2014 - 13:58

    tiens je rencontre un petit souci :-)
    regarde le Mordor et le Harad, le nom Harad va presque sur la description du Mordor. comment je peux faire pour éviter ça ?

    http://shadowofmiddle-earth.forumactif.org/
    • Revenir en haut
    Anonymous
    Invité

    Mer 31 Déc 2014 - 14:00

    Ca c'est bizarre oO
    Tu as essayé de réduire la hauteur de l'overflow ? Ici :

    Code:
    /* Mise en forme de la description des forum */
    .description_forum {
      width: 350px;
      height: 100px;
      overflow: auto;
      font-size: 11px;
      text-align: justify;
    }

    En mettant par exemple le "height" à 90 ?
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Jeu 1 Jan 2015 - 11:02

    OUIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII \0/ Cela fonctionne ! Je n'y aurais pas pensé ! Merci :-)
    • Revenir en haut
    Anonymous
    Invité

    Jeu 1 Jan 2015 - 12:11

    Avec plaisir :)
    La demande est terminé ? :3
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Jeu 1 Jan 2015 - 12:13

    Oui elle est terminée :-)
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Lun 25 Nov 2024 - 8:58