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,

Aller en bas
Newbie
Ori
# [FACILE] Exercice 8 - Fiche - Ori - le Mar 13 Mar 2018 - 18:28
Bonjour à tous les petits et grands codeurs !

Aujourd'hui un petit schema assez simple de fiche. Si vous êtes inspirés n'hésitez pas à reprendre le schema et à le modifier pour un code plus original  [FACILE] Exercice 8 - Fiche - Ori 3775839356

La police : Arial
Couleur du texte : #8d718d
Image de fond ( modifiable ) :
ici

[FACILE] Exercice 8 - Fiche - Ori R7mh
Ori
Newbie
Date d'inscription : 07/11/2015
Messages : 97
Ancien.ne du staff
Batty
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Jeu 15 Mar 2018 - 18:55
J'avais loupé cette fiche ! Elle est trop belle je l'ajoute à la liste et voici quelque tuto qui pourrais être utile :

Les DIV et les SPAN
Le Float ou Les displays
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Fidèle au poste !
Tigrlion
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Jeu 4 Oct 2018 - 19:10
Je m'ennuyai un peu, alors j'ai fait ça :3
https://codepen.io/anon/pen/rqLNjK?editors=1000#
Tigrlion
Fidèle au poste !
Date d'inscription : 22/11/2017
Messages : 303
Ancien.ne du staff
Sun
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Mar 9 Oct 2018 - 18:26
Hello @Tigrlion :D

Ton rendu et ton code sont tops à première vue, déjà bravo pour ça :DD
Maiiiis on est ici pour s'améliorer donc je vais pointer quelques petits défauts (ce ne sont que détails à mes yeux).

1/ Pour un rendu vraiment identique à l'original, le background-position: center n'était pas l'idéal. Mais je t'avoue que j'ai chipoté pour trouvé la bonne combinaison parce que c'était pas super simple avec cette image xD Donc les paramètres optimaux sont
Code:
background-position: bottom; background-size: cover;
à la place de ton autre background-position. Le background-size: cover indique que l'image prend la largeur complète du bloc dont elle est le background (en coupant éventuellement la hauteur si elle ne correspond pas, ce qui est le cas ici).
Toujours dans le rendu exact, si jamais tu voulais aussi personnaliser la scrollbar comme sur le schéma, je te laisse aller lire ce tutoriel > http://www.epicode-entraide.com/t1964-personnalisation-de-la-srollbar

2/ Pour ton bloc de texte, il n'était pas nécessaire d'utiliser une div + un p, le p aurait suffi seul, en lui ajoutant du coup ton background, ta color, ton font-family et ton height. D'ailleurs au passage, en choisissant de séparer la mise en forme du bloc et du p, il aurait été judicieux de le faire avec tes paramètres également, et donc de mettre color et font-family dans le p [FACILE] Exercice 8 - Fiche - Ori 3313101865
Et du coup, pour l'espace entre le haut de ton texte et le bord du bloc, tu pourras jouer sur le padding (qui marche comme les margin, cad padding: haut droite bas gauche). Et, pour ne pas devoir régler la taille de ton bloc en fonction de ces paddings, il te suffit d'ajouter le paramètre 'box-sizing: border-box;' Ce paramètre dit en fait à ton bloc d'adopter le width et le height que tu lui as donné sans y ajouter la taille de ses paddings et bordures (ce qu'il fait par défaut).

3/ Concernant ton titre et ton feat, les positionner à l'aide d'un inline-block plutôt qu'avec des positionnements relative et absolute t'aurait, à mon avis, simplifié la vie (d'autant plus que la div générale t'aurait été bien inutile dans ce cas). Je te propose d'aller consulter ce tutoriel > http://www.epicode-entraide.com/t12650-positionnement-avec-display pour obtenir plus d'informations à ce sujet x)
Il me semble également qu'il aurait été utile de leur ajouter un width à chacun, pour éviter qu'en allongeant ton titre (ou ton feat), ils ne se superposent comme ceci > https://i.gyazo.com/dc3f248db30149ba38096f7a323a63c3.png

4/ Concernant le titre uniquement, la balise span n'est pas la plus appropriée pour lui. En effet, tu aurais pu utiliser plutôt un h1 (ou h2/h3 mais en général les titres principaux sont notés h1). Les span sont plutôt utilisés uniquement pour quelques mots (d'autant plus qu'ils n'ont pas la même propriété display par défaut) tandis que les balises h sont spécifiques aux titres, sous-titres etc.


Voilà, je pense avoir tout dit x) J'espère avoir été claire et avoir pu t'aider un peu :D
Sun
Ancien.ne du staff
Date d'inscription : 22/12/2016
Messages : 266
Fidèle au poste !
Tigrlion
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Lun 12 Nov 2018 - 0:47
Je réponds ici un mois plus tard, parce que j'avais pas répondu tout de suite et après j'ai oublié, sorry [FACILE] Exercice 8 - Fiche - Ori 2979024130

Alors, je m'étais cassé la tête avec le background, j'arrivais vraiment pas à trouver comment faire pour avoir le même rendu que l'image que le schéma, et c'est pas étonnant, je connaissait pas la propriété background-size, alors je risquais pas d'y penser x) Je comprends pas trop bien ce qu'elle fait, va falloir que je fasse des tests de mon côté et que je me renseigne là-dessus alors :3

Pour la scrollbar, je t'avoue que comme je suis sur Firefox et que les scrollbar personnalisée ne marchent pas sur Firefox, je cherche même pas à en faire, c'est pour ça que je l'ai pas fait x)

Cela dit, si j'ai fait une div + un p, c'était justement par rapport à la position de la scrollbar, si j'avais juste mis un p, la scrollbar aurait était collée aux bords du bloc malgré le padding, alors j'ai fait ça comme ça. Mais c'est vrai que je me suis emmêlé les pinceaux en mettant les paramètres de ma police un peu partout, je modifie pour tout mettre dans le paragraphe !

Pour le titre, je sais pas pourquoi j'ai mis en absolute, mais tu as raison, c'est clairement mieux en inline-block. Par contre, j'aime bien les spans, j'ai du mal avec les h1 et compagnie à cause de leurs taille et marge par défaut tout ça, ça me perturbe, je me sens pas très à l'aise avec ça, alors... x'3

Du coup, j'ai fait une version corrigée avec tous tes conseils ici : https://codepen.io/anon/pen/QJKJgm?editors=1000
Tigrlion
Fidèle au poste !
Date d'inscription : 22/11/2017
Messages : 303
Ancien.ne du staff
Sun
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Mer 14 Nov 2018 - 9:11
Hop là, je reviens pour éclaircir les quelques questions qu'il te reste @Tigrlion x)

@Tigrlion a écrit:Alors, je m'étais cassé la tête avec le background, j'arrivais vraiment pas à trouver comment faire pour avoir le même rendu que l'image que le schéma, et c'est pas étonnant, je connaissait pas la propriété background-size, alors je risquais pas d'y penser x) Je comprends pas trop bien ce qu'elle fait, va falloir que je fasse des tests de mon côté et que je me renseigne là-dessus alors :3
En fait, la propriété background-size définit tout simplement la taille de ton background (quand c'est une image) *paf* Si tu veux que le background prenne donc toute la largeur du code (en étant visible totalement), tu peux par exemple mettre background-size: 100%; (par défaut, un background restera à sa taille initiale et ton codage ne serait pas forcément assez grand, un background-size 100% va également redimensionner ton image pour qu'elle prenne la taille de la div autour).

• La scrollbar sur Firefox peut fonctionner avec les préfixes -moz [FACILE] Exercice 8 - Fiche - Ori 3313101865 Mais je t'avoue que ça ne fonctionne pas toujours chez moi sans que je comprenne pourquoi, donc à tester, mais en théorie, ça fonctionne.

• Pour les h1 et compagnie, si tu veux "réinitialiser" les margin, tu peux mettre margin: 0; (et après tu travailles comme tu veux, ça réinitialise juste, fin annule ce qui est prédéfini).

Voilà, ça peut être utile à savoir x)
Sun
Ancien.ne du staff
Date d'inscription : 22/12/2016
Messages : 266
Anim et mini-graphiste
Nataku
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Mer 6 Fév 2019 - 15:19
Bonjour ! Je trouvais l'exercice intéressant du coup j'ai voulu tenter ma chance ! Voici ! Salut
Nataku
Anim et mini-graphiste
Date d'inscription : 29/11/2018
Messages : 838
Mini-graphiste
Alek
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Sam 9 Fév 2019 - 15:06
Poupiloup~
Petite envie de coder :OO

Alek
Mini-graphiste
Date d'inscription : 20/01/2018
Messages : 2298
Ancien.ne du staff
Reine des Ténèbres
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Sam 9 Fév 2019 - 22:48
Bonjour, @alysszen.

Ton rendu est plutôt pas mal, il y a par contre de petits soucis visuels au niveau des titres et du bloc de texte.
Sur codepen si tu vas dans "Change view" et tu passes les onglets sur le côté dans Layout tu verras mieux de quoi je parle. Je mets les onglets par défaut à droite donc impossible de rater les titres qui dépassent :p

Ton HTML est parfait, bravo ! Je vois des balises sémantiques c'est tout beau et choupi **

Les petits problèmes d'affichage viennent évidemment du CSS. Voici mes remarques dessus :

Ton bloc parent (.backgroundexo) n'a pas de largeur fixe, il prend donc par défaut la largeur de toute la page. Un petit astuce que tu peux faire pour voir la taille réelle d'un bloc est de lui ajouter une bordure dégueulasse (border: 1px solid;). Je te laisse essayer, tu seras surprise :p
En réalité la position center sur ton background est la raison qui t'a poussé à croire que ton bloc à la bonne dimension.
D'ailleurs, je vois que tu as mis une hauteur (height) à ton bloc pourtant ça n'était pas nécessaire. Logiquement, la largeur d'un message est limitée mais sa hauteur peut prendre autant que nécessaire. Ceci dit tu peux garder la hauteur ce n'est pas un problème mais tu dois absolument fixée la largeur car c'est plus important surtout qu'il va falloir positionner les titres sur la même ligne aux extrémités du bloc par la suite.  
Aussi pour centrer un bloc, on utilise la déclaration margin: 0 auto; (je mets 0 mais tu peux fixer la marge que tu veux ça s'appliquera à la fois au haut et au bas du bloc. En réalité c'est la 2ème valeur auto qui sert à centrer horizontalement).
Mais encore une fois, on ne peut centrer un bloc que si on connait sa largeur, il faut donc avoir un width pour que le margin: auto; soit effectif.

Pour tes titres h1 et h2, il y a deux choses dont j'ai envie de parler.
- un display: inline va faire en sorte que ton bloc devient un élément linéaire et donc il ne peut plus accepter les propriétés liées aux blocs dont margin. Il existe une valeur display hybride qui permet au bloc de rester sur la même ligne tout en gardant ses propriétés de bloc, cette valeur est appelée : inline-block.
Tu trouveras un tutoriel sur les valeurs possibles de la propriété display dans le message de Batty.
- Je vois que tu as essayé de positionner tes titres avec de grosses marges, ce qui n'est pas très correct.
Les marges servent uniquement à faire en sorte qu'un bloc ne touche pas ses blocs voisins. Donc on peut créer un petit espace avec margin, sans en abuser.

Ici pour bien positionner tes deux titres, il faut d'abord leur donner une largeur qui ne dépasse pas la moitié de la largeur totale du bloc. Ainsi le navigateur saura exactement combien d'espace le bloc titre devrait prendre. Après tu as le choix entre utilisé le inline-block avec display ou bien le float. A savoir que si tu utilises inline-block assure toi d'aligner le texte à droite pour h2 (text-align).
Le tuto sur le float est aussi disponible dans le message de Batty.

Une fois les titres bien positionnés, tu pourras mieux adapter la hauteur du paragraphe.

La dernière chose est sur la forme du padding :
Code:
padding:10px 10px 20px 10px;

Quand on met 4 valeurs dans padding ou margin, la direction suit celle des aiguilles d'une montre, on a donc. padding:haut droit bas gauche;
Dans ton code la droite et gauche ont la même valeur, donc tu peux utiliser la forme en 3 valeurs pour raccourcir ton code

padding:haut droit=gauche bas ;
Code:
padding:10px 10px 20px;

Pour ce que j'ai mis plus haut :
Code:
margin : 0 auto;
C'est la déclaration à deux valeurs margin: haut=bas droit=gauche;

Et comme tu dois déjà le savoir, si j'écris une seule valeur c'est qu'elle s'applique à toutes les directions.

Voilà j'espère que tu as appris des choses en lisant mon message, bon courage à toi. Je reste disponible sur tu as des questions et je m'excuse pour le temps qu'on a mis avant de corriger ton exercice :3

EDIT : Ah il y a un truc important que j'ai oublié de mentionner au fait.
Tu as utilisé des balises sémantiques (h1, h2 et p) c'est super mais tu n'as pas vraiment profité de ça. Un des intérêts de l'utilisation de ces balises est la réduction de l'utilisation des classes. Au lieu d'avoir 4 div avec 4 classes, avec ces balises tu peux utiliser les sélecteurs combinés et notamment le sélecteur de descendants. Tu auras donc uniquement une classe pour la div parente et pour sélectionner le reste on combine la classe du parent avec la balise :
Code:
.backgroundexo h1 {}

.backgroundexo h2 {}

.backgroundexo p {}

Alek je te réponds après :3
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Ancien.ne du staff
Reine des Ténèbres
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Dim 10 Fév 2019 - 1:55
Coucou, @Alek

Ta fiche est très jolie, j'ai du passer par Chrome pour voir la beautiful scrollbar vu que sur Firefox les scrollbars ne fonctionne pas T.T

Ton code est plutôt propre c'est cool, par contre je regrette l'absence des balises sémantiques dans ton code. Par exemple au lieu d'une div qui porte la classe titre, j'aurais aimé voir une vraie balise titre hn (n pour le numéro 1 à 6 selon l'importance du titre).

Pour ton CSS, je n'ai pas grand chose à dire là également. Voici mes remarques toutes petites :
- En codage quand la valeur est 0 on ne met pas d'unité, parce que que ça soit en pixel, en pourcentage ou même en litre 0 c'est nul.

- Un bloc par définition, prend toute la place disponible. Ton cadre fait 50px de hauteur, alors forcément titre et feat seront haut de 50px, nul besoin de le préciser.

- En parlant de blocs qui héritent la taille du parent, il aurait était plus judicieux d'explorer un peu plus le flexbox vu que tu as choisi de l'utiliser dans l'exercice. Au fait le flexbox comme son nom l'indique permet de gérer le positionnement de façon flexible, ça t'évite de calculer la largeur et les marges des éléments enfants qui subissent le flexbox.
Donc plutôt que de mettre une largeur et des marges à ton titre et feat, tu aurais pu mettre une largeur au cadre qui est plus petite que celle du bloc parent et le centrer (j'aurais mis simplement width:90% parce que je suis flemmarde mais tu peux tout aussi mettre une largeur fixe en retirant la valeur marginale, 350px par exemple). Après pour mettre automatiquement les deux blocs aux extrémités on utilise la propriété lié au flexbox "justify-content". Bref, j'aurais un truc du genre :
Code:
.cadre {
 width: 350px;
 height: 50px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 }

.titre {
 color: #F1F1F1;
 font-size: 40px;
 font-family: 'Katibeh';
}

.feat {
 color: #F1F1F1;
 font-size: 25px;
 font-family: 'Katibeh';
 margin-top: 15px;
}

Ceci dit ta façon de faire n'est pas fausse, j'essaie juste de te faire explorer le flexbox qui te fera des lignes et du calcul en moins (méthode privilégiée par les flemmards comme moi). D'ailleurs si tu n'as pas de problème avec l'anglais, voici un petit guide très utile par ici .

Je m'arrête là parce que ton code était vraiment très bien fait de toute façon, bravo :3
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Mini-graphiste
Alek
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Dim 10 Fév 2019 - 8:34
Je retiens cette méthode de flemmard, ça peut etre pratique /PAN xD
Le guide est complet, c'est cool, je me le suis enregistrer, histoire que je pense à mettre un peu plus de flex box dans mes codes~

(au niveau des div's -que je met juste partout à outrance *tousse*- là c'est rien.. j'ose même pas imaginer ta tête quand tu verras mes autres codes, si c'est toi qui les corrige xD)

Merci beaucoup pour la correction Reine \o/
ps: au passage, pour la personne qui a effacer tout mon code, que j'avais bien heureusement enregistrer ailleurs --> recommence et je te bouffe éé
Alek
Mini-graphiste
Date d'inscription : 20/01/2018
Messages : 2298
Anim et mini-graphiste
Nataku
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Lun 11 Fév 2019 - 10:01
Bonjour Reine !

Merci beaucoup pour la correction ! J'irais voir les tutos de Batty ! J'ai apporté quelques corrections que tu as indiqué et je finirais les corrections avec les tutos. Je n'avais pas remarqué que mes titres n'étaient pas dans mon code, merci du conseil pour la view et d'avoir prit le temps de me répondre !

Merci pour le compliment sur le HTML ! [FACILE] Exercice 8 - Fiche - Ori 3488708190
C'est juste ... Haaaa ! quand je l'ai vu sur le coup !

I WILL DO MY BEST !
Nataku
Anim et mini-graphiste
Date d'inscription : 29/11/2018
Messages : 838
Ancien.ne du staff
Yozora
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Lun 11 Mar 2019 - 23:52
Hola. Salut
J'essaie aussi, pour m'entraîner :

Yozora
Ancien.ne du staff
Date d'inscription : 29/08/2016
Messages : 2383


Modo en stage et designer
Artemis
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Ven 15 Mar 2019 - 10:22
Coucou @Yozora !
Dans l'ensemble, ton code est tout beau tout propre, je n'ai pas grand-chose à redire dessus. c:

L'utilisation des id est correcte dans ce cas précis mais, si tu comptes te servir de cette fiche sur un forum, il faudra privilégier les class, plutôt. En effet, on utilise l'id pour cibler dans le css quelque chose qui n'apparaîtra qu'une seule fois sur la page (un qeel, par exemple !) ; pour les fiches, donc, on préfère utiliser les class. c:

Une balise p pour englober ton texte, au lieu d'une div #rp aurait rendu ton code par-fait mais je chipote Hap

Continue comme ça, c'est un très bon début. ♥️
Artemis
Modo en stage et designer
Date d'inscription : 14/01/2017
Messages : 2177


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

[FACILE] Exercice 8 - Fiche - Ori 447717kdoartemis
Ancien.ne du staff
Yozora
# Re: [FACILE] Exercice 8 - Fiche - Ori - le Sam 16 Mar 2019 - 16:30
Merci @Artemis, je prends note. **♥️
Yozora
Ancien.ne du staff
Date d'inscription : 29/08/2016
Messages : 2383


Contenu sponsorisé
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum