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 : -44%
PHILIPS HD6563/64 – Machine à café ...
Voir le deal
49.99 €

Aller en bas
Artemis
Artemis
Admin & serial codeuse
  • Date d'inscription : 14/01/2017
  • Messages : 3015
Coucou @Sora !
Désolée pour le temps de réponse, je n'avais pas vu le nouveau message. :c

Ton HTML est plutôt propre pour une débutante, c'est un bon début !
Ce qui me saute aux yeux, néanmoins et au premier abord, c'est la petite maladresse dans les balises sémantiques ; tu n'en utilises pas vraiment quand il faudrait, et lorsque tu le fais, notamment pour les balises h2 et h5, c'est assez approximatif. [Facile] Exercice 4 - Fiche - Ori - Page 2 885843852 En soit, il faut privilégier l'ordre hiérarchique des balises ; tu peux commencer par un h2 si tu le souhaites, mais il n'est pas vraiment conseillé de poursuivre directement avec un h5, il faut aller dans l'ordre. c:

Les balises de descriptions peuvent également être remplacées par des balises p ; tu verras, c'est plus facile de cibler ensuite tes éléments via le CSS quand tu prends soin de diversifier les balises. Tu limites les class et rends ton code plus propre.

Le code en lui-même, maintenant :
Bien que le rendu soit là, tu t'es vraiment compliqué la vie. xDD
Le fait de placer l'icon en tant que background est une manière de faire, mais si tu souhaites une image différente pour chaque "catégorie", comment tu fais ? De même, tu n'as pas besoin de position: absolute pour coder quelque chose qui peut l'être en deux gros blocs et un petit float des familles. Voilà comment je l'aurais codé :

HTML
Code:
<div class="bloc_content">
 <img src="https://66.media.tumblr.com/20c9fba0599713bb7affccc3c8bb17f9/4a601ffad93dea84-58/s128x128u_c1/d5ac75c5f849db1d940f73a7d453564ede727fcc.pnj" alt="icon"/>
 <div>
 <span>Nom créature ou objet</span>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra elit id arcu mattis, vitae sodales nunc rhoncus. Aliquam eu metus risus. Quisque bibendum a ex non iaculis. Cras elementum, nisl sed ultricies mattis, sem diam molestie ex, congue gravida enim mauris vel lorem. Cras velit orci, sagittis sed nibh ac, aliquet gravida orci.
 </p>
 </div>
</div>

Tu vois ? Le HTML est très court ; j'ai un block qui contient tout, et des balises qui décrivent strictement leur contenu.

CSS
Code:

.bloc_content {
  width: 500px;
  height: 100px;
}

.bloc_content > img {
  float: left;
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}

.bloc_content > div {
  width: 380px;
  height: 100;
  float: right;
}

.bloc_content > div > span {
  display: block;
  background-color: #a3a3c7;
   height: 30px;
   text-align: center;
   outline: 2px solid white;
  outline-offset: -4px;
  color: white;
  font: 12px arial;
  line-height: 29px;
}

.bloc_content > div > p {
  height: 65px;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px;
  margin-top: 5px;
  overflow: auto;
  text-align: justify;
  font: 12px calibri;
  line-height: 12px;
}

Alors évidemment, tu débutes, c'est pour ça que tu ne connais pas le sélecteur que j'utilise.
Tu peux néanmoins t'apercevoir que je cible ainsi les balises et dépouille le CSS de class inutiles c:
Dans le fond, tu peux constater que j'ai attribué un float left à l'image, et un float right au deuxième bloc, qui lui englobe le span contenant "Nom créature ou objet" et le paragraphe de description. A noter que j'ai mis un span pour le transformer en bloc, tu dois te demander pourquoi [Facile] Exercice 4 - Fiche - Ori - Page 2 885843852 C'est une manière de faire ; j'estime que quand c'est une toute petite phrase de rien du tout, dans le HTML je préfère la considérer comme un span, quitte à modifier un peu ça dans le CSS pour qu'elle soit mise en forme correctement. Tu aurais pu mettre une div sans souci c:

En fait, quand tu codes, il faut que tu réfléchisses en terme de bloc. Tout le temps.
Quand tu vois une maquette, essaye de rassembler les éléments dans des grands blocs, où tu vas pouvoir placer les plus petits ; c'est la base du positionnement ! c: Ca t'évitera ainsi des marges ou des position: absolute inutiles, et crois-moi, ça te permettra de coder plus vite et plus efficacement :3

Voilà !
N'hésite pas si tu as des questions. ♥
A l'avenir, si tu fais un autre exercice, n'hésite pas non plus à me taguer si besoin, histoire que je vois quand tu postes quelque chose et que je corrige au plus vite. Des bisous !  [Facile] Exercice 4 - Fiche - Ori - Page 2 3775839356
_______________


 
Mar 10 Sep 2019 - 11:09
Kietah
Kietah
Newbie
  • Date d'inscription : 12/11/2020
  • Messages : 13
Bonjour à tous !  plz

Merci pour ce petit exercice : c'est un peu étrange pour moi de présenter mon code, étant débutante (j'ai fait quelques essais depuis un peu plus d'un mois que je m'y suis sérieusement mise mais j'aimerais reprendre de 0 et être contrôlée à chaque étape), mais je m'y suis bien amusée !
La prochaine fois, je me chronométrerai en ne faisant que cela pour avoir une idée du temps que je mets en tant que débutante.

Avant toute chose, je voulais indiquer mes intentions pendant le codage :

  • D'abord, je voulais transférer le maximum possible dans le CSS (d'où la trouzaine de class) pour n'avoir que l'URL des images à changer dans le HTML ;
  • Ensuite, il y a une petite div background qui traîne juste pour visuellement avoir le fond proposé en modèle (aucun réel rapport avec le code, c'est pour ça qu'il est écarté) ;
  • J'ai codé sur Codepen, pour l'aperçu direct, et je sais qu'il n'est pas transposable tel quel sur FA et qu'il faut faire des modifications notamment de marges internes (pour avoir récemment fait le test, c'est un enfer) ;
  • J'ai essayé le plus possible de coller au modèle ;
  • Je n'ai pas cherché à mettre la scrollbar en forme ;
  • J'ai glissé des "id" sur chaque bloc pour que je puisse identifier leurs propriétaires, mais je ne sais pas si ça ne sert qu'à ça. J'ai beau essayé de me renseigner, l'"id" reste un mystère pour moi ;
  • Le codage en tableau m'a paru plus simple qu'en float, mais je peux essayer aussi s'il faut ;
  • J'ai quand même lu et essayé de comprendre les remarques qui ont été précédemment faites dans ce post (mais je n'ai ni trop lu, et surtout pas copié, les codes : j'ai vraiment joué le jeu en codant de 0). J'ai découvert comme ça le "h1.nom" avec lequel j'ai bidouillé mais que je ne connaissais pas avant.


Je crois que j'ai tout dit, voici les codes :

CSS :
Code:
.fiche_header{
  margin: 5px auto;
  width:489px;
  background-color:#a3a3c7;
  border: 1px solid #ffffff;
  outline: 5px solid #a3a3c7;
  text-align:center;
  text-transform:uppercase;
  font-weight:normal;
  font-family:Tahoma;
  color:#ffffff;
}

h1.titreexquatre{
  font-weight:normal;
  font-size:14px;
}

h2.titreexquatre{
  margin-top:-6px;
  font-weight:normal;
  font-size:11px;
}

.fiche_boder{
  margin: 10px auto;
  padding-top:5px;
  width:500px;
  height:auto;
  background-color:#ffffff;
}

.table_corps{
  width:inherit;
  border-spacing:20px 8px;
  text-align:justify;
  font-weight:normal;
  font-family:Tahoma;
  font-size:10px;
}

.table_image{
  width:110px;
  height:110px;
  outline: 5px solid #a3a3c7;
  background-color:#a3a3c7;
  white-space:pre-line;
  text-align:center;
  text-transform:uppercase;
  color:#ffffff;
}

.image{
  object-fit: cover;
  width:100px;
  height:100px;
}

.table_titre{
  height:17px;
  background-color:#a3a3c7;
  border: 1px solid #ffffff;
  outline: 5px solid #a3a3c7;
  text-align:center;
  text-transform:uppercase;
  font-size:12px;
  color:#ffffff;
}

p.table_content{
  vertical-align:top;
  height:65px;
  white-space:pre-line;
  overflow-y:auto;
}

.fiche_footer{
  vertical-align:bottom;
  margin-top:10px;
  height:15px;
  background-color:#a3a3c7;
  content:"";
}

HTML :
Code:
<div style="background-color:#EAE9EB">
    


<div class="fiche_header">
  <h1 class="titreexquatre">Un joli titre ici</h1>
  <h2 class="titreexquatre">Et un petit sous titre pour faire beau</h2>
</div>
<div class="fiche_boder"><table class="table_corps" id="objet1">
      <tr>
        <td rowspan="2" class="table_image"><img src="https://" alt="Image 100*100" class="image"/></td>
        <td class="table_titre">Nom créature ou objet</td>  
      </tr>
      <tr>
        <td><p class ="table_content">Description du monstre ou de l'objet ici.</p></td>  
      </tr>  
    </table>
    <table class="table_corps" id="objet2">
      <tr>
        <td rowspan="2" class="table_image" class="image"><img src="https://" alt="Image
          100*100"/></td>
        <td class="table_titre">Nom créature ou objet.</td>  
      </tr>
      <tr>
        <td><p class ="table_content">Description du monstre ou de l'objet ici.</p></td>  
      </tr>  
    </table>
    <table class="table_corps" id="objet3">
      <tr>
        <td rowspan="2" class="table_image" class="image"><img src="https://" alt="Image
          100*100"/></td>
        <td class="table_titre">Nom créature ou objet.</td>  
      </tr>
      <tr>
        <td><p class ="table_content">Description du monstre ou de l'objet ici.</p></td>  
      </tr>  
    </table>
    <table class="table_corps" id="objet4">
      <tr>
        <td rowspan="2" class="table_image" class="image"><img src="https://" alt="Image
          100*100"/></td>
        <td class="table_titre">Nom créature ou objet.</td>  
      </tr>
      <tr>
        <td><p class ="table_content">Description du monstre ou de l'objet ici.</p></td>  
      </tr>  
    </table>
    <table class="table_corps" id="objet5">
      <tr>
        <td rowspan="2" class="table_image" class="image"><img src="https://" alt="Image
          100*100"/></td>
        <td class="table_titre">Nom créature ou objet.</td>  
      </tr>
      <tr>
      <td><p class ="table_content">Description du monstre ou de l'objet ici.</p></td>    
      </tr>  
    </table>
    <div class="fiche_footer"></div>  
  </div>

  
</div>

Edit : j'ai mis les différents codes sur un forum test que j'ai créé aujourd'hui, vous les retrouverez ici.

Merci à la personne qui prendra le temps de le lire et le commenter, c'est très gentil et je lui en suis très reconnaissante Coeur 2


_______________
Ven 13 Nov 2020 - 23:40
Solelh
Solelh
Newbie
  • Date d'inscription : 20/06/2021
  • Messages : 9
Salut ! J'up le sujet du coup apparemment haha
Si vous avez des suggestions ou des conseils, je prend avec grand plaisir !

J'ai pris la liberté de modifier la taille des images (150*150 au lieu de 100*100), sinon j'ai essayé de rester fidèle à la maquette.



Merci beaucoup~
_______________
Mer 23 Juin 2021 - 8:55
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 733
Hello !

Quand je vois qu'on a tendance à ne pas remarquer les gens qui font des exercices, je me dis qu'il faudrait revoir ce système [Facile] Exercice 4 - Fiche - Ori - Page 2 3313101865 Ça me désole qu'on laisse des gens dans l'expectative quand ils veulent un avis :'( Désolée @Kietah, si tu veux toujours un avis après tout ce temps, n'hésite pas à te manifester !

Au moins, pour cette fois, je suis là !

Alors, niveau rendu pur et simple, en tant qu'utilisatrice de Firefox, je constate que le contenu des différents blocs dépasse en largeur au point de créer une barre de défilement horizontale. J'ai vérifié sur Edge (qui utilise le même moteur de rendu que Chrome) et ça a l'air d'être le même résultat. Est ce que c'est volontaire ? Ce n'est jamais très agréable de devoir scroller horizontalement, donc idéalement si tu peux l'éviter, n'hésite pas.

Côté code, je vois que tu as compressé ton HTML pour qu'il soit compatible avec les messages Forumactif. C'est une parenthèse, mais savais-tu que tu peux utiliser les commentaires HTML (avec <!-- et -->) pour "commenter" les sauts de ligne et rendre le code un tout petit peu plus lisible ? Ça donnerait ceci par exemple :

Ce n'est pas essentiel (et c'est un peu dangereux à utiliser si on fait pas gaffe XD) mais c'est un truc que j'aime bien enseigner aux débutants XD

Sinon, pour améliorer ton code, quelques conseils :

- Les noms de classes : Il vaut mieux essayer de ne pas utiliser des noms "génériques" comme titre ou cadre, parce qu'il se peut que ces classes soient utilisées par d'autres éléments du forum s'il est personnalisé (ou même, le code d'un autre membre XD). C'est une bonne pratique que de les préfixer ou suffixer pour les différencier du code de quelqu'un d'autre. Genre ficheSolelh-cadre par exemple.

- Les balises : Quand tu peux, essaie de mettre à profit les balises HTML plus spécialisées, comme les balises de titres , telles que <h1> ou <h2>. Tu peux facilement les personnaliser via CSS en utilisant les sélecteurs CSS. Par exemple :
Code:
<div class="maFiche"><h1>Le titre de ma fiche</h1>
Du texte dans ma fiche
</div>
Code:
.maFiche { /* propriétés du bloc */ }
.maFiche h1 { /* Propriétés de l'élément h1 à l'intérieur du bloc de classe .maFiche */ }
Dans ce code, j'aurais mis le "Un joli texte ici" avec une balise de titre (genre <h1>), un paragraphe pour le sous titre, puis j'aurais mis une balise de titre de niveau hiérarchique inférieur (genre <h2>) pour les titres des blocs "Nom créature ou objet".

- L'attribut alt des images est impératif à utiliser pour des raisons d'accessibilité. Il sert à décrire l'image si elle ne s'affiche pas, ou si elle n'est pas lisible pour les personnes malvoyantes. Du coup
Code:
<img src="https://via.placeholder.com/150" />
Devrait devenir :
Code:
<img src="https://via.placeholder.com/150" alt="Une image d'illustration" />
Par exemple.

- Les dimensions : c'est un problème qu'ont beaucoup de débutants, mais à part quelques cas spécifiques, un bloc prend toujours la largeur de son conteneur. Ce n'est donc pas nécessaire de constamment redéfinir une largeur à un bloc, c'est beaucoup plus avisé de spécifier des marges externes ! Du coup, tu pourrais par exemple donner un conteneur global à ta fiche/ton code, lui fixer une largeur, puis simplement donner aux éléments à l'intérieur des marges internes ou externes selon tes besoins (ça évite également de batailler en comptant ou non la valeur des marges internes et des bordures XD). Je pense que tu peux intégralement écrire ce code en n'utilisant qu'une seule largeur globale.

- Les polices : Lorsque tu définis une police d'écriture avec font-family , il est d'usage de toujours préciser une police générique en guise d'alternative (pour le cas où la police que tu définis n'existe pas sur l'ordinateur de la personne qui voit ton code ou ne parvient pas à être téléchargée). Donc dans ton cas, il faudra écrire : font-family: Tahoma, sans-serif;.

- A quoi servent ces bouts de code ?
Code:
position: relative;
left: 50%;
transform: translateX(-50%);
Si tu veux centrer un bloc en CSS, s'il a une largeur fixée, tu peux lui attribuer des marges (horizontales) automatiques :
Code:
.monBloc {
  width:500px;
  margin:auto;
}
Le bloc sera automatiquement centré dans ta page.

- Par contre, bien trouvé pour le position:sticky, j'y aurais pas pensé et c'est plutôt efficace !

- Bon usage également de la flexbox ^^ Un petit flex:1 pour remplacer la largeur fixe du bloc sans image devrait suffire à gérer sa largeur (il prendra tout l'espace disponible restant).

- Au niveau de l'image, je ne comprends pas ce bout de code :
Code:
.cadre img{
  display: flex;
  justify-content: flex-start;
}
Un élément qui a la propriété display:flex voit ses enfants directs devenir des éléments flexibles. En l'occurence, une image ne peut pas avoir d'enfants, vu que c'est une balise orpheline.

- Enfin, une règle primordiale en CSS, c'est de ne pas se répéter. Les différents titres ont des apparences similaires, tu pourrais mettre leurs propriétés en commun, soit en utilisant une classe commune, soit en utilisant une déclaration CSS pour rassembler les propriétés communes aux deux. Par exemple :
Code:
.titre, .cadretitre {
  outline: 2px solid #ffffff;
  outline-offset: -10px;
  background-color: #a3a3c7;
  text-transform: uppercase;
  font-family: Tahoma, sans-serif;
  color:white;
}

.titre {
  /* les propriétés spécifiques à .titre seulement */
}

.cadretitre {
  /* les propriétés spécifiques à .cadretitre seulement */
}

Voilà ! J'ai probablement manqué des détails parce que je suis un peu fatiguée en ce moment, mais je crois avoir dit tout ce qui me semblait important. Bon travail en tout cas ! Ordi
_______________


[Facile] Exercice 4 - Fiche - Ori - Page 2 14n2 [Facile] Exercice 4 - Fiche - Ori - Page 2 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Facile] Exercice 4 - Fiche - Ori - Page 2 7WZJTfh
Mer 23 Juin 2021 - 17:28
Contenu sponsorisé
    _______________
    Revenir en haut