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°6 | Carolinele Sam 9 Juin 2018 - 23:22
C'est bon pour la div, tu l'as mise au bon endroit :3

Si tu veux appeler ta div "bloc", il faut mettre en attribut class="bloc" :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 10 Juin 2018 - 14:29
Voilà c'est fait :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Dim 10 Juin 2018 - 23:08
Coucou :3

Désolée du retard, je devais corriger un peu le tuto avant de te le montrer :3
Voici donc un petit tuto qui explique comment utiliser les class et id.

lier html et css

N'hésite pas à remettre le lien de ta fiche dans tes réponses, sinon je dois chercher à chaque fois dans l'autre page et je ne sais pas si c'est le lien actualisé ou pas, parce que là je ne vois aucun changement par rapport à ton message précédent :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 11 Juin 2018 - 19:23
Hey :3
Je déteste m'avouer vaincu mais là j'avoue être perdu, dans le sens je comprends ce que je dois faire mais quand je veux l'appliquer, je bloque :-/


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 11 Juin 2018 - 19:52
Pas de soucis t'en fais pas :3

Tu peux mettre le lien de ta fiche actuelle ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 11 Juin 2018 - 22:50
Bah voilà tu as mis la classe c'est parfait :3
Pour mettre en forme le fond de la fiche, on utilise le nom de classe en tant que sélecteur au lieu de la balise cette fois :3

Donc on va mettre

Code:
.bloc {
propriété : valeur;
}

Le point est important, c'est ce qui fait comprendre au navigateur que bloc est le nom d'une class.
Comme tu le sais déjà pour les balises on ne met rien.
Et comme vu dans le tuto, pour les id on met un dièse #

Donc dans le CSS, tu peux mettre une largeur à ta fiche avec width, fais en sorte qu'elle soit supérieur à la largeur qu'on a pris pour les éléments h1, p etc, sinon on verra pas le changement.
Tu peux ajouter un background aussi avec une couleur ou même une image, des bordures, une hauteur peut-être ..., fais-toi plaisir :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mar 12 Juin 2018 - 21:50
Voilà j'ai apporté les modifications :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Mer 13 Juin 2018 - 0:44
C'est très bien, bravo ma caro :3

A savoir que color détermine la couleur du texte, ici tu as déjà mis ton texte en rouge donc si tu mets color white ça ne sert pour l'instant, mais si on ajoute du texte dans la div là ça va se mettre en blanc.
Aussi, la div est un bloc non sémantique, elle n'a aucune mise en forme par défaut, donc margin:0 ça ne sert à rien aussi parce que la div est déjà à 0. Tu peux par exemple mettre margin: 0 auto; pour centrer ton bloc :3. le premier 0 veut dire que verticalement il n'y a pas de marges et la deuxième valeur "auto" veut dire qu'on va centrer automatiquement notre bloc sur l'axe horizontal.

Pour compléter le contenu de notre fiche, ajoutons un crédit. Donc en bas après le paragraphe, on va ajouter "Caroline sur Epicode" pour un truc du genre :3
Peux-tu mettre le mot Epicode en tant que lien ? Connais-tu la balise lien ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mer 13 Juin 2018 - 7:03
Hey :3
J'ai mis le crédit mais je sais pas si je l'ai fait comme il fallait ?
https://codepen.io/laura-pamart/pen/bKbozm?editors=1100#0


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Mer 13 Juin 2018 - 13:24
Oh mais c'est parfait, je suis impressionnée :3

Pour mettre en forme le lien, on va utiliser ce qu'on appelle un sélecteur de descendants.
Ce sélecteur nous permet de cibler exclusivement les éléments qui sont à l'intérieur d'un autre élément.
C'est à dire si on met par exemple

Code:
a {
color: red;
}

Tous les liens de la fiche deviendront rouges

Par contre si on utilise le sélecteur de descendants

Code:
.mafiche a {
color: red;
}

Seuls les liens à l'intérieur du bloc mafiche seront rouges.

Ceci va nous servir pour mettre en forme une partie sans qu'une autre partie soit touchée. Imagine par exemple que le fond des paragraphes de tes catégories est bleu. Si tu mets

Code:
p {
background-color: blue;
}

Tous les paragraphes sur ton forum auront un arrière-plan bleu. Or ce n'est pas toujours pratique, tu veux que dans les fiches ou dans le règlement les paragraphes soient en rose ou en blanc. Donc ce qu'on fait est combiner le nom de class de la partie qu'on va mettre en forme avec la balise pour que seule cette partie soit touchée. Par exemple :

Code:
.categorie p {
background-color: blue;
}

Quand on a une balise à l'intérieur d'une autre, on appelle la première la balise parente et celle à l'intérieur l'enfant, donc son descendant, d'où le nom du sélecteur de descendants.

Tu as du remarquer que les liens sont par défaut "décorés" donc soulignés. Pour enlever le soulignement on utilise la propriété text-decoration : none;
Pour souligner du texte quelconque on utilise text-decoration : underline; (qui veut dire souligner en anglais).

Voilà j'espère que c'est clair, sinon n'hésite pas à me poser des questions :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mer 13 Juin 2018 - 15:02
J'ai essayé le text-decoration: none; mais cela n'a pas enlevé le soulignement du lien d'Epicode :-/


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Mer 13 Juin 2018 - 17:03
Tu as mis le CSS dans la class credits, or comme je t'ai expliqué un peu plus haut, il faut combiné la classe et la balise lien pour cibler le lien du bloc credits de cette façon : .credits a { }

Pourquoi tu as tout transformé en div ? On garde les balises sémantiques et on n'utilise la div que là où on ne peut pas utiliser une balise sémantique.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mer 13 Juin 2018 - 19:19
Alors pour les div, c'était juste pour tester quelque chose ^^
Ah mince j'avais pas fait gaffe que j'avais oublier le a >_<


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Jeu 14 Juin 2018 - 0:10
Roooh c'est trop parfait x)
Good job sweety :3



Je te laisse déjà voir et tester ces propriétés avant de voir les autres :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 14 Juin 2018 - 6:48
Voilà je les ai tester :3
J'ai enlever l'une des deux polices car elle ne me convenait plus trop :-/


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Ven 15 Juin 2018 - 23:11
C'est très bien :3
Voyons alors d'autres propriétés liées au texte.



Voilà donc pour la 2ème partie, encore une fois tu peux tester et me poser des questions si tu en as :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 17 Juin 2018 - 22:52
Hey :3
J’en ai testé quelques uns mais je n’en ai laissé qu’un seul :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 18 Juin 2018 - 13:06
C'est bon :3
Voyons comment on peut mettre la fiche sur le forum.

Chaque forum a son propre CSS dans la feuille de style, en plus du CSS de base de FA. On veut que notre code évite d'interférer un 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, on a pris les noms "bloc" et "credits", le souci c'est que ce sont des noms plutôt commun et qui risque de figurer déjà dans le CSS du forum.
Si tu observes mon CSS pour ta commande par exemple, tu trouveras des classes du genre "rdt_links", 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 mets img {width: 200px} toutes les images sans exception sur le forum seront affectées et ce sera horrible. C'est pourquoi on utilise les sélecteurs combinés. On va donc utiliser le nom de classe de notre fiche et le combiner avec le type de balise dans le CSS. Donc au lieu d'avoir h1 {} on aura .bloc h1 {} etc.

Je te laisse donc d'abord modifier ça et réajuster les couleurs ou les tailles, enfin comme tu veux, l'essentiel est de rendre la fiche utilisable sur un forum et peut-être la mettre en LS :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 18 Juin 2018 - 20:07
Voilà c'est bon :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Ven 22 Juin 2018 - 0:08
Coucou :3

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.
Code:
<style> CSS </style>

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. 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 pour voir ce que ça donne et corriger les petits bugs qui apparaissent à cause du CSS de base de FA.

Je te laisse donc déjà lier 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 : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Ven 22 Juin 2018 - 7:18
Hey !
J'ai donc suivi ce que tu as dit et voilà :



Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Ven 22 Juin 2018 - 7:20
Désolée pour le DP mais l'écart présent quand je le met sur épicode n'est pas présent sur mon forum test :http://hpfor.forumactif.com/t10-test-fiche-rp-reine#10


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Ven 22 Juin 2018 - 11:51
Coucou :3

C'est très bien, j'espère que tu es contente du résultat :3

Alors pour la balise style, elle se met normalement dans la partie head comme la balise link, donc ici on va la sortir du corps du message et on va la mettre au début ou à la fin.

L'espace sur epicode vient du fait que ici on a opté pour le model en border-box. Ce n'est pas le model par défaut.
Par défaut, la largeur totale comme on l'a vu est égale à la somme de width + padding horizontaux + border horizontaux. Ce modèle est appelé "content-box". la limite de la largeur est définie par le contenu du bloc ou "boite", le reste (padding et borders) n'est pas pris en compte dans la largeur.
Donc pour avoir la même largeur tu as changé width en fonction de tes padding et border, ce qui est parfait.

Sur Epicode, on a changé ce modèle via le CSS et Chesh' a opté pour le model "border-box" qui veut dire que la largeur est définie jusqu'à la bordure. Dans ce modèle qu'on verra en détails un peu plus tard, la largeur de la boite est égale à width. Le padding et border sont automatiques réduit de la valeur de width par le navigateur. C'est à dire si tu mets width: 500px; le navigateur fait en sorte que peu importe la valeur du padding et des bordures, la largeur totale sera 500px.

Alors, pour l'exemple de ta fiche, tes blocs devraient prendre toute la largeur du bloc de toute façon, donc le plus simple est de ne pas mettre une largeur définie à ces blocs là. Si tu ne mets pas de width, le bloc va prendre toute la largeur disponible et donc automatiquement la largeur du bloc parent Caro_bloc.

Sinon n'hésite pas à éditer ton message pour pas faire des DP, si j'ai pas répondu c'est que je n'ai pas encore lu ton message :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Ven 22 Juin 2018 - 11:58
Oui j'aime bien *^*

Donc je dois enlever les width au endroits où c'est trop grand ou juste les modifier ?


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

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