Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -54%
Colle Pattex « Ni clou ni vis » ...
Voir le deal
2.95 €

Aller en bas
Celest'
Celest'
Newbie
  • Date d'inscription : 07/08/2021
  • Messages : 25
@Artemis Merci pour ta réponse et ton avis Coeur 2

J'ai juste une question, qu'entends-tu par " tu codes parfois à même les templates" ?

Pour ce qui est de sortir les éléments du flux, je ne savais même pas que c'était quelque chose à éviter avant d'arriver ici, j'ai bien fait de m'inscrire, j'ai déjà appris plein de choses grâce à vous Passer un niveau - Page 5 3775839356
_______________
Jeu 19 Aoû 2021 - 11:15
Artemis
Artemis
Admin & serial codeuse
  • Date d'inscription : 14/01/2017
  • Messages : 3015
Hello ! Coeur 2
Alors, j'ai cette impression en lisant tes codes, comme si tu codais directement dans le template, en y ajoutant tes balises, et tu n'oses pas tout retirer pour repartir sur des bases saines, disons, tes bases à toi ! C'est tout à fait possible de faire ça, si tant est que tu sois à l'aise avec les variables des templates et les significations des boucles. Pour avoir plus de latitude quand tu codes, tu peux coder ta maquette complètement à part, et puis ensuite y ajouter les variables et boucles correspondantes, et ainsi, tu ne seras plus bridée par le codage "de base" de forumactif !
Après, peut-être que tu procèdes ainsi, mais j'ai eu cette impression, ceci dit je suis pas encore très à l'aise pour analyser en profondeur les codes d'autrui 8D

Je suis ravie que le forum t'aide à t'améliorer, en tout cas ! N'hésite pas à utiliser les sections "exercices" et "avis sur un code" à l'avenir, certains de nos codeurs pourront te donner des conseils plus ciblés Passer un niveau - Page 5 3488708190

_______________


 
Jeu 19 Aoû 2021 - 11:49
Celest'
Celest'
Newbie
  • Date d'inscription : 07/08/2021
  • Messages : 25
C'est effectivement comme ça que je code pour l'instant, j'avais un peu peur de supprimer des trucs utiles donc je n'avais touché qu'aux parties qui m'intéressait Passer un niveau - Page 5 3614989888
merci pour tes explications Coeur 2
_______________
Jeu 19 Aoû 2021 - 12:29
Izusa
Izusa
Ancien.ne du staff
  • Date d'inscription : 16/02/2016
  • Messages : 1236
Bonjour bonjour, je viens demander un passage de niveau ^^ je pense avoir un peu progressé depuis la dernière fois :)

Niveau désiré: avancé +
Les notions de ce niveau:
- Comprendre comment s'organise un template de FA
- Maîtriser le template de FA codant les Catégories (index_box)
- Maîtriser la partie du template de FA codant pour le QEEL (index_body)
- Maîtriser la partie du template de FA codant pour l'affichage des sujets (viewtopic_body)
Les exercices recommandés: Modifier ces templates
Liens/code de 3 exercices:
Catégories :
CSS
Code:

/***********************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,700&display=swap');
.titre_categorie{
  width: 800px;
  height: 45px;
  background-image: url('https://nsa40.casimages.com/img/2021/06/15/210615044731575402.png');
  padding-top: 50px;
  margin-top: 25px;
}

.tiret_cat{
  width: 350px;
  height: 1px;
  background: white;
  display: inline-block;
  margin-left: 25px;
}

.texte_titre_cat, .texte_titre_cat h2, .texte_titre_cat h1{
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: white;
  display: inline-block;
  position: absolute;
  width: auto;
  margin-left: 15px;
  margin-top: -8px;
  width: 300px;
}

.conteneur_categorie{
  height: 145px;
  width: 798px;
  background: #F5F5F5;
  border: 1px solid #D3D2D2;
  margin-top: 5px;
  font-family: 'Calibri';
}

.last_message_conteneur{
  width: 170px;
  height: 110px;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  vertical-align: top;
  font-size: 12px;
}

.nom_last_message{
  width: 158px;
  height: 78px;
  padding-left: 10px;
  padding-top: 3px;
  color: #4F5886;
  font-family: 'Merriweather', serif;
  margin-bottom: 3.5px;
  font-size: 12px;
  background: #F5F5F5;
  border: 1px solid #D3D2D2;
}

.nom_last_message a{
  color: #4F5886 !important;
  text-decoration: none !important;
  font-size: 12px;
}

.image_oldnew img{
  width: 170px;
  height: 25px;  
}

.conteneur_description_stats{
  width: 295px;
  height: 110px;
  display: inline-block;
  margin-left: 16px;
  vertical-align: top;
  margin-top: 5px;
}

.description_cat{
  height: 75px;
  width: 295px;
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #7187C1;
  color: #666666;
  overflow: auto;
}

.stats_categorie{
  font-size: 12px;
  text-align: right;
  margin-top: 9px;
  width: 295px;
  height: 15px;
  color: #515A8A;
}

.image_de_fond{
  background: white;
  width: 260px;
  height: 90px;
  border: 10px solid #585F96;
  display: inline-block;
  margin-top: 5px;
  margin-left: 17px;
  position: absolute;
}

.image_de_fond:hover{
  -webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */
  filter: grayscale(100%); /* Firefox */
}

.titre_forum{
  background: #F5F5F5;
  text-align: center;
  position: absolute;
  color: #4D5684;
  width: 100%;
  font-size: 18px;
  font-family: 'Merriweather', serif;
  top: 0;
  left: 0;
}

.titre_forum a{
  color: #4D5684 !important;
  text-decoration: none !important;
  font-size: 18px;
  font-family: 'Merriweather', serif;
}

.sous_forums_cat{
  font-size: 12px;
  height: 17px;
  width: 783px;
  margin-top: 4px;
  padding-top: 3px;
  padding-left: 15px;
  border-top: 1px solid #D3D2D2;
  color: #575E95;
}

.sous_forums_cat a{
  color: #575E95 !important;
  text-decoration: none !important;
}
HTML
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="titre_categorie"><div class="tiret_cat"></div><div class="texte_titre_cat">{catrow.tablehead.L_FORUM}</div></div>
   <!-- END tablehead -->
  
   <!-- BEGIN forumrow -->
  
<div class="conteneur_categorie">
  <div class="last_message_conteneur">
    <div class="nom_last_message">
      {catrow.forumrow.LAST_POST}
    </div>
    <div class="image_oldnew">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="imgnewnownew" />
    </div>
  </div>
  <div class="conteneur_description_stats">
    <div class="description_cat">
      {catrow.forumrow.FORUM_DESC}
    </div>
    <div class="stats_categorie">
      {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
    </div>
  </div>
  <div class="image_de_fond">
    <img src="https://nsa40.casimages.com/img/2021/06/21/210621062617877381.png" />  
    <div class="titre_forum">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
  </div>
  <div class="sous_forums_cat">
    <span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
      <script type="text/javascript">
        jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,', ')).removeAttr('id');
      </script>
  </div>
</div>
    <!-- END forumrow -->
   <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->

QEEL

CSS
Code:


/**********************************/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,700&display=swap');
#next_part_qeel{
  width: 800px;
  height: 270px;
  margin-bottom: 10px;
}

#titre_qeel{
  width: 800px;
  height: 45px;
  background-image: url('https://nsa40.casimages.com/img/2021/06/15/210615044731575402.png');
  padding-top: 50px;
}

#tiret_qeel{
  width: 580px;
  height: 1px;
  background: white;
  display: inline-block;
  margin-left: 25px;
}

#texte_titre_qeel{
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: white;
  display: inline-block;
  position: absolute;
  margin-left: 15px;
  margin-top: -15px;
}

#newbie_qeel{
  width: 748px;
  height: 133px;
  margin-top: 20px;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
  border: 1px solid #D3D2D2;
}

#img_newbie{
  border: 10px solid #5D639E;
  width: 200px;
  height: 90px;
  display: inline-block;
  margin-right: 30px;
}

#img_newbie img{
  width: 200px;
  height: 90px;
}

#avatar_dernier_membre img, #avatar_dernier_membre{
  width: 200px;
  height: 90px;
}  

#avatar_dernier_membre img {
    width: 200px;
    height: 90px;
    object-fit: cover;
}

#new_arrivant{
  display: inline-block;
  width: 493px;
  height: 110px;
  vertical-align: top;
}

#bienvenue_qeel{
  width: 495px;
  height: 40px;
  border-bottom: 1px solid #7187C1;
  margin-bottom: 10px;
  letter-spacing: 12px;
  font-size: 22px;
  font-family: 'Merriweather', serif;
  font-weight: bold;
  text-align: center;
  color: #7187C1;
  padding-top: 15px;
}

#pseudo_new_qeel{
  width: 460px;
  height: 25px;
  background-image: url('https://nsa40.casimages.com/img/2021/06/15/210615044731575402.png');
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 5px;
}

#pseudo_new_qeel a{
  font-size: 16px !important;
  font-family: 'Merriweather', serif !important;
  text-decoration: none !important;
}

#conteneur_qeel{
  width: 800px;
  height: 280px;
  font-family: 'Calibri';
}

#nbr_membre_qeel{
  height: 40px;
  width: 390px;
  padding-top: 10px;
  background: #91A2CF;
  display: inline-block;
  font-size: 18px;
  font-family: 'Merriweather', serif;
  color: white;
  text-align: center;
}

#nbr_mess_qeel{
  height: 40px;
  width: 390px;
  padding-top: 10px;
  background: #506089;
  display: inline-block;
  margin-left: 15.5px;
  font-size: 18px;
  font-family: 'Merriweather', serif;
  color: white;
  text-align: center;
}

#second_conteneur_qeel{
  width: 798px;
  height: 205px;
  background: white;
  margin-top: 15px;
  border: 1px solid #D3D2D2;
  padding-top: 10px;
  padding-bottom: 10px;
}

#here_qeel{
  height: 155px;
  width: 350px;
  display: inline-block;
  margin-left: 5px;
  vertical-align:top;
  border-bottom: 15px solid #91A2CF;
}

#titre_here_qeel{
  height: 35apx;
  width: 350px;
  border-bottom: 2px solid #91A2CF;
  color: #5A609A;
  font-size: 22px;
  text-align: center;
  padding-top: 8px;
  font-family: 'Merriweather', serif;
  font-weight: bold;
}

#list_here_qeel{
  height: 80px;
  width: 330px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  font-size: 12px;
}

#clans_qeel{
  width: 285px;
  height: 170px;
  display: inline-block;
  margin-left: 4px;
  vertical-align:top;
}

#hours_qeel{
  height: 170px;
  width: 135px;
  border-left: 10px solid #91A2CF;
  display: inline-block;
  vertical-align:top;
}

#list_horus_qeel{
  width: 120px;
  height: 130px;
  margin-left: auto;
  text-align: justify;
  overflow: auto;
  font-size: 12px;
}

#list_horus_qeel a, #list_here_qeel a{
  text-decoration: none !important;
}

#titre_hours_qeel{
  height: 25px;
  width: 120px;
  background-image: url('https://nsa40.casimages.com/img/2021/06/15/210615102455573548.png');
  text-align: center;
  padding-top: 5px;
  margin-left: auto;
  margin-top: 10px;
  font-family: 'Merriweather', serif;
  color: white;
}

#birth_qeel{
  height: 23px;
  width: 799px;
  border-top: 1px solid #D3D2D2;
  text-align: center;
  margin-top: 13px;
  padding-top: 6px;
  font-family: 'Merriweather', serif;
  font-size: 12px;
  color: #D3D2D2;
}

.texte_birth_qeel{
  font-family: 'Merriweather', serif;
  font-size: 12px;
  color: #D3D2D2;  
}

HTML
Code:

<!-- BEGIN disable_viewonline -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&display=swap" rel="stylesheet">

<div id="next_part_qeel">
  <div id="titre_qeel">
    <div id="tiret_qeel"></div>
    <div id="texte_titre_qeel">les statistiques</div>
  </div>
  <div id="newbie_qeel">
    <div id="img_newbie"><span id="avatar_dernier_membre"></span></div>
    <div id="new_arrivant">
      <div id="bienvenue_qeel">bienvenue</div>
      <div id="pseudo_new_qeel"><span id="dernier_membre">{NEWEST_USER}</span></div>
    </div>
  </div>
</div>
  
<div id="conteneur_qeel">
  <div id="nbr_membre_qeel">{TOTAL_USERS}</div>
  <div id="nbr_mess_qeel">{TOTAL_POSTS}</div>
  <div id="second_conteneur_qeel">
    <div id="here_qeel">
      <div id="titre_here_qeel">Chatons en mouvement</div>
      <div id="list_here_qeel">{LOGGED_IN_USER_LIST}</div>      
    </div>
    <div id="clans_qeel">
       <div class="systeme_onglets">
 
  <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_terre">Territoire principalement souterrain, il est composé en extérieur d'une forêt légère et de grandes plaines rocheuses.
              <br />Leurs fourrures sont mi-longues, juste assez pour résister un peu au froid et ne pas s’écrouler sous la chaleur.</div>
            <div class="contenu_onglet" id="contenu_onglet_pluie">Larges terres humides et forestières parsemées de points d'eaux diverses, leur territoire empiète également sur une montagne.
              <br />Leurs poils, imperméables et mi-longs, leur offre une chaleur dès plus correct.</div>
            <div class="contenu_onglet" id="contenu_onglet_flammes">Étendues composées essentiellement de plaines sèches et de lieux rocheux, il y fait assez chaud.
              <br />Leurs fourrures sont assez courtes, mais raisonnablement.</div>
            <div class="contenu_onglet" id="contenu_onglet_nuages">Clan situé principalement dans une montagne, recouverte d'une forêt enneigée, encerclée de vastes landes tant herbeuses que rocheuses.
              <br />Leurs pelages sont assez épais afin de résister au froid de ces terres.</div>
            <div class="contenu_onglet" id="contenu_onglet_etoiles">Cinquième clan consistué de chats décédés. Celui-ci garde en son sein tous les félins ayant bravement servi leurs clans pendant des lunes et il leur accorde le repos éternel sans connaître la faim, la soif ou le froid. Ils peuvent communiquer avec les chats des clans lors de rêves.</div>
            <div class="contenu_onglet" id="contenu_onglet_solitaires">Il ne s'agit pas d'un clan, mais de chats solitaires, qui peuvent pour eux seuls et qui ne sont pas affectés à des clans. Ils vivent aux bordures des territoires et se débrouillent par eux mêmes.</div>
          </div>
         <div class="onglets">
            <div class="onglet_0 onglet" id="onglet_terre" onclick="javascript:change_onglet('terre');">clan de la terre</div>
            <div class="onglet_0 onglet" id="onglet_pluie" onclick="javascript:change_onglet('pluie');">clan de la pluie</div>
            <div class="onglet_0 onglet" id="onglet_flammes" onclick="javascript:change_onglet('flammes');">clan des flammes</div>
            <div class="onglet_0 onglet" id="onglet_nuages" onclick="javascript:change_onglet('nuages');">clan des nuages</div>
            <div class="onglet_0 onglet" id="onglet_etoiles" onclick="javascript:change_onglet('etoiles');">clan des étoiles</div>
            <div class="onglet_0 onglet" id="onglet_solitaires" onclick="javascript:change_onglet('solitaires');">solitaires
              </div>
  </div>
        </div>  
    </div>
    <div id="hours_qeel">
      <div id="list_horus_qeel"><table>{L_CONNECTED_MEMBERS}</table></div>
      <div id="titre_hours_qeel">ils sont passés</div>
    </div>
    <div id="birth_qeel">
      <table align="center" class="texte_birth_qeel" style="text-align: center; font-family: 'Merriweather', serif; font-size: 12px; color: #D3D2D2;">{L_WHOSBIRTHDAY_TODAY}</table>
    </div>
  </div>
</div>

<script>
  //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
//<!--
                var anc_onglet = 'terre';
                change_onglet(anc_onglet);
        //-->
</script>

<script type="text/javascript">
      document.getElementById('nbr_membre_qeel').innerHTML= document.getElementById('nbr_membre_qeel').innerHTML.replace(/Nous avons/,"");
      document.getElementById('nbr_membre_qeel').innerHTML= document.getElementById('nbr_membre_qeel').innerHTML.replace(/membres enregistrés/,"chats");
      document.getElementById('nbr_mess_qeel').innerHTML= document.getElementById('nbr_mess_qeel').innerHTML.replace(/Nos membres ont posté un total de/,"");
      document.getElementById('nbr_mess_qeel').innerHTML= document.getElementById('nbr_mess_qeel').innerHTML.replace(/messages/,"miaulements");
      document.getElementById('newbie').innerHTML= document.getElementById('newbie').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
    
      document.getElementById('list_here_qeel').innerHTML= document.getElementById('list_here_qeel').innerHTML.replace(/Utilisateurs enregistrés :/,"");
      </script>

<script type="text/javascript">
      document.getElementById('list_horus_qeel').innerHTML= document.getElementById('list_horus_qeel').innerHTML.replace(/Membres connectés au cours des 99 dernières heures :/,"");
      document.getElementById('birth_qeel').innerHTML= document.getElementById('birth_qeel').innerHTML.replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun chat ne fête son anniversaire aujourd'hui");
      document.getElementById('pseudo_new_qeel').innerHTML= document.getElementById('pseudo_new_qeel').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
      document.getElementById('birth_qeel').innerHTML= document.getElementById('birth_qeel').innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui :/,"Joyeux anniversaire à : ");
      document.getElementById('birth_qeel').innerHTML= document.getElementById('birth_qeel').innerHTML.replace(/Membres fêtant leur anniversaire dans les 7 prochains jours:/,"Quelques chats fêtent bientôt leur anniversaire, ne les oubliez pas : ");
    </script>
<!-- END disable_viewonline -->

Pour l'affichage de sujet, j'ai fait ceux sur ce forum : https://lescitadellesdegaia.forumactif.com/ (les catégories/PA/Footer/Widget/Nav sont aussi de moi) et pour le rendu des codes au dessus, ce sont ceux de ce forum : https://lgdcnocturnalterrors.forumsrpg.com/

Vos exercices répondent bien au niveau désiré ? Normalement oui ^^'

Merci d'avance !
_______________
Jeu 19 Aoû 2021 - 17:47
Sunhae
Sunhae
Codeur.se
  • Date d'inscription : 30/10/2012
  • Messages : 779
Coucou @Gekigami o/
(désolée pour le temps de réponse ;;)

Au niveau de la syntaxe, il a quelques petites erreurs d'inattention, mais sinon je n'ai pas grand chose à redire ; côté html, tout est bien fermé, excepté une span et div dans le template viewtopic_body. Pour le CSS, je noterais juste qu'il ne faut pas oublier les polices génériques (et il y a aussi un piti letter-pacing: 2pt; qui traîne dans CSS profil, mais rien de grave).

Sur le papier, tu réponds aux critères requit pour avoir un niveau avancé ++;  tu es capable de comprendre les templates de FA, te repérer dedans, comprendre ce à quoi se réfère les boucles/variables, etc. Et j'ai noté quelques bouts de javascript qui me semblent tout à fait corrects et fonctionnels.

J'aurais tout de même attendu un peu plus de personnalisation pour le template viewtopic_body, en remplaçant les tableaux par quelque chose de plus moderne, comme le flex et grid, comme tu as pu le faire sur le template profile_view_body ainsi que les catégories de l'autre site. Pour que tout soit nickel chrome (je pinaille), il aurait aussi fallu mettre des largeurs (ou ne pas en mettre) là où il y en avait besoin pour que le code s'adapte en toutes circonstances. Sur mon forum test, il y a des gros décalages.

Enfin, concernant la partie javascript, j'aurais un peu plus de choses à dire. La syntaxe est très bien et le code fonctionne. Seulement je comprend pas trop pourquoi tu as recours au JS alors que tout est parfaitement faisable en utilisant les variables FA, du HTML et CSS? Passer un niveau - Page 5 3313101865
Je parle par exemple de ton dernier code javascript du template viewtopic_body
Idem pour le template profile_view_body. Pourquoi écrire:

alors qu'il y a des variables dédiées:
Code:
<a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS}</a>
<a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
<a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a>

+ cette partie, qui aurait pu être réalisée avec du CSS:


En conclusion, je dirais que si on s'en réfère strictement aux critères de l'Epic'Guide, tu es niveau Avancé ++. Seulement, je ne peux que t'encourager à systématiquement plus optimiser tes codes, penser à l'adaptabilité, favoriser flex et grid aux tableaux et privilégier le HTML et le CSS avant le Javascript.
_______________


Mer 1 Sep 2021 - 22:10
Gekigami
Gekigami
Newbie
  • Date d'inscription : 04/04/2021
  • Messages : 5
Bonjour @Sunhae, je te remercie pour ta réponse positive et pour le temps accordé à l'analyse de mon code. Tes remarques sont bien entendu prises en compte pour perfectionner mes futures créations Passer un niveau - Page 5 3775839356
Pour le template viewtopic_body, je me suis effectivement contentée d'inverser les colonnes du tableau pour arriver au résultat souhaité plus rapidement. Tout refaire en flex/grid aurait sans doute été plus propre et m'aurait évité cette erreur d'optimisation que tu as bien fait de relever car étant un oubli de ma part, ayant gardé la structure initiale du template !
Pour ce qui est du template profile_view_body, je pense qu'il devait y avoir une raison quant à l'utilisation du JS sur ces variables, je vais revoir ça Passer un niveau - Page 5 3313101865
Merci encore !
_______________
Jeu 2 Sep 2021 - 17:26
Sunhae
Sunhae
Codeur.se
  • Date d'inscription : 30/10/2012
  • Messages : 779
De rien Gekigami  Passer un niveau - Page 5 771475364

Hello @Izusa o/
Désolée du groooos retard, tout le staff est un peu occupé avec la rentrée

De ce que je peux constater, tes codes m'ont l'air tout à fait corrects. Il y a quelques coquilles dans le CSS (fautes de frappes, oubli des fonts par défaut) mais rien de grave. Juste une petite note: pour optimiser un peu ton CSS, tu peux raccourcir certaines propriétés, notamment padding et margin:
padding/margin: haut | droit | bas | gauche;

Par exemple avec padding, au lieu de:
Code:
padding-top: 5px;
padding-right: 10px;

tu peux écrire:
Code:
padding: 5px 10px 0 0;

Sur le papier tu rempli les critères pour avoir un niveau Avancé +, mais le problème c'est que si on prend en compte seulement les codes que tu as posté ici, ça ne rempli par les critères des niveaux d'avant. Un niveau Avancé + doit remplir les conditions pour être Intermédiaire ++ ("Savoir utiliser Flexbox ; Savoir utiliser les grilles CSS") et Avancé ("les sélecteurs"); et tu ne nous en donne aucun exemple ici. En général, ce que tu fais reste très convenu; par exemple, parfois tu aurais pu faire appel à des pseudo-élément comme ::before (e.g. la ligne blanche dans le titre des catégories du thème avec LGDC) et surtout utiliser d'autres propriétés pour disposer des éléments comme flex et grid, ce qui te permettrais de faire des affichages plus complexes. Et surtout, pour remplacer les tables que tu as pu utiliser sur le forum en lien, qui sont obsolètes.

Aussi, je n'ai pas pensé à le mentionner la dernière fois, mais essayez d'utiliser plus de balises sémantiques pour une meilleure accessibilité et lisibilité (j'avoue je les utilise peu aussi, mais je suis pas forcément un exemple)(faites ce que je dis pas ce que je fais, toussa koua)

Bref. Puisque tu as démontré que tu es capable de naviguer dans les templates et les modifier -à priori- sans problèmes, je pense faire un compromis et t'accorder un niveau Intermédiaire ++, mais je t'encourage du même coup à pousser un peu plus tes connaissances -notamment en CSS- ainsi qu'évidemment les mettre à profit pour remplir les conditions de tout les niveaux qui précède Avancé + (n'hésites pas à décortiquer des LS pour te donner des idées) Very Happy
_______________


Lun 11 Oct 2021 - 21:56
Contenu sponsorisé
    _______________
    Revenir en haut