avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 21:32


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 21:48
C'est bien :3
Ton codage pour l'image en background est plutôt cool. Mais pour cette fiche, on va mettre l'image directement donc le HTML.

Avant de parler de l'image. On va d'abord arranger la div. Si tu regardes sur le schéma tu verras un espace entre la div et le titre en haut et le paragraphe en bas. Je te laisse donc ajouter ça :3

Voici donc le lien de l'image https://img2.lght.pics/jUzg.png j'ai oublié de te le donner mais tu peux garder celle que tu as mis si tu veux :3, de toute façon c'est une mini bannière toute moche que j'ai fait vite fait pour l'exo x)

Parlons de la balise img, dis-moi tout ce que tu sais à propos de cette balise.



avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 22:08
Coucou :3 Oui, #boulet, j'avais oubliée que je pouvais mettre padding-top et padding-bottom XD donc comme padding fonctionnait pas j'ai laissée comme ça /facepalm/ je viens d'y penser XD pour l'image, j'ai essayée, mais en fait elle veut pas se centrer comme les autres blocs, donc j'ai du mettre un display, je sais pas si c'est bon https://codepen.io/Shanriya/pen/GBrXQm et j'ai gardé ton image, car la mienne faisait tout bugger XD


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 23:16
Image

La balise img est plutôt drôle :p

On sait que img est une balise orpheline (auto-fermante). Elle s'écrit de cette façon :
<img src="epicode.jpg" alt="la bannière d'Epicode" />

- src (source) est un attribut obligatoire qui prend la source de l'image et donc sa localisation donc son URL.
On rappelle que le slash n'est plus obligatoire dans le HTML5, mais il l'est dans le xHTML (version 4) et toutes les anciennes versions.

- alt (alternative) cet attribut est important pour rendre ton code accessible à tous les utilisateurs et notamment aux mal-voyants. C'est le seul moyen de traduire le contenu de l'image à ces personnes et donc il faut toujours mettre une description claire quand il s'agit d'une image importante. Pour les images décoratives qui n'ont rien à voir avec le contenu, on ne met pas alt. On note que alt sert aussi quand l'image ne charge pas à cause de la connexion trop lente ou peu importe, dans ce cas on peut voir la description en passant la souris sur l'icône de l'image corrompue.

Alors, pourquoi l'image ne se centre pas avec margin: auto ?

Comme j'ai dit au tout début, c'est une balise plutôt fourbe. Son type d'affichage est "inline-block".
C'est donc une balise quia des propriétés inline donc qui ne peut pas prendre la valeur margin: auto et qui se met sur la même ligne. Mais elle a aussi des propriétés block, comme une hauteur et une largeur. Logique vu que c'est une image, on doit pouvoir l'agrandir ou la rétrécir selon nos besoins. En plus on peut très bien lui ajouter des marges numériques.
Donc on centre une image de la même façon qu'on centre du texte ou une span. Il suffit de définir un alignement centré dans le bloc qui la contient.


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 23:24
Coucou :3 erh, je t'avoue que j'ai pas tout compris désolé TT je dois faire quoi alors ? display c'est bon ou pas ?


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 23:28
Ah oui pardon :3

On ne va pas garder le display pour ne pas changer le display par défaut :3

On va mettre un text-align plutôt dans le bloc de la fiche. Et au fait tu n'as pas besoin de mettre une classe à l'image, on va la sélectionner avec img {} c'est plus simple.


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 23:34
D'accord :3 donc du coup voilà ^^ https://codepen.io/Shanriya/pen/GBrXQm


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 23:55
Coucou :3

C'est tout beau et propre, bravo :3

Je vais revoir le code en entier pour voir s'il y a des petits trucs à voir.

Donc le HTML est parfait :3

Pour le CSS :

Code:
.fiche {
  padding-top: 20px;
  padding-bottom: 20px;
}
Ce qui est correct mais tu peux aussi utiliser la propriété padding pour raccourcir ton code vu qur top et bottom sont parallèles et on la même valeur. Donc tu peux mettre le padding avec deux valeurs, 20px pour le haut et le bas et pas de padding pour la droite et la gauche (padding : 20px 0;).


Code:
h1 {
  margin: auto auto 10px;
}

hm cette valeur est plutôt curieuse :p
auto fonctionne uniquement en horizontal donc tu ne peux pas mettre auto dans la première valeur parce que c'est la valeur de margin-top. Tu peux mettre 0 si tu ne veux pas avoir une marge en haut.

C'est tout, tu as fait du très bon travail :3

Il nous reste plus qu'à mettre une jolie police à nos titres.
Voici un tuto sur comment utiliser des polices personnalisées : Installer des fonts de Google fonts

Pour mon schéma j'ai mis Sacremento et Tangerine.
Tu peux mettre ce que tu veux :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 23:59
Coucou :3 flemme de chercher une police, donc je vais prendre les mêmes que toi https://codepen.io/Shanriya/pen/GBrXQm j'ai aussi corrigée les erreurs que tu m'as pointée ♥️


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 0:24
C'est parfait :3

Dernières petites retouches avant de mettre notre fiche sur le forum :3

Chaque forum a son propre CSS dans la feuille de style, en plus du CSS de base de FA. On veut que notre code n'interfère pas avec le code déjà existant, sinon la fiche sera cassée. Pour cela, la première des choses à laquelle il faut penser c'est mettre des noms de classe plus au moins unique. Dans notre fiche par exemple, tu as mis class="fiche", le souci c'est que c'est un nom plutôt commun et qui risque de figurer déjà dans le CSS du forum.
Pour ma part, j'utilise des noms avec un préfixe du genre "rdt_fiche", en ajoutant rdt_ (RDT = Reine des Ténèbres) à mon nom de classe, je la rends plus unique de façon à ce que le CSS du forum et mon CSS n'interfèrent pas entre eux et rien n'est cassé. Parfois j'écris les noms de classe en espagnol parce que ça me semble aussi original. Bref, tu fais comme tu veux en gardant en tête qu'on essaie de ne pas utiliser le même nom de classe qu'un autre élément sur le forum.

Le deuxième point est d'éviter d'utiliser rien que le type de balise en sélecteur. ça va de soi, si on met img {width: 200px} toutes les images sans exception sur le forum seront affectées et ce sera horrible. C'est pourquoi on utilise des sélecteurs combinés.
Pour notre fiche on a utilisé ce qu'on appelle "un sélecteur de descendants".
Quand on a une balise à l'intérieur d'une autre, on appelle la première balise parente et celle à l'intérieur l'enfant, donc son descendant, d'où le nom du sélecteur de descendants.
On va donc utiliser le nom de classe de notre div parente et le combiner avec le type de balise dans le CSS. Donc au lieu d'avoir h1 {} on aura .fiche h1 {} etc.

Je te laisse donc d'abord modifier ça et ajouter une taille aux titres et paragraphe parce que sans, le texte prendra la taille du CSS du forum.

Bonne nuit :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 0:32


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 0:51
C'est très bien :3

Alors pour lier le CSS et le HTML, on va utiliser la balise style et coller notre CSS dedans.

Après pour pouvoir utiliser le code dans un message du forum. On doit compresser notre code.
Je t'explique : normalement le html ne prend pas en compte les sauts de lignes dans le code, que le code soit indenté ou non il apparaît de la même façon dans l'aperçu.
Dans les templates c'est la même chose parce que ce sont des éditeurs de code, cependant les messages sur le forum sont faits pour écrire des messages textes et non pour du codage HTML. Donc logiquement chaque saut de ligne est compté en tant que tel dans le message et si je mets du code indenté chaque saut de ligne va apparaître dans le résultat du code et mon code sera cassé.
Alors pour mettre un code dans un message, on réduit au maximum les sauts de ligne, c'est à dire on met un code compressé non indenté.

Donc pour pouvoir coder quand même sur l'éditeur codepen tranquillement on préfère que ce soit indenté là-bas avec un code clair et aéré et à la fin on le compresses.

D'ailleurs si tu indentes ton HTML (tu peux le faire automatiquement dans la flèche à droite de l'onglet HTML > tidy HTML), tu verras que tu as fermé deux fois ta div parente, tu as dans une /div en trop :3

Mais ne t'inquiètes pas, on va pas s'amuser à supprimer les sauts de ligne. Ce site Compresseur du HTML peut le faire pour nous :3
Dans les options à droite, on peut choisir le niveau de compression de safe, advanced à aggressive.
Safe ne change pas grand chose donc à éviter, advanced laisse quelques sauts de ligne genre entre un titre et un paragraphe etc. Agressive supprime absolument tout les espaces et saut de lignes et c'est le mode que je préfère personnellement.
Une fois compressé tu peux déjà poster ta fiche sur un forum test ou simplement ici sur le sujet pour voir ce que ça donne et corriger les petits bugs qui apparaissent à cause du CSS de base de FA et du forum.

Je te laisse donc déjà fusionner ton html et css et compresser le code et on corrigera ensemble les petits bugs s'il y en a :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 0:53
Coucou :3 alors erh, soit je suis aveugle, soit y a pas l'option que tu parle XD Parce que je regarde à droite et safe, advanced et agressive je les vois pas


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 0:55
C'est dans les options (show options) :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 0:57
Alors je suis aveugle parce que je vois pas :'D Fin, pas grave, là c'est hyper compressé donc bon x)


Aya, ça marche pas O_O c'est quoi ce bug de ouf.

EDIT : Bug corrigé XD
EDIT 2 : C'est bon, j'ai trouvé, en fait je pensais que tu parlais du css et non du xhtml


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 15:46
Coucou :3

C'est parfait :3

Ah tu avais changé le type de code par CSS ? Puisqu'on va mettre le code en entier avec le CSS à l'intérieur de la balise style c'est que notre code est du HTML :3

Notre fiche est terminée, il n'y a pas de gros bug visible, la fiche est un peu coupée à droite, c'est parce que la largeur des messages est inférieure à la largeur de la fiche. On peut donc enlever le width:600px de la fiche pour qu'elle prend automatiquement toute la largeur du message.

Est-ce que tu as des questions par rapport à tout ce qu'on a vu ?
J'espère que tu es fière du résultat :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 15:48
Et voilà :3

Titre de la fiche

feat Shanya

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quo harum id quisquam provident natus reprehenderit amet esse eligendi temporibus consequuntur quos eos nobis incidunt pariatur earum, facilis dignissimos! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, inventore? Itaque quia laborum praesentium porro autem tenetur eum officiis dolorem consequatur ea laboriosam modi aut, quam obcaecati placeat minus natus?





Et oui, je suis ultra fière de moi, à part quelques soucis, j'ai très bien réussie o/ Oui, j'avais changé le type de code pour compresser le css aussi, je sais pas si c'est bien ou pas


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 15:58
Oui c'est bien mais tu ne verras pas de changement parce que tu as déjà le width dans ton premier message et donc il s'applique au 2ème aussi vu que c'est même sélecteur.
Le mieux quand tu modifies un code est de supprimer le code précédent pour ce débarrasser du premier CSS.

Pour HTML compressor

J'ouvre le lien, je colle tout mon code dans source

Code:
<link href="https://fonts.googleapis.com/css?family=Sacramento|Tangerine" rel="stylesheet">
<div class="shan_fiche">
  <h1>Titre de la fiche</h1><img src="https://img2.lght.pics/jUzg.png" />
  <h6>feat Shanya</h6>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quo harum id quisquam provident natus reprehenderit amet esse eligendi temporibus consequuntur quos eos nobis incidunt pariatur earum, facilis dignissimos! Lorem ipsum, dolor sit
    amet consectetur adipisicing elit. Illum, inventore? Itaque quia laborum praesentium porro autem tenetur eum officiis dolorem consequatur ea laboriosam modi aut, quam obcaecati placeat minus natus? </p>
</div>
<style>
  .shan_fiche {
    background-color: aliceblue;
    padding: 20px 0;
    margin: auto;
    text-align: center;
    font-family: 'sacramento'
  }

  .shan_fiche h1 {
    color: #fff;
    background-color: skyblue;
    padding: 20px;
    width: 500px;
    text-align: center;
    margin: 0 auto 10px
  }

  .shan_fiche h6 {
    background-color: beige;
    width: 500px;
    height: 30px;
    color: lightgrey;
    text-align: right;
    padding: 20px;
    margin: auto;
    font-family: 'tangerine';
    font-size: 20px;
  }

  .shan_fiche p {
    background-color: beige;
    width: 500px;
    height: 200px;
    margin: auto;
    text-align: justify;
    font-family: arial;
    padding: 20px;
    color: darkcyan;
    border-bottom: 5px solid skyblue;
  }

  .shan_fiche img {
    width: 500px;
  }
</style>

J'ouvre les options en cliquant sur "show options" (sans changer code type)
Et dans HTML Tags and Spaces je choisis agressive minimization et je compresse.

L'outil compresse automatiquement le HTML et le CSS donc pas besoin de recompresser le CSS à part.


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 16:22
Oooooh d'accord je vois, donc je me compliquais la vie quoi merci pour l'explication Reine :) et sinon le code, comme tu me l'as expliquée, a été enlevé plus haut ♥️ **


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 17:39
Super :3

Merci pour le joli cadeau :3

C'est drôle parce que je t'ai fait un cadeau aussi et j'en ai profité pour la maquette du prochain exercice x)

J'espère qu'il te plaira :3

Spoiler:



Je le remettrai sur le bon sujet quand tu auras une boite à cadeaux :3

Voici donc notre prochain exercice :



Icône décorative

Je te laisse faire un essai par toi-même pour pratiquer tout ce qu'on a vu :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 17:44
Oooooooooh merci pour le zolie cadeau ** Alors une petite question avant, le "by reine" tout en bas, c'est le crédit ?


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 22 Juil 2018 - 17:46
De rien :3

Oui c'est le crédit. j'ai oublié de donner les codes couleurs #fee0d5 pour le rose et #a2030a pour le rouge.
La police est Oliver Quin mais je crains qu'elle ne soit pas dispo sur Google fonts, sorry, tu peux donc mettre une autre police de ton choix :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Lun 23 Juil 2018 - 16:39
Salut :) J'ai fais ça, mais la bordure sous le titre, je t'avoue que je vois pas pourquoi elle est aussi longue :( https://codepen.io/Shanriya/pen/qyrGGX


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Lun 23 Juil 2018 - 19:23
C'est rare de voir un code aussi propre,
I'm happy

Pour la bordure, h2 étant un bloc, il prend par défaut toute la largeur disponible. Pour réduire la bordure il suffit donc de lui mettre une largeur plus petite que celle de la fiche.

Je ne sais pas si tu as remarqué mais le feat sort un peu du cadre de la fiche. C'est parce que tu as fixé la hauteur totale de la fiche mais avec le contenu elle n'est pas suffisante.
Tu peux supprimer height du bloc parent pour que ça s'ajuste automatiquement au contenu, c'est mieux que de galérer pour calculer la hauteur idéale pour que tout rentre dedans.

Sinon pour le crédit, sémantiquement, c'est un crédit et non un titre, il me semble qu'une span aurait suffit :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 231
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Lun 23 Juil 2018 - 19:39
Coucou :) Oww merci pour le compliment, c'est grâce à toi ** et i'm boulet, j'ai pas capté que j'avais mis h6 pour le crédit Comme ceci ? https://codepen.io/Shanriya/pen/qyrGGX


Et j'ai ajoutés quelques trucs parce que c'était trop fade pour moi :c


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