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 : -38%
Aspirateur robot Xiaomi Roborock S7 (version 2021) en ...
Voir le deal
499 €
-30%
Le deal à ne pas rater :
OCEANIC Rafraîchisseur 4 en 1 – Ventilateur – Brumisateur – ...
79.99 € 114.95 €
Voir le deal

Aller en bas
Clyde
Clyde
Ancien.ne du staff
  • Date d'inscription : 28/03/2013
  • Messages : 1577
Bonjour à tous !
Pour ne pas laisser le monopole du schéma de la PA à Batty ( ♥️ ) j'ai décidé de poster également un schéma ♥️
Je n'ai pas mis de hover (mis à part celui des partenariats), mais vous pouvez totalement en mettre si vous voulez ! Il y en aura un obligé pour le staff, mais je vous laisse choisir !
► les trois rectangles en haut à gauche : le staff
► les six carrés à droite : prédéfinis
► le rectangle en bas à droite : les news
► les trois carrés avec 1 2 3 : les top sites

Je n'ai pas d'image spécifique pour ça, utilisez les vôtres !

[Intermédiaire] Page d'accueil #1 - Aed 6lG2nDW
_______________
Jeu 24 Déc 2015 - 0:22
Invité
Anonymous
Invité
    Hey !

    Donc comme je te l'ai dis dans mon mp, j'ai codé le joli schéma que tu proposais, ce n'est pas à 100% ressemblant au niveau de certaines choses, mais c'est le mieux que j'ai pu faire. C'est la seconde page d'accueil que je code, donc il y a sûrement quelques erreurs.



    Bonne journée ! ~
    _______________
    Mar 2 Fév 2016 - 13:41
    Little Gecko
    Little Gecko
    Ancien.ne du staff
    • Date d'inscription : 24/08/2013
    • Messages : 766
    Bonsoir bonsoiiiir!
    Voici ma PA x3
    Spoiler:

    _______________
    Mar 2 Fév 2016 - 20:13
    Clyde
    Clyde
    Ancien.ne du staff
    • Date d'inscription : 28/03/2013
    • Messages : 1577
    Yai, nice work !
    Désolée du coup Estyriale, j'ai pas répondu, mais du coup le problème est réglé ! Je pense que tu aurais peut-être du agrandir la taille des news, mettre le texte en arial (mais bon, c'est un détail) et ajouter un padding sur le contexte, pour aérer le tout :)
    Et Little Gecko, rien à redire ! C'est superbe, et j'aime beaucoup l'effet que tu as mis aux Tops Sites (après, je vois que ton code est plutôt complet, donc il aurait fallu mettre des liens sur les prédefs et sur les tops sites mais bon c'est un détail)

    Juste, je vois que vous l'avez fait en tableau (et je comprends), mais mon grand maître du codage (aka Nirvage) m'a appris qu'il fallait mieux faire avec des float et des margin plutôt qu'avec des table. MAIS BON C'EST PAS SI GRAVE QUE CA, bravo les petits chats ♥️
    _______________
    Ven 12 Fév 2016 - 23:27
    Invité
    Anonymous
    Invité
      Hey !

      C'est vrai qu'en y regardant de plus près, les news sont un peu petites donc je vais voir pour modifier ça et rajouter le padding au contexte ! Ehehe, j'avoue que le mieux c'est les margin et float, mais j'avais envie de me faire un petit entraînement mélangeant page d'accueil et tableaux !



      J'espère que tu feras d'autres schémas. [Intermédiaire] Page d'accueil #1 - Aed 3775839356
      _______________
      Dim 14 Fév 2016 - 19:23
      Little Gecko
      Little Gecko
      Ancien.ne du staff
      • Date d'inscription : 24/08/2013
      • Messages : 766
      Ooohw cool! Merci j'ai adoré faire ce schéma !
      Et oui c'est vrai j'ai pas pensé à faire de floats & margin o/
      _______________
      Sam 20 Fév 2016 - 11:52
      Khendra
      Khendra
      Newbie
      • Date d'inscription : 02/01/2020
      • Messages : 43
      Hello !

      Voilà ma version ici : https://codepen.io/Cendre/pen/yLyPwPv [Intermédiaire] Page d'accueil #1 - Aed 665834366
      _______________
      Sam 4 Jan 2020 - 18:08
      Lzzy
      Lzzy
      Newbie
      • Date d'inscription : 18/02/2020
      • Messages : 9
      Et voilà ma version :



      Je n'ai pas retrouvé les bonnes couleurs et la vraie police :/
      _______________
      Dim 8 Mar 2020 - 12:11
      Artemis
      Artemis
      Admin & serial codeuse
      • Date d'inscription : 14/01/2017
      • Messages : 2850
      Coucou vous deux !
      Je viens "corriger" vos codes, même si je n'ai pas grand-chose à redire car vous vous êtes très bien débrouillé. Miam

      @Khendra : je trouve que ton code est très propre, ça fait plaisir de voir des balises sémantiques (même si t'aurais pu mettre une balise p pour le contexte mais je chipote 8DD) ! La seule chose qui me turlupine, c'est la présence de display: inline-block sur des blocs de toute façon placés avec le flexbox...? Essaye de les retirer, tu verras que rien ne change puisque leur bloc parent les place déjà. c: Sinon, c'est parfait ! Continue comme ça et n'hésite pas à faire d'autres exercices. ♥

      @Lzzy : Je crois que la vraie police était Oswald (tu peux la trouver sur googlefont). :3 Ceci dit, je trouve que tu te débrouilles super bien ! Personnellement, je pense que les PA sont plus difficiles à coder que des templates, car il y a beaucoup plus d'éléments à placer, et tu t'en es super bien sortie. c: J'ai quelques petites remarques cependant, juste de la syntaxe et un conseil, rien de bien transcendant mais ça te permettra de perfectionner tes prochains codes !

      J'ai vu passer des valeurs du type

      Code:
      top: 0px;
      left: 0px;
      width: 175px;
      padding: 9px 0px;

      Note que, quand la valeur est de 0 pixels, tu n'as pas besoin de préciser le "px", 0 étant une valeur nulle. Tu pouvais donc écrire ceci

      Code:
      top: 0;
      left: 0;
      width: 175px;
      padding: 9px 0;

      sans que ça n'altère quoique ce soit. C'est plus correct d'écrire ainsi. c:

      Et enfin, je te conseille de jeter un coup d'oeil à ce tutoriel : https://www.epicode-entraide.com/t12650-le-positionnement-avec-display-flexbox
      Je vois en effet que tu positionnes à l'aide du inline-block (ce qui est tout à fait correct soit dit en passant), mais n'hésite pas à te plonger dans des méthodes de positionnement plus récentes et plus pratiques ! Le flexbox peut t'épargner bien des lignes de codes, et vu le niveau que tu sembles avoir, tu m'as l'air tout à fait prête à sauter le pas. [Intermédiaire] Page d'accueil #1 - Aed 3775839356
      _______________


       
      Lun 9 Mar 2020 - 12:35
      Ayfoth
      Ayfoth
      Newbie
      • Date d'inscription : 27/10/2020
      • Messages : 47
      Coucou je te rends un code hésite pas à me corriger j'ai peut etre trop abusé du position absolute xD

      Aperçu
      Rajout d'un hover sur les liens

      CSS
      Code:

      <style>
      #pa{
          
          --bleu-foncé: #71899e;
          --jaune: #e5e6c9;
          --bleu-clair: #afd2df;
          width: 850px;
          height: 650px;
          overflow: hidden;
          background-color: #99a7b3;
      }

      #bienvenue{
          width: 600px;
          height: 40px;
          position: absolute;
          text-align: center;
          color: var(--bleu-foncé);
          text-transform: uppercase;
        
      }

      #bienvenue #bloc-bleu-foncé{
      width: 35%;
      height: 100%;
      background-color: var(--bleu-foncé);
      position: absolute;
      top: 0px;
      }

      #bienvenue #bloc-jaune{
          width: 70%;
          height: 100%;
          background-color: var(--jaune);
          position: absolute;
          top: 0px;
          left: 36%;
      }

      #bloc-jaune h1{
          position: relative;
          top: -50%;
      }

      #bienvenue #bloc-bleu-clair{
      width: 35%;
      height: 100%;
      background-color: var(--bleu-clair);
      position: absolute;
      top: 0px;
      left: 106.6%;
      }

      #staff{
          width: 162px;
          height: 300px;
         position: absolute;
         top: 60px;
          left: 2%;
        
      }

      #staff #staff1 {
          text-transform: uppercase;
          text-align: center;
            display: block;
            width: 100%;
            height: 25%;
            background-image: url('https://via.placeholder.com/160x75');
      }

      #staff #staff2 {
          text-transform: uppercase;
          text-align: center;
            display: block;
            width: 100%;
            height: 25%;
            background-image: url('https://via.placeholder.com/160x75');
      }

      #staff #staff3{
          text-transform: uppercase;
          text-align: center;
            display: block;
            width: 100%;
            height: 25%;
            background-image: url('https://via.placeholder.com/160x75');
      }

      #staff  p{
          position: relative;
          top: 25%;
          opacity: 0;
          color: var(--jaune);
          font-weight: bold;
      }

      #staff p::first-line{
          font-size: 150%;
      }

       #staff  #staff3:hover {
          background-image: none;
      }

      #staff  #staff1:hover {
          background-image: none;
      }

      #staff  #staff2:hover {
          background-image: none;
      }

      #staff  #staff1:hover p, #staff2:hover p, #staff3:hover p{
          opacity: 1;
      }

      #staff a{
          text-decoration: none;
          color: var(--jaune);
          font-weight: bold;
      }




      #contexte{
          width: 435px;
          height: 280px;
          overflow: auto;
           margin-right: 3%;
          background-color: var(--jaune);
          position: absolute;
          top: 60px;
          left: 15%;
          text-align: justify;
          color: var(--bleu-foncé);
          padding: 10px;
          scrollbar-width: none;
      }

      #predefini{
          width: 170px;
          height: 300px;
          position: absolute;
          top: 60px;
          right: 37%;
      }

      #predefini img{
          margin-bottom: 10px;
          margin-left: 3px;
          
          
      }



      #liens{
          width: 820px;
          height: 50px;
          overflow: auto;
          background-color: var(--jaune);
          position: absolute;
          bottom: 220px;
          left: 2%;
          text-transform: uppercase;
          color: var(--bleu-foncé);
          font-weight: bold;
          font-size: 30px;
          text-align: center;
          padding-top: 20px;
          text-shadow: 1px 1px 1px var(--bleu-foncé);
      }

      #liens a{
          text-decoration: none;
          color: var(--bleu-foncé);
          
      }

      #liens a:hover {
          color: var(--bleu-clair);
      }

      #news{
          width: 310px;
          height: 140px;
          background-color: var(--bleu-foncé);
          overflow-x: hidden;
          overflow-y: auto;
          scrollbar-width: none;
          position: absolute;
          bottom: 75px;
          left: 2%;
      }

      #news li{
          list-style-type: none;
          color: var(--jaune);
          font-weight: bold;
          position: relative;
          top: -10px;
          left: -25px;
      }

      #topsite{
          width: 500px;
          height: 140px;
          position: absolute;
          bottom: 75px;
          left: 25.8%;
      }

      #topsite img{
          width: 140px;
          height: 140px;
          margin-right: 2px;
          margin-left: 20px;
      }

      #partenaires{
          width: 820px;
          height: 70px;
          background-color: var(--bleu-clair);
          position: absolute;
          bottom: 2px;
          left: 2%;
          overflow-y: auto;
          scrollbar-width: none;
          display: inline;
      }

      #partenaires img{
          margin-top: 10px;
          margin-left: 2px;
          
         -webkit-animation: slide-out-left 10s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
                 animation: slide-out-left 10s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;

      }

      /* ----------------------------------------------
       * Generated by Animista on 2020-11-11 9:45:17
       * Licensed under FreeBSD License.
       * See http://animista.net/license for more info.
       * w: http://animista.net, t: @cssanimista
       * ---------------------------------------------- */

      /**
       * ----------------------------------------
       * animation slide-out-left
       * ----------------------------------------
       */
       @-webkit-keyframes slide-out-left {
          0% {
          -webkit-transform: translateX(0);
                  transform: translateX(0);
          opacity: 1;
        }
       50% {
          -webkit-transform: translateX(-1000px);
                  transform: translateX(-1000px);
          opacity: 1;
        }
        100%{
          -webkit-transform: translateX(0);
                  transform: translateX(0);
          opacity: 1;
        }
      }
      @keyframes slide-out-left {
        0% {
          -webkit-transform: translateX(0);
                  transform: translateX(0);
          opacity: 1;
        }
       50% {
          -webkit-transform: translateX(-1000px);
                  transform: translateX(-1000px);
          opacity: 1;
        }
        100%{
          -webkit-transform: translateX(0);
                  transform: translateX(0);
          opacity: 1;
        }
      }

      </style>

      HTML
      Code:

      <div id="pa">
       <div id="bienvenue">
        <div id="bloc-bleu-foncé"></div>
        <div id="bloc-jaune"><h1>Bienvenue !</h1></div>
        <div id="bloc-bleu-clair"></div>
       </div>
       <div id="staff">
           <span id="staff1"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
           <span id="staff2"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
           <span id="staff3"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
       </div>
       <div id="contexte">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, massa convallis facilisis rhoncus, dui massa commodo nisl, quis mollis nibh odio in lectus. Vestibulum pellentesque porttitor odio a tristique. Praesent scelerisque ullamcorper purus, in tincidunt nunc ultrices in. Aliquam vitae mollis nunc, tempus congue lectus. Duis mi neque, hendrerit ut egestas varius, faucibus sit amet turpis. Donec aliquet, felis ac laoreet pellentesque, est metus commodo metus, sed accumsan nisi ligula ut tortor. Etiam id condimentum eros. Mauris ornare, felis id facilisis iaculis, augue metus aliquet lectus, at aliquet mauris enim eget mauris. In eu orci ac nulla pellentesque iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, massa convallis facilisis rhoncus, dui massa commodo nisl, quis mollis nibh odio in lectus. Vestibulum pellentesque porttitor odio a tristique. Praesent scelerisque ullamcorper purus, in tincidunt nunc ultrices in. Aliquam vitae mollis nunc, tempus congue lectus. Duis mi neque, hendrerit ut egestas varius, faucibus sit amet turpis. Donec aliquet, felis ac laoreet pellentesque, est metus commodo metus, sed accumsan nisi ligula ut tortor. Etiam id condimentum eros. Mauris ornare, felis id facilisis iaculis, augue metus aliquet lectus, at aliquet mauris enim eget mauris. In eu orci ac nulla pellentesque iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, massa convallis facilisis rhoncus, dui massa commodo nisl, quis mollis nibh odio in lectus. Vestibulum pellentesque porttitor odio a tristique. Praesent scelerisque ullamcorper purus, in tincidunt nunc ultrices in. Aliquam vitae mollis nunc, tempus congue lectus. Duis mi neque, hendrerit ut egestas varius, faucibus sit amet turpis. Donec aliquet, felis ac laoreet pellentesque, est metus commodo metus, sed accumsan nisi ligula ut tortor. Etiam id condimentum eros. Mauris ornare, felis id facilisis iaculis, augue metus aliquet lectus, at aliquet mauris enim eget mauris. In eu orci ac nulla pellentesque iaculis.
       </div>
       <div id="predefini">
       <p> <a href=""><img src="https://via.placeholder.com/80x80" /></a> <a href=""><img src="https://via.placeholder.com/80x80" /></a><br />
         <a href=""><img src="https://via.placeholder.com/80x80" /></a> <a href=""><img src="https://via.placeholder.com/80x80" /></a><br />
         <a href=""><img src="https://via.placeholder.com/80x80" /></a> <a href=""><img src="https://via.placeholder.com/80x80" /></a></p>
       </div>
       <div id="liens">
      <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a>
       </div>

       <div id="news">
      <ul><li>xx.xx.xx : ceci est une news </li>
          <li>xx.xx.xx : ceci est une news</li>
          <li>xx.xx.xx : ceci est une news</li>
          <li>xx.xx.xx : ceci est une news</li>
          <li>xx.xx.xx : ceci est une news</li>
          <li>xx.xx.xx : ceci est une news</li>
          <li>xx.xx.xx : ceci est une news</li></ul>
       </div>

       <div id="topsite">
      <a href=""><img src="https://via.placeholder.com/140x140" /></a><a href=""><img src="https://via.placeholder.com/140x140" /></a><a href=""><img src="https://via.placeholder.com/140x140" /></a>
       </div>
       <div id="partenaires">
      <img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" />
       </div>
      </div>
      _______________
      Mer 11 Nov 2020 - 9:58
      Clyde
      Clyde
      Ancien.ne du staff
      • Date d'inscription : 28/03/2013
      • Messages : 1577
      Coucou,
      Je sais pas coder donc je peux pas te corriger, par contre je peux te signaler que ça déconne quelque part avec un screenshot : [Intermédiaire] Page d'accueil #1 - Aed NGqqA7f
      _______________
      Mer 11 Nov 2020 - 12:47
      Ayfoth
      Ayfoth
      Newbie
      • Date d'inscription : 27/10/2020
      • Messages : 47
      Han chrome aime pas mes positionnement apparemment.
      _______________
      Mer 11 Nov 2020 - 12:54
      Artemis
      Artemis
      Admin & serial codeuse
      • Date d'inscription : 14/01/2017
      • Messages : 2850
      Bonjour !
      J'ai jeté un oeil à ton code, donc je viens te faire un petit retour !
      L'erreur principale que je vois et qui explique le bug que rencontre Clyde, c'est que tu n'as pas attribué de position relative à ton bloc conteneur. Si tu oublies de faire ça, les blocs positionnés en absolus vont se placer par rapport  au body, qui lui dépend totalement de la taille de l'écran de chacun !

      Code:
      #pa {
      --bleu-foncé: #71899e;
          --jaune: #e5e6c9;
          --bleu-clair: #afd2df;
          width: 850px;
          height: 650px;
          overflow: hidden;
          background-color: #99a7b3;
          position: relative;
      }

      De cette manière, il faut revoir tous les positionnements pour qu'ils collent à leur bloc parent...
      Comme je te l'ai expliqué sur le Discord, on ne code habituellement  pas ce genre de chose avec la méthode relative/absolute, qui est réservée pour des éléments qu'on sort délibérément du flux. Je comprends que tu veuilles t'entraîner là-dessus, mais cela aurait été davantage pertinent d'en profiter pour travailler le z-index, qui est une des fonctionnalités inhérente à ce mode de positionnement, et que cette maquette-ci ne permet pas de faire. Sad

      Pour le reste, ça m'a l'air pas mal ! Tu sembles connaître les sélecteurs de base. Ca manque de propreté niveau HTML (les blocs qui servent de deco, j'aurais codé ça avec des before et after pour éviter d'encombrer le HTML qui fait seulement office de balisage, normalement), mais je vois que tu connais les balises et leur sémantique. Continue comme ça ! ♥
      _______________


       
      Jeu 12 Nov 2020 - 16:39
      'Christa
      'Christa
      Codeur.se
      • Date d'inscription : 28/10/2018
      • Messages : 557
      Hello :)

      A noter également, pour accompagner les remarques d'Artémis, qu'en HTML on essaie de séparer le fond de la forme. Il s'agit donc de nommer les éléments non pas par leur apparence, mais par leur fonction, à quelques exceptions près.

      Pour expliquer plus clairement, ces "bloc-bleu-clair" et autres "bloc-jaune", que se passe-t-il si tu décides soudainement de changer les couleurs ? On a alors une disparité entre le nom des blocs, et leur aspect. Et renommer ces éléments impliquerait de modifier tant le CSS que le HTML, ce qui prend un peu de temps que l'on aurait pu économiser.

      En ce qui concerne ton usage des classes et identifiants, tu abuses un peu trop des identifiants. Souviens toi qu'un identifiant ne peut être utilisé qu'une seule fois dans toute une page. Certes, rien n'interdit de s'en servir si tu es sûr et certain qu'ils ne seront utilisés qu'une fois (encore qu'il me semble que le validateur HTML ne laisserait pas passer leur abus), mais les pratiques CSS recommandent généralement de privilégier les classes et d'utiliser les identifiants pour des éléments prédominants, qui ne seront présents qu'une seule et unique fois sur une page.

      C'est d'autant plus important qu'en CSS on essaie d'éviter de se répéter. Si plusieurs éléments ont exactement la même apparence, tu peux te contenter d'une classe commune (et peut-être de classes additionnelles pour ajouter juste un détail).

      Autre pratique importante : On ne place jamais un élément block dans un élément inline (en ligne) ;  pour le dire de façon imagée, ça reviendrait à vouloir placer une boite à l'intérieur d'une feuille de papier, alors qu'en principe ça devrait être l'inverse. Par exemple, l'élément html <span> est un élément inline générique. Tu ne peux donc pas y placer de paragraphes, qui sont des blocs. C'est sémantiquement incorrect et ta page ne passerait donc pas la validation HTML.

      Ainsi, dans le cas du staff par exemple :
      Code:
      <div id="staff">
           <span id="staff1"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
           <span id="staff2"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
           <span id="staff3"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
       </div>
      Tu pourrais modifier par ceci :
      Code:
      <div class="listeStaff">
           <div class ="itemStaff staff1"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></div>
           <div class ="itemStaff staff2"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></div>
           <div class ="itemStaff staff3"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></div>
       </div>

      Avec le CSS qui deviendrait ceci :
      Code:
      .listeStaff{
            width: 162px;
            height: 300px;
           position: absolute;
           top: 60px;
            left: 2%;
        }
        
        .itemStaff {
            text-transform: uppercase;
            text-align: center;
              display: block;
              width: 100%;
              height: 25%;
              background-image: url('https://via.placeholder.com/160x75');
        }
        
      .itemStaff  .staff1 {  background-image: url('https://via.placeholder.com/160x75'); }
      .itemStaff  .staff2 {  background-image: url('https://via.placeholder.com/160x75'); }
      .itemStaff  .staff3 {  background-image: url('https://via.placeholder.com/160x75'); }

      Je suis aussi étonnée que d'un côté tu ait fait ceci :
      Code:
      #staff  #staff3:hover {
            background-image: none;
        }
        
        #staff  #staff1:hover {
            background-image: none;
        }
        
        #staff  #staff2:hover {
            background-image: none;
        }
      Donc, répétition des mêmes lignes encore et encore, et juste après :
      Code:
      #staff  #staff1:hover p, #staff2:hover p, #staff3:hover p{
            opacity: 1;
        }
      Là tu as bien pensé à indiquer que tu ciblais plusieurs éléments différents ayant les mêmes propriétés !

      Avec mon exemple, ça se raccourcirait d'autant plus :
      Code:
      .itemStaff:hover { background-image: none; }
      .itemStaff:hover p { opacity : 1; }

      D'ailleurs, au vu de mon réflexe d'utiliser les mots "liste" et "item" dans mon nommage, sans doute que tu aurais pu utiliser une liste à cet endroit ^^

      Je m'interroge aussi sur la présence de ce scrollbar-width: none; dans une de tes définitions. En premier lieu, ça n'affecte à ce jour que firefox, et pourquoi tu voudrais que la largeur de la scrollbar soit inexistante ?

      Enfin, le nom d'une classe ne doit jamais comporter d'accents !

      En résumé, pour ce qui concerne les petites erreurs :

      • Comme Artemis l'a dit, les éléments positionnés en absolu sont positionnés "par rapport" à un bloc parent qui est lui-même positionné. Généralement, on donne un positionnement relatif au bloc parent sans le sortir du flux (dans notre cas, le bloc d'identifiant #pa gagnerait donc à se voir attribuer un position:relative; )
      • On ne met jamais d'accent au nom d'une classe (ni de caractères spéciaux)
      • On ne place jamais d'élément bloc (comme <p> ou <div>) dans un élément inline (comme <span> ou <strong>)


      Et pour ce qui concerne l’acquisition de meilleures habitudes de codage :

      • Il est d'usage de privilégier les classes aux identifiants. Ton code n'est pas incorrect pour autant, mais c'est déconseillé d'utiliser des identifiants quand tu peux te contenter de classes.
      • Assure-toi toujours d'éviter la duplication de code au maximum, le CSS te permet de factoriser les éléments communs puis de faire au cas par cas si besoin est.
      • Il vaut mieux nommer les classes (ou identifiants) par la fonction de l'élément dans le code, et non par son aspect, ainsi si tu changes l'aspect, le nom de la classe ne deviendra pas obsolète.
      • Essaie de mettre à profit les éléments HTML existants. Si tu crées une liste d'objets similaires (partenaires, staff, liens de navigation), ça peut être avisé d'utiliser une liste HTML. Si tu affiche des titres, pourquoi ne pas utiliser les balises de titre ?


      Voilà voilà !
      _______________


      Illustration avatar ©️YuumeiArt | Voir l'original
      [Intermédiaire] Page d'accueil #1 - Aed 7WZJTfh

      Ven 13 Nov 2020 - 11:39
      Contenu sponsorisé
        _______________
        Revenir en haut