Classe N°8 | Pizi - Page 4

Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 118
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Mer 10 Juil 2019 - 11:09
Coucou @Reine des Ténèbres,

Comment vas-tu ? Contente de te retrouver ! Classe N°8 | Pizi - Page 4 1840524174
Désolée, je n'avais pas vu ton message.

Ahahahah ça y est, je crois que j'ai compris la logique et dompté la bête Classe N°8 | Pizi - Page 4 665834366



Qu'en dis-tu ? Happyness


Classe N°8 | Pizi - Page 4 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3181
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Mer 10 Juil 2019 - 20:06
C'est bien, je vois que tu as compris.
Pour t'expliquer un peu pour le margin-left vs left.
- les propriétés top, right, bottom et left sont utilisés uniquement avec la propriété position. ça tu le sais déjà.
- Je rappelle alors que ces propriétés ajoute de l'espace si leur valeur est positive et en retire si elle est négative.
Donc si je prends cette partie en exemple :
Code:
.pseudobox {
  position: absolute;
  right: 0px;
  bottom: 10px;
  margin-right: 15px;
}

right et bottom sont utilisés avec position donc c'est correct.
bottom : 10px veut dire que notre élément sera placé à 10px du bord bas du bloc parent.
right: 0 (on ne met pas d'unité avec 0) veut dire que l'élément sera collé au bord du bloc parent, or tu as ajouté une marge de 15px à droite, donc tu auras pu simplement mettre right à 15px et ça te fait une ligne de moins.

Maintenant je reviens au bloc du texte.
Si tu vois ton code HTML tu as une div pour le titre suivi d'une div pour le texte et puis une div pour l'image et une autre pour le reste.
logiquement tes div seront placées l'une au dessous de l'autre. Mais selon notre schéma on veut que l'image et le bloc en dessous soit à droite. Donc toujours dans la même logique, on n'a pas besoin de déplacer le titre et le texte et du coup tu n'as pas besoin de les positionner en fait.

Si et seulement si, tu avais divisé ton HTML en deux blocs (c'est tout à fait possible avec ce genre de schéma) tu aurais deux gros blocs, Le titre et le texte à gauche et le reste avec l'image pseudo et avatars à droite. Dans ce cas tu aurais pu positionner tes deux blocs avec le float, l'un à droite l'autre à gauche et c'est fini. Mais tu as opté plutôt pour le positionnement avec position, ce qui n'est pas faux, il faut juste ne pas mélanger les deux sur un même bloc. D'ailleurs comme je viens de le dire, là aussi le positionnement avec position est simple vu que tu ne vas positionner que la partie de droite, la partie gauche étant déjà dans le flux.
Donc ici tu dois enlever le float que tu as ajouté, sinon tu peux très bien supprimer position : absolute et le z-index qui va avec tu verras que rien ne va changer parce que c'est déjà la position initiale du bloc.

Code:
.rpbox {
  position: absolute;
  float : left;
  background: rgba(255, 255, 255, 0.5);
  width: 280px;
  height: 610px;
  overflow: auto;
  padding: 10px 5px 0px 20px;
  margin-left: 10px;
  font-family: Times New Roman;
  font-size: 12px;
  color: #ffffff;
  z-index: 1;
}




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 4 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 118
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Jeu 11 Juil 2019 - 17:22
Coucou,

Merci beaucoup pour ces éléments.
Oui en me débattant pour placer le bloc d'avatars sur le côté droit, je me suis rendue compte que j'aurais complètement pu faire en deux blocs.
La maîtrise du positionnement facilite grandement le codage, je vais tâcher dorénavant de m'en servir dans mes codes et de remplacer mes vilaines marges Classe N°8 | Pizi - Page 4 3775839356

En effet, je remarque qu'en retirant le positionnement et le z-index de la rpbox, rien n'a changé. Ouf ! Classe N°8 | Pizi - Page 4 1066248963

Je me suis beaucoup débattue avec ce code et le positionnement. En fait, je me rends compte que je me compliquais énormément la tâche mais aussi parce que je méconnaissais beaucoup les choses. Il y a encore du chemin mais dors et déjà un grand merci pour cette belle leçon. Classe N°8 | Pizi - Page 4 1840524174



Classe N°8 | Pizi - Page 4 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3181
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Jeu 11 Juil 2019 - 21:24
Après modifications ton code devrait être parfait.
Je suis contente que tu aies réussi à apprendre plein de choses avec cet exercice.
J'espère que tu es fière du résultat.

Veux-tu qu'on passe à autre chose où qu'on fasse un autre exo sur le positionnement ?




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 4 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 118
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Jeu 11 Juil 2019 - 21:43
Recoucou,

J'ai compris maintenant et j'imagine que de toute façon je serai amenée très souvent à utiliser ce que tu m'as appris, je pense qu'il serait pas mal de passer à autre chose Classe N°8 | Pizi - Page 4 3775839356

À quelle sauce veux-tu me manger prof prof ? Classe N°8 | Pizi - Page 4 2979024130


Classe N°8 | Pizi - Page 4 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3181
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Jeu 11 Juil 2019 - 23:25
Sauce de soja ?

Travaillons sur les balises et les sélecteurs, le positionnement viendra naturellement en effet.
Je te dis d'avance que notre prochain exercice sera une fiche de personnage.

On va travailler en premier temps sur les balises et donc le HTML.

Fais-moi un récap sur tout ce que tu sais sur les balises de titre, de paragraphe et des listes.




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 4 3775839356
Contenu sponsorisé
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum