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 25 Juil 2018 - 12:14
J'ai pas tout compris mais d'accord prends ton temps :3

Donc le display n'a aucune raison d'être là parce que c'est déjà un bloc.
Visibility ne dit pas à ton bloc "vas-y casse-toi, j'ai besoin de ton espace"
Elle lui dit juste "viens essayer la cape magique de Potter, tu seras toujours là mais personne ne pourra te voir"
D'où le grand vide que tu as avant les relations. Donc pour l'instant on ne va pas cacher notre bloc pour pouvoir le mettre en forme et le positionner après correctement derrière l'avatar.
Pour l'opacité tu l'as mise à 1 donc ton bloc reste opaque il n'y a pas de transparence. Si tu veux gérer la transparence tu dois mettre une valeur entre 0 et 1 si tu mets 0 ton bloc sera totalement transparent et donc invisible et si tu mets 1 c'est que tu n'as rien changé c'est la valeur par défaut.


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 25 Juil 2018 - 18:18
Ah :o
HARRYYYYYYYYYYYYYY Hm hm, excuse moi un chat dans la gorge ^^"

Je vois ! Qu'est-ce que je dois faire maintenant ?


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 26 Juil 2018 - 18:46
Il me semble que c'est bon, bravo :3

Il reste une propriété visibility dans li à enlever.

Sinon, est-ce que tu te rappelles de la propriété box-sizing ? Sais-tu comment l'utiliser ?


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 26 Juil 2018 - 22:25
Je me rappelle de la propriété mais nan °°


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 29 Juil 2018 - 1:01
Coucou :3

Je m'excuse pour le retard :3

Alors on en a un peu parlé ici.
Box-sizing est la propriété qui nous permet de gérer le modèle de boite pour lequel on va opter. Il prend deux valeurs. content-box est la valeur par défaut. La largeur totale du bloc sera donc modifié selon les paddings et borders. La seconde valeur est border-box, c'est donc le modèle où la largeur width = la largeur totale du bloc et donc les paddings et borders seront réduits de la largeur du bloc.

Pour te donner un exemple plus concret. ton bloc derrière à la même largeur et hauteur que ton avatar mais visuellement il est plus grand parce que le padding s'ajoute à la valeur de width. La largeur totale est donc width + paddings horizontaux + bordures horizontales. C'est le mode "content-box" qui est le mode par défaut.

Dans le bloc des infos on va ajouter un box-sizing: border-box. Tu verras donc que la largeur totale sera exactement la même que la valeur de width. les paddings seront donc mis à l'intérieur sans déformer le bloc. C'est le mode border-box.


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 29 Juil 2018 - 9:43
Je vois !
J'ai ajouté la modification :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 29 Juil 2018 - 14:24
Tu pourrais remettre le lien quand tu fais des modifications ? :3
Le lien n'est pas toujours automatiquement mis à jour :3

En attendant découvrant un sélecteur assez intéressant.


Le sélecteur universel * (étoile)

Ce sélecteur permet d'appliquer des propriétés CSS à l'ensemble des éléments de la page HTML. C'est à dire que chaque propriété sera appliquée à chaque élément de la page sans exception, c'est pourquoi il faut faire très attention quand on l'utilise.
Voici un exemple :



C'est un sélecteur qu'on va éviter dans une commande par exemple puisqu'il aura un impact sur l'ensemble du forum et non seulement la partie qu'on a codé.

On peut par contre appliquer du CSS uniquement sur la partie qu'on a codé en utilisant le sélecteur de cette partie en combinaison avec le sélecteur universel.

Par exemple :
Code:
.categorie * {margin: auto;}

va mettre tous les éléments à l'intérieur du bloc dont le nom de class est categorie en auto.

Ce sélecteur est au fait utilisé par les codeurs professionnels pour définir le modèle en box-sizing à tout le code et aussi pour réinitialiser le CSS par défaut de toutes les balises. C'est à dire tu auras un truc du genre :
Code:

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

border-box va faciliter notre codage car on aura pas à calculer les largeurs et hauteurs par rapport aux paddings et bordures.
margin: 0; va supprimer les marges de tous les titres hn, les paragraphes et les listes. Enfin tout ce qui a des marges de base.
padding:0; va supprimer donc les paddings des éléments de liste li et dd qui ont normalement un padding-left par défaut.
C'est un peu comme transformer tes balises sémantiques en div.

On va donc transférer noter box-sizing sur le sélecteur combiné avec le sélecteur universel pour qu'on ne se soucie plus des calculs de largeur et hauteur. Pour la réinitialisation des margin et padding, je te laisse le choix si tu veux le faire ou pas, si tu penses que ça rend ton codage plu simple tu peux.


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 7 Aoû 2018 - 21:29
Bon.. a honte

Après avoir essayer de comprends à plusieurs reprises, j'avoue ne pas avoir tout compris ;-;

UP

Au final, j'ai essayé de me remettre dessus après quelque jours et voici ce que j'ai fait : https://codepen.io/laura-pamart/pen/yqgxXR


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 20 Aoû 2018 - 23:17
Coucou Caroline :3
Désolée de l'attente, j'ai beaucoup trop profiter de mes vacances on dirait

Alors pour là où on ait il me semble que tu as bien utilisé le sélecteur universel, par contre on va le mettre à toute la fiche et pas seulement le premier bloc. Et n'oublie pas de mettre un petit espace entre la classe et l'étoile.

Et dis moi qu'est ce que tu n'as pas compris exactement comme ça je pourrai t'expliquer plus :3

J'imagine que tu n'as pas paressé pendant ce temps, c'est génial ! (pendant que je paressais au fait)
Si tu as des choses à me montrer ou si tu as besoin d'aide pour quelque chose en particulier, n'hésite pas


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 26 Sep 2018 - 18:11
Bonsoir !

J'ai fait la petite modification et entre temps j'ai réussi à comprendre ce que je n'avais pas compris :3

Pendant ton absence, ou avant je ne sais plus trop, j'ai fait ça pour Eskimo :

- https://codepen.io/laura-pamart/pen/MBLqaZ

- https://codepen.io/laura-pamart/pen/KBEyza


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 Sam 6 Oct 2018 - 19:29
Coucou @Caroline,

Je suis vraiment désolée, je viens tout juste de voir ta réponse, je croyais que tu étais encore occupée avec les cours, j'ai même pas remarqué que tu avais posté ici, honte à moi :/

Je vais voir ton code ce soir et te répondre en conséquence :3

Encore désolée Sad, n'hésite pas à me relancer ou m'envoyer un MP si je réponds pas dans 3 jours. Normalement je surveille le sujet, je ne sais pas trop pourquoi j'ai raté la notification ...


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 23 Oct 2018 - 18:57
Hey !
Excuses moi j'avais oublié de répondre >_<

Ce n'est pas grave Reine, t'inquiètes pas ♥️


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 Mar 23 Oct 2018 - 19:37
Coucou :3

Pas de soucis :3

Alors pour tes codes c'est vraiment bien, j'en suis fière :3

Parlons d'abord du règlement.
Ton code est propre et lisible, on peut facilement s'y retrouver, je te félicite pour ça.

HTML :
Je suis contente de voir que tu as utilisé des balises sémantiques, on a h4 et p ce qui est bien mais autant y aller jusqu'au bout.
Plutôt qu'une div avec la classe Titre, il serait plus convenable d'utiliser h1. D'ailleurs tu as réinitialisé la marge avec 0 auto ce qui est utile pour les balises hn et non pour les div. Une div n'a pas de marge par défaut.

Si quelqu'un te demande de compter jusqu'à 10 par exemple, tu ne commenceras surement pas par 4 (sauf si tu es assez folle pour le faire /pan). De même hiérarchie des titres dans un article fait qu'on commence toujours par h1 et on descend jusqu'à h6 si nécessaire. Sinon si on prend par exemple le titre de la page en compte, on peut suivre alors par h2 mais commencer par h4 est un peu bizarre :3

D'ailleurs tes sous-titres comportent des numéros ce qui nous fait penser directement à une liste numérotés ou ce qu'on appelle en HTML une liste ordonnée (ol).

Il me semble qu'on en as pas encore parlé dans le cours c'est donc l'occasion de le faire.
En HTML nous avons trois types de liste, pour cet exercice on va parler uniquement des listes ordonnées.

Liste ordonnée
Pour faire ce genre de liste on utilise la balise <ol> qui veut dire Ordered List ou liste ordonnée et donc l'ordre des éléments est important, nos éléments sont donc numérotés.

Les éléments de la liste sont mis entre la balise double li..
On peut modifier l'affichage des numéros avec du CSS "list-style-type" ou avec l'attribut "type" qui prendra les valeurs : 1, a, A, I, i.
Par défaut ol nous affiche des numéros arabes mais pour cet exo on veut des caractères roman en majuscules donc on va mettre : list-style-type : upper-roman; ou simplement list-style-type : I;
L'avantage d'utiliser une ol est que le navigateur va faire les numéros pour toi, tu n'as pas besoin de retenir à combien tu en es et tu peux facilement ajouter des entrés dans ta fiche.

Exemple :
Code:
<ol>
  <li>Sous Titre</li>
  <li>Sous Titre</li>
  <li>Sous Titre</li>
</ol>

     
  1. Sous Titre
  2.  
  3. Sous Titre
  4.  
  5. Sous Titre


Code:
<style> ol {list-style-type : upper-roman;} </style>
<ol>
  <li>Sous Titre</li>
  <li>Sous Titre</li>
  <li>Sous Titre</li>
</ol>

     
  1. Sous Titre
  2.  
  3. Sous Titre
  4.  
  5. Sous Titre


Pour ton code j'imagine quelque chose de la sorte :

Code:
<div class="Bloc_Principal">
  <h1> Titre Titre </h1>
  <ol class="Article">
    <h2> <li>Sous Titre</li></h2>
    <p>Lorem ipsum </p>
    <h2> <li>Sous Titre</li></h2>
    <p>Lorem ipsum </p>
  </ol>
</div>

Remarque que ça va nettement raccourcir ton HTML, d'ailleurs h2 n'est pas vraiment nécessaire tu peux mettre li directement, c'est juste pour faire savoir que là c'est un sous-titre.

Attention par contre tu as mis deux fois le CSS, une fois dans le HTML et l'autre dans l'onglet CSS. Garde un seul exemplaire de CSS pour bien voir là où il faut modifier.


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