epicode
Epicode, c'est sept ans d'entraide dans la création de forums. Vous y trouverez une gamme complète de libre-service, allant du simple avatar jusqu'à l'index codé intégralement. Venez fouiller pour trouver votre bonheur ! Si jamais vous n'y parvenez pas, vous pourrez toujours commander ! Nos graphistes et codeurs sont là pour vous, pour répondre à vos demandes et vous aider dans la conception de vos forums.

Epicode, c'est une offre complète allant jusqu'au conseil sur forum. Envie d'avis sur votre contexte, d'une relecture ? Nos conseillers se feront une joie de vous aider dans ces tâches difficiles, vous permettant d'avoir un forum parfait jusqu'à la virgule près.

Pour finir, Epicode c'est aussi des animations, des jeux, des concours, des défis, avec des animateurs haut en couleurs prêt à vous embarquer dans de folles aventures. Mais surtout, Epicode, c'est avant tout une ambiance chaleureuse, un staff disponible et un forum actif ! Rejoignez-nous !
entre donc,

Page 2 sur 2 Précédent  1, 2
Aller en bas
# Re: [Facile] Exercice 4 - Fiche - Ori - le Mar 10 Sep 2019 - 11:09
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
Artemis
Modo en stage et designer
Date d'inscription : 14/01/2017
Messages : 2100


[Facile] Exercice 4 - Fiche - Ori - Page 2 Nng7
Spoiler:
[Facile] Exercice 4 - Fiche - Ori - Page 2 51Nr7
Merci Sygea ! **Merci Shigurai !
[Facile] Exercice 4 - Fiche - Ori - Page 2 J3lo
[Facile] Exercice 4 - Fiche - Ori - Page 2 Dn89
[Facile] Exercice 4 - Fiche - Ori - Page 2 Uan6
Merci Fufu :3
Merci Milou !  c: ♥️
[Facile] Exercice 4 - Fiche - Ori - Page 2 Ly4jFos
Merci xMia et Alek !  [Facile] Exercice 4 - Fiche - Ori - Page 2 3775839356
[Facile] Exercice 4 - Fiche - Ori - Page 2 Essai_Cadeau
[Facile] Exercice 4 - Fiche - Ori - Page 2 Qz09
Merci Funeral !  [Facile] Exercice 4 - Fiche - Ori - Page 2 3775839356
[Facile] Exercice 4 - Fiche - Ori - Page 2 1no3
Merci Naütilus. ! :'D
[Facile] Exercice 4 - Fiche - Ori - Page 2 Signaa10
Merci Reine des Ténèbres !  Coeur 2
[Facile] Exercice 4 - Fiche - Ori - Page 2 18041502233812811115668294
Merci Eskimo. !  Coeur

[Facile] Exercice 4 - Fiche - Ori - Page 2 447717kdoartemis
Revenir en haut
Page 2 sur 2 Précédent  1, 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum