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
Ancien.ne du staff
Batty
# [Facile] Exercice 5 - Fiche - Batty - le Mer 7 Fév 2018 - 15:08
Voici pour vous une nouvelle fiche de niveau facile ! Elle a une largeur de 550px mais libre à vous ne mettre ce que vous souhaiter =)

Voici une mini-liste de tuto qui pourrais vous être utile

Utilisation des DIV
Opacité

Pour les ombres interne il faut utiliser l'attribut box-shadow et lui ajouter "inset" pour spécifier que l'ombre sera à l'intérieur. Ensuite on doit ajouté les informations suivantes ; Décalage horizontal, Décalage vertical, le flou de l'ombre, la taille de l'ombre et sa couleur. De plus il faut utiliser un préfixe pour cette attribut. Ce qui nous donne quelque chose comme ça :

Code:

-webkit-box-shadow:inset 10px 10px 5px 3px #656565;
            box-shadow:inset 10px 10px 5px 3px #656565;

Bien sur il faudra ajusté le tout pour obtenir le bon rendu !

Je vous recommande d'ajouter une scroll-bar à votre texte. Le "défis" sera de l'ajouté seulement à votre bloc text ;)

image de fond

exercice
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Fidèle au poste !
Peluushe
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mer 7 Fév 2018 - 19:18
Chouette un nouvel exercice ! =)

Voila mon essai ! [Facile] Exercice 5 - Fiche - Batty 2702986051

Visuel :


HTML :


CSS :
Peluushe
Fidèle au poste !
Date d'inscription : 13/01/2018
Messages : 498
Ancien.ne du staff
Batty
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mer 7 Fév 2018 - 21:22
Hello miss !

Tu à été rapide sur ce coups ! Le schéma n'est même pas là depuis 24h ! XD

Alors au niveau du rendu c'est quand même assez près, mais sur mon schéma on retrouve une marge en haut de ton bloc "fiche". Je suis assez surprise de voir où tu a mis la scroll-bar je l'imaginais englober tout le texte même le rectangle jaune qui est surtout là pour "styliser" les paroles des personnages, mais l'important c'est que tu es relever le défis ! Je lui aurais mis un height de 430px au lieu de 450px pour qu'il reste dans l'encadré blanc mais là je chipote ! XD

Concernent ton code j'ai du mal à comprendre pourquoi tu à utiliser une tableau pour le titre et la citation [Facile] Exercice 5 - Fiche - Batty 3313101865 Bon je comprend un peux, tu voulais qu'il y est des marge de chaque côté de ta bordure. Qu'elle ne colle pas les côté du cadre blanc. C'est ça ? Mais à ce moment là, pourquoi ne pas avoir tout simplement mis des marge extérieur ? Quelque chose comme : margin: 0 20%;

Ainsi plus besoin d'une marge extérieur négative pour la citation. Par contre on peux changer la valeur par défaut et "forcer" une marge de 0px pour que ce soit plus jolie. D'ailleurs, fait attention tu ouvre une balise h3 pour fermer avec une balise h2. C'est probablement une faute d’inattention ou de c/c ;)

Pour le bloc "dialogue" tu à ajouter une hauteur (height: 20px;). Or le texte dans cette section peux être plus ou moins longue. Il aurais été mieux de ne pas la spécifier comme ça si le texte est long le bloc va suivre ;)

Finalement, pour l'opacité. Tu à appliquer une opacité général. Ce qui veux dire que tout ce qui ce trouve dans ton bloc est transparent. Dans ce cas-ci le niveaux de transparence est minime, mais lorsqu'on veux mettre un fond semi-transparent il est préférable d'utiliser une variable alpha (la troisième proposition dans le tuto : background-color: RGBa (0,0,0, 0.5);

Je crois avoir fait le tour de la fiche o/

Bravo d'avoir déjà appliquer ce que j'ai dit à propos des titre ;)
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Fidèle au poste !
Peluushe
# Re: [Facile] Exercice 5 - Fiche - Batty - le Jeu 8 Fév 2018 - 17:19
Coucou !  Happyness
Ahah oui, j'ai du temps devant moi en ce moment alors j'en profite. =)

J'ai tenté de mettre la marge tout en haut, mais je n'ai pas réussi via le CSS. J'ai un peu tendance à confondre margin et padding, donc j'ai essayé les deux, et la fiche blanche ne voulait pas se décoller du haut de la page. Après reflexion, un < br /> aurait simplement pu faire l'affaire, j'ai un peu trop chercher la complication sur le coup. ^^

Effectivement, je voulais que les marges ne fasse pas toute la longueur de la fiche. J'ai essayé de bidouiller, j'ai fais quelques recherches, et je ne trouvais pas de moyen pour régler cette longueur.  [Facile] Exercice 5 - Fiche - Batty 2979024130

JsBin ne m'aide visiblement pas pour la relecture, étant donné qu'il n'y a pas de saut de ligne c'est moins pratique. ^^ Je vais essayé Codepen pour la prochaine, il m'a l'air plus lisible. :P J'évite au maximum de faire des copier coller en plus, sauf lorsqu'il s'agit d'un même bloc qui se répète plusieurs fois. Je préfère tout écrire de moi même, ça me permet de mieux assimiler. ^^
J'ai retiré la hauteur dans le bloc de dialogue. =)

J'avais essayé d'utiliser la variable alpha, sauf que mon fond se retrouvait entièrement transparent.
Si je mettais ça dans mon CSS :

Ca me donne un rendu tel que celui ci.

Et puis en corrigeant mon code en suivant tes recommandations, j'ai vu qu'il suffisait simplement d'enlever l'espace entre le RGBa et la parenthèse. Je le saurais au moins. :P

En tout cas j'ai bien pris en note toute ce que tu m'as dis là, et j'en ai profité pour remettre ma fiche au propre avec tout tes conseils. :)
Merci à toi ! [Facile] Exercice 5 - Fiche - Batty 3775839356
Peluushe
Fidèle au poste !
Date d'inscription : 13/01/2018
Messages : 498
Membre timide
Hiyorin
# Re: [Facile] Exercice 5 - Fiche - Batty - le Ven 16 Fév 2018 - 9:27
Coucou ^^ Alors voilà, je m'essais, mon code me semble correct, mais à voir s'il y a des fautes XD Je ne mettrai pas le résultat, l'ayant codé sur codepen, j'ai des sauts de ligne qui, une fois sur FA, déforment énormément le code et j'avoue ne pas avoir la motivation de tout modifier >< Un détail qui m'a bien fait rire : chaque fois que j'essayais de mettre 0.8 d'opacité, la parenthèse transformait une partie du code en smiley, ce qui brisait complètement le code, je comprenais rien XD En tout cas j'ai eu beaucoup de plaisir à construire cette fiche, merci  [Facile] Exercice 5 - Fiche - Batty 1840524174



Hiyorin
Membre timide
Date d'inscription : 05/03/2017
Messages : 117
Ancien.ne du staff
Batty
# Re: [Facile] Exercice 5 - Fiche - Batty - le Ven 2 Mar 2018 - 16:32
Hello !

Désoler du temps qu'on à mis à répondre à ta demande !

Je sais que tu à un peux vue ce code avec ton professeur Kjaran je vais donc essayer de complété ce qui selon moi n'as pas été aborder =P

Premièrement pour ton problème de smiley => 8) c'est que le code de ce dernier est mal foutu x) normalement on va préféré un code comme :8*): pour évité ce genre de souci (sans l’astérisque) Bref il n'y a pas vraiment de solution autre que de changer ton 0.8 pour quelque chose comme 0.75 qui ne devrais pas crée un smiley x)

Ensuite dans ton cours Kjaran ta demander de séparer ton CSS et ton html. Ce que tu à fait c'Est bien =) Mais tu as du te heurté à un problème. Ton css ne devais pas s'afficher ? Puisque tu à lier une page CSS à ton code.

Dans l'optique où cette fiche serais mis en LS. Donc partagé il est désagréable pour les membres de ne pas avoir accès au CSS. Que ce soit pour changer l'image de fond et/ou les couleurs de la fiche. Du coup on va inclure le CSS dans une balise style qui ce trouvera en haut de ta fiche. Par contre pour que le CSS fonctionne à l'intérieur de celle-ci il ne faut pas de saut de ligne. Pareille comme ton CSS dans le code plus haut.

Finalement, oui la balise P est la balise paragraphe. Dans une page HTML et/ou sur un site web statique on va l'utiliser pour crée dans saut de ligne. Par contre à l'intérieur d'un message sur un forum, les saut de ligne sont pris en compte. Du coup, il est inutile de crée un saut de ligne en code. De plus le membre qui utilisera ton code n'aura peut-être pas de bonne base en programmation. Ce qu'il veux faire c'est copier/coller sont texte à l'intérieur de ton code. Il ne veux pas forcément entouré chaque paragraphe par une balise.

Il aurais été plus simple de mettre une seul balise p pour encadré tout le text. Or on ce bute à un autre problème; il est impossible de mettre une DIV à l'intérieur d'une balise P... ce qui nous pause problème si on veux utilisé la belle présentation pour les dialogue entre les personnage (la DIV jaune).

Dans ce cas précis il serais préférable d'utiliser une DIV à la place de la balise P. Parfois codé sur un forum "obliger" à mettre de côté quelque pratique en programmation qu'on utiliserais normalement pour un site web statique ;)

Bref j'espère t'avoir aidé ! En somme ton code est vraiment bien =D
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Membre timide
Hiyorin
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mer 21 Mar 2018 - 1:58
Bonjour ! Désolée du temps de réponse, je pensais avoir répondu, mais non ! Bon, ma réponse risque d'être un peu courte aussi, forumactif a bug et mangé mon message, j'avais écris un joli pavé Sad

Pour le CSS, je devais revoir comment l'intégrer grâce à la balise style, mais ça m'est complètement sortie de la tête. La dernière fois que je l'avais utilisé, ça avait bug, donc je devais revoir, mais j'y ai pas repensé :') J'ai pris l'habitude de le séparer surtout pour permettre le changement rapide de toutes les fiches si je veux modifier une couleur par exemple sans avoir à revoir chaque fiche une par une. Pour les codes en LS, je serais du genre à offrir deux versions, une avec CSS séparé et une avec CSS intégré. Est-ce que ce serait correct ? Le CSS ne serait pas sur codepen comme dans l'exemple que j'avais donné, je le mettrais, mais ce serait aux membres de voir où le mettre (donc soit dans le CSS du forum sur lequel ils utilisent la fiche s'ils ont accès au CSS, soit ailleurs comme sur codepen, mais ce serait à eux de gérer justement pour leur permettre de modifier à leur guise). Je ne sais pas si c'est bon de faire ça ?

Ah, ça m'amène à une autre question. Si je mets le CSS entre balise style, qu'est-ce qui va s'y rapporter ? Est-ce que seul le poste dans lequel il y a le style va être touché ou est-ce que tous les postes qui vont être dans le même sujet où la balise style est vont être affecté ? Je m'en souviens plus >< il me semble que ce n'est que le poste non ? Il faudrait que je revois cette balise XD

Pour les balises paragraphes, j'ai pris l'habitude de coder comme ça en dehors de forumactif et maintenant, c'est resté sur FA, mais je vais devoir m'adapter oui [Facile] Exercice 5 - Fiche - Batty 3313101865 je remarque que ça pose plusieurs problèmes, comme par exemple utilisé une balise titre dans un code rp risque d'être affecté par le CSS du forum sur lequel la fiche est postée, vue que le staff a son propre CSS aussi [Facile] Exercice 5 - Fiche - Batty 3313101865 Je me demandais cependant, s'agit-il d'une erreur en programmation ou juste que je dois m'adapter selon l'endroit où je code ? J'aimerais un jour travailler dans le domaine, alors j'aimerais connaître les bonnes règles à suivre [Facile] Exercice 5 - Fiche - Batty 3313101865

Merci beaucoup pour ton aide en tout cas, encore une fois désolée pour le temps de réponse :O
Hiyorin
Membre timide
Date d'inscription : 05/03/2017
Messages : 117
Ancien.ne du staff
Batty
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mer 21 Mar 2018 - 12:56
Hello !

Si tu utilise le CSS à l'intérieur d'une balise style il ne faut pas avoir de saut de ligne à l'intérieur. C'est peut-pêtre pour ça que ça ne fonctionnais pas =P

Puis le CSS touchera tout ce qui ce trouve sur la même page que lui. Tu pourais par exemple mettre ton CSS sur le premier poste et pas sur les autre, mais lorsqu'on change de page il faut le remettre.

Pour les LS tu peux proposer les deux option sans problème ^^

Pour les titre ce n'est pas vraiment une erreur de programmation. Toi lorsque tu va programmer un site web tu va mettre tes titre h1 h2 etc... pour le référencement, mais il sera rare que derrière des gens programme des fiches et qui vont utiliser les même balise. Normalement tu aura fait un site plus ou moins statique pour une compagnie et personne codera dessus.

En fait c'est plus ou moins nous dans nos fiche qui fait une erreur car notre titre de fiche n'a pas forcément besoin d'être référé sur les plateforme de recherche.
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Membre timide
Dorea McH
# Re: [Facile] Exercice 5 - Fiche - Batty - le Jeu 22 Mar 2018 - 14:57
Coucou! Merci pour l'exercice! (je l'ai plus fait parce que l'image était superbe qu'autre chose ;))

Voilà mon travail:

CSS:

HTML:

Et le rendu!:
Titre du RP
Petite citation du plaisir.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed cursus enim. Integer viverra placerat urna, sit amet convallis est feugiat sit amet. Mauris ornare arcu at sapien egestas iaculis. Nullam quis arcu pretium magna hendrerit semper convallis eu quam. Curabitur sit amet ipsum posuere est lobortis mollis. Donec in dui metus. Aliquam mattis venenatis dignissim.
-Aenean vulputate tempor fringilla.

Phasellus neque enim, finibus et fermentum vitae, consequat ut libero. Vestibulum auctor sapien nulla, eu vestibulum mauris ultrices quis. Suspendisse ultricies, diam in efficitur fermentum, ipsum felis suscipit sapien, sit amet accumsan sem mi sed sem. Quisque tempus nisi at turpis malesuada, vel dictum velit viverra. Nunc a tincidunt nisl. Mauris nec accumsan nunc. Nam semper odio at semper vulputate. Fusce lacinia neque ac ultricies ullamcorper. Aliquam a mollis tellus. Maecenas quis lacus nec metus accumsan bibendum. Cras commodo, est pellentesque faucibus viverra, orci arcu malesuada libero, vitae scelerisque enim velit vel risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum turpis eget urna dapibus tincidunt. Nam sit amet felis at orci gravida mollis. Aenean neque dui, pretium id placerat et, placerat vel purus.

Morbi lobortis est mattis orci aliquet ultricies. Proin commodo vitae sapien eget malesuada. Nullam luctus ultrices elit, ut malesuada massa pellentesque sit amet. In et erat nunc. Nulla aliquam eget augue eget condimentum. Donec at ornare est. Vivamus rhoncus lorem quis lorem interdum, non rhoncus mi ornare. Nam id diam pulvinar lacus convallis ullamcorper eget elementum tellus. Fusce at ultrices turpis, eu fermentum urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam non tellus lacinia, ultrices tellus sed, accumsan dolor. Aenean elementum, enim quis pretium semper, ex ante finibus nisi, id tincidunt lectus dolor vel lacus. Phasellus quis ex sit amet tellus accumsan vulputate quis ac augue. Praesent condimentum eu dui in sagittis. Phasellus sit amet condimentum neque, at aliquam ipsum. Vestibulum nec risus nisl.

Proin mattis gravida nisl at feugiat. Nam orci felis, pretium et ultrices id, fermentum at magna. Praesent sollicitudin dictum eleifend. Vestibulum lectus ante, porttitor ut sodales mattis, egestas eu dui. Praesent vitae orci nisi. Cras a porta dolor, non interdum tortor. In at bibendum turpis, in tristique felis. Donec feugiat sollicitudin convallis. Cras id enim elit. Maecenas molestie lectus sit amet erat maximus luctus. Proin eget turpis leo. Cras viverra tortor in mauris congue, sit amet auctor erat egestas. Fusce ac felis bibendum felis facilisis efficitur. Morbi sed interdum neque. Mauris eget nulla dolor.

Nunc sed laoreet nisl. Vestibulum efficitur est ac mi pharetra, sit amet interdum eros vehicula. Mauris sit amet maximus mauris, vitae pulvinar erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc at lacus orci. Sed ornare ipsum non sagittis bibendum. Sed maximus convallis interdum. Donec odio sem, semper in lacus sit amet, hendrerit rutrum magna. Suspendisse id mi vitae mi maximus malesuada. Nulla eu rhoncus metus. Quisque tincidunt ornare est, non fermentum mauris accumsan ut. Proin varius vitae nisi ornare euismod. Cras ut metus sit amet sapien consectetur iaculis.
Dorea McH
Membre timide
Date d'inscription : 08/01/2017
Messages : 178
Ancien.ne du staff
Reine des Ténèbres
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mer 28 Mar 2018 - 1:10
Coucou :3

Contente de te revoir par ici :3

Ton rendu est parfait, c'est génial ! De plus ton code est bon aussi.
J'aime bien le hover sur le titre :3

En parcourant ton HTML je vois un élément entouré de deux div ici :
Code:
<div class="barre_exof5">
      <div class="citation_exof5">Petite citation du plaisir.</div>
    </div>

La div barre est inutile, une seule div suffira ici. Tu peux appliquer donc tout le CSS directement sur la div citation.

Et juste pour information, mettre un line-height de ma même taille que le font-size revient à mettre un line-height qui égal à 1 (line-height : 1;)
Bravo [Facile] Exercice 5 - Fiche - Batty 3775839356
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Newbie
Wonder
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mar 17 Juil 2018 - 13:26
Bonjour  [Facile] Exercice 5 - Fiche - Batty 3775839356
J'ai tenté l'exercice, merci de l'avoir proposé il était sympathique à faire ** Ca m'aura sans doute pas empêchée de faire des bêtises cela dit, du coup à vous de me dire o/

CSS


HTML
Wonder
Newbie
Date d'inscription : 02/02/2018
Messages : 75
Ancien.ne du staff
Reine des Ténèbres
# Re: [Facile] Exercice 5 - Fiche - Batty - le Ven 3 Aoû 2018 - 3:00
Hello, @wonder.

D'abord je m'excuse pour le retard :3

Le rendu est fidèle au schéma donc bravo.
Tu as séparé le HTML du CSS c'est très bien, n'oublie pas que quand tu sépares les deux, il ne faut pas mettre du CSS dans le HTML mais avoir un code totalement propre.

Code:
<div class="fond" style="background-image:url('https://zupimages.net/up/18/27/grla.jpg');background-size:100% auto;">
La valeur dans l'attribut style doit donc aller dans le sélecteur .fond dans le CSS.

Sinon quand tu mets une seule valeur en background-size, la hauteur est par défaut en auto donc pas besoin de l'écrire.

Le "encore toi" serait plus logique dans une span, vu que ce n'est pas un vrai paragraphe mais s'il y avait beaucoup de texte ça pourrait l'être.

C'est tout pour les remarques, ton code est plutôt correct, bravo :3
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Invité
# Re: [Facile] Exercice 5 - Fiche - Batty - le Sam 4 Aoû 2018 - 3:33
Coucou :3 Voici pour moi. Je sais pas si le code est bon par contre :'D

Anonymous
Invité
Fidèle au poste !
Nanto
# Re: [Facile] Exercice 5 - Fiche - Batty - le Ven 10 Aoû 2018 - 20:03
Voilà ! Fait !

Nanto
Fidèle au poste !
Date d'inscription : 07/06/2016
Messages : 330
Ancien.ne du staff
Batty
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mar 14 Aoû 2018 - 15:55
Désoler du temps d'attente pour vos exercices ! Je ne les avais même pas vue =o honte sur mon x) Bref je vais vous donner mon avis sur vos code maintenant que j'en est pris connaissance =)

@Shanriya

Ton code est vraiment bien ! Je n'ai pas grand chose à dire dessus il est presque fait comme je l'aurais fait bravo !

Par contre, la première chose que je voie de "mal" dans ton code c'est ta citation en h5... Pourquoi h5 ? J'imagine que tu t'es dit "la citation c'est peux important donc je vais lui donner moins d'importance avec un h plus bas". Mais à ce moment là pourquoi ne pas lui avoir donner un h6 (qui est la plus petite valeur)?

Tout fois, lorsqu'on utilise les titre (h1,h2,h3) normalement on ne "peu pas" sauter les niveau. Il faut utiliser le h1 (sur FA ses le titre du forum), ensuite le h2, le h3 et ainsi de suite. Pourquoi on ne peux pas sauté des niveau ?... parce que c'est comme ça x) je n'est pas vraiment d'explication c'est la façon de faire haha. Comme lorsqu'on écrit de gauche à droite =P

Sinon en soit ton raisonnement était bien ! Et tu a raison la citation est beaucoup moins importante. C'est plus esthétique qu'informatif. Du coup, (et c'est ma propre façon de pence et non une règle) je ne mettrais pas les citation dans une balise titre. Pourquoi ? Parce que normalement les balise titre sont là pour décrie brièvement le sujet de la section qu'il introduit et ils ont des fonctions de référencement. La citation n'introduit pas vraiment le sujet et si on la cherche sur google ce n'est pas vraiment le RP qu'on souhaite trouver (normalement). Mais bon ça c'est ma vision des chose =) Personnellement je l'aurais mis dans un balise paragraphe (P) ou de contenu (div).

Finalement ce ne comprend pas ta div :

Code:
<div id="shan_contenuoverflow">

Premièrement elle est lier à aucun CSS, deuxièmement elle est inutile et finalement elle utilise un ID. Un ID doit être unique sur une page web. Comme c'est une fiche RP elle se répétera sur la page Web donc le ID aussi. Normalement dans les fiche RP on n'utilise pas les ID. Une fiche de présentation pourrais en avoir, car normalement cette fiche n'est pas copier plusieurs fois =)

Oh et pourquoi avoir mis un opacity: 1; à ta div dialogue ? la valeur 1 est celle par défaut sur les Div ce n'est donc pas nécessaire.

Bref ton code était vraiment bien et j'espère t'avoir appris des chose !

--------------------------------------------------------------------------------------

@Nanto

Ton code est bien ! Tu a un rendu presque identique au schémas et bravo pour la scroll bar =) Mais bon mon but est de pointé tout les petit "défaut" de ton code alors je vais débuté, mais sache que tu n'a pas fait de faute "grave" ;)

La première chose que je voie ses ton titre de fiche. Le fait d'utiliser une div n'est pas forcément mal tout dépend de comment on réfléchi et interprète la fonction des balise titre (h1,h2,h3). Sache que tu aurais pue mettre ton titre de fiche dans un H2 =)

Par contre ce qui n'est "pas bon" c'est d'avoir utiliser une span pour coloré le titre. En fait pour réaliser le même effet que le schémas il aurais fallu mettre une bordure de bas et des marges droite/gauche à ta DIV .titreexcinq. Ainsi tu n'aurais pas eu besoin de la span. Par contre elle était en effet nécessaire si on crée le code comme tu là fait =)

Ensuite, pourquoi avoir mis un opacity: 1; à ta div dialogue ? la valeur 1 est celle par défaut sur les Div ce n'est donc pas nécessaire. Sinon il manque aussi la petite ombre interne sur la DIV ... je te l'accorde c'est discret =P et ce n'est pas une faute de programmation haha =)

Bravo pour ton exercice !

Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Fidèle au poste !
Nanto
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mer 15 Aoû 2018 - 16:08
Ne sachant comment tu avais fait, j'ai essayé d'imiter le rendu de mon mieux ^^'

Ah, mais oui, je pense jamais à la hiérarchisation des titres... ça aurait pu, en effet
D'acc, je me demandais pourquoi c'était si large par rapport au texte... Mais dans ce cas, le titre ne peux pas être gardé sur une seule ligne s'il dépasse, si ?
Hum... ça, c'était un oublie, j'avais tenté plusieurs valeurs avant de déterminer que c'était 1, je n'ai pas enlevé ensuite... L'ombre ? Ah, je n'avais pas vu, pour le coup ^^'
Nanto
Fidèle au poste !
Date d'inscription : 07/06/2016
Messages : 330
Ancien.ne du staff
Batty
# Re: [Facile] Exercice 5 - Fiche - Batty - le Mer 15 Aoû 2018 - 16:23
En effet, si le titre est long il auras un saut de ligne mais le texte ne sera pas souligné. En fait la ligne c'est d'avantage une séparation entre le titre et la citation =)
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Newbie
Wonder
# Re: [Facile] Exercice 5 - Fiche - Batty - le Ven 17 Aoû 2018 - 17:57
Bonsoir (à l'arrache certes) o/

Déjà merci @Reine des Ténèbres d'avoir répondu, pas de soucis pour le retard ce n'était pas pressé x')
Concernant le background, comme j'ai l'habitude de coder pour des trucs sur forum je met généralement l'image de fond dans le HTML au cas où on veuille la modifier; mais dans ce cas là c'est pas nécessaire et effectivement plus propre dans le CSS, du coup j'y penserai next time o/
+ c'est bien noté pour la hauteur et concernant le <.p> j'avais essayé de mettre en span mais de mémoire ça rendait pas comme je voulais du côté de la 'boîte' jaune autour du texte [Facile] Exercice 5 - Fiche - Batty 2979024130 Je pense réessayer tho, à moins d'avoir de bien longs dialogues ça semble plus approprié

En tout cas merci beaucoup pour tes corrections, des keurs [Facile] Exercice 5 - Fiche - Batty 3775839356
Wonder
Newbie
Date d'inscription : 02/02/2018
Messages : 75
Newbie
Emi
Voilà je me suis lancée et j'ai fais ça ! Je suis extra débutante en codage donc je sais pas du tout si ce que j'ai fais est bien ou non. XD
Par contre, je me demandais comment on faisait pour "unir" le tout, en gros n'avoir qu'un codage que je puisse poster sur d'autres forums.

Emi
Newbie
Date d'inscription : 17/05/2015
Messages : 94
Modo en stage et designer
Artemis
# Re: [Facile] Exercice 5 - Fiche - Batty - le Dim 3 Mar 2019 - 11:57
Re-coucou 8D
Globalement, il y a les mêmes soucis que dans ton exercice sur la fiche Japanese Night, donc je ne vais pas revenir là-dessus. ;)

Pour unir le tout, en fait, on va mettre ton CSS entre balises style. Pour que ça marche, cependant, il faut que ton CSS soit minifié (dons sans sauts de lignes). Pour faire ça rapidement, tu prends la partie CSS, tu la colles dans ce site qui va retirer tous les sauts de ligne automatiquement, puis tu mets le résultat entre balises style, comme ceci :



Il faut également minifier le HTML (forumactif prenant en compte les sauts de ligne, ça risque de déformer ton code si tu ne le fais pas), donc tu appliques la même méthode que pour le CSS. c: Et tu mets les deux dans ton message, comme ceci :



A noter que, du coup, le site retire les sauts de ligne dans le texte, mais tu peux les garder xD Le tout est seulement d'éviter les sauts de lignes/espaces entre les balises, c'est tout. :3
Le CSS entre balises style peut se trouver avant ou après le HTML, peu importe ^^
Artemis
Modo en stage et designer
Date d'inscription : 14/01/2017
Messages : 2177


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

[Facile] Exercice 5 - Fiche - Batty 447717kdoartemis
Contenu sponsorisé
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum