Classe N°8 | Pizi - Page 3

Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Jeu 28 Fév 2019 - 23:14
Pour moi ce n'est pas bon.
Laisse-moi te poser ces quelques questions :

Pourquoi on utilise le positionnement et dans quel cas ?
C'est quoi un position: relative; un position: absolute; et un position: fixed ?
Quelle est la différence ?




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Ven 1 Mar 2019 - 10:19
Coucou,

Ah mais non mais non mais non pardon !!! Classe N°8 | Pizi - Page 3 884671159

J'ai compris en fait le souci. Là ça devrait être mieux :



Happyness


Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Ven 8 Mar 2019 - 13:22
Coucou :3

Oui je suis en retard, pardon j'ai eu du mal à passer trop de temps sur le forum et les cours ça prend du temps et tout :3

Alors alors.
Code:
.pizibox{
  position: absolute;
  height: 520px;
  width: 600px;
  background-color: #e0bfc8;
}

On a dit qu'on veut surtout garder les éléments dans le flux sauf si on a pas le choix. Donc si tu mets ta fiche dans un message, elle sera par défaut et logiquement dans le bloc du message et on a aucun raison de la mettre autre part, si ? position: absolute va mettre le bloc en haut à gauche de la fenêtre du navigateur si aucun parent n'est positionné en relatif. Alors, veux-tu bien m'expliquer pourquoi tu veux que ta fiche RP flotte en haut à gauche du forum où sera mise la fiche ? :p
Si tu veux ajouter de l'espace à l'intérieur d'un bloc, on utilise l'outil magique padding :3

Dans notre schéma la seule chose qui est hors-norme est l'image juxtaposée au texte. Tu as mis le texte avant l'image en HTML, c'est peu commun mais ce n'est pas faux, quand on sort un élément du flux, son ordre n'a plus d'importance. Donc là on est obligé de sortir l'un ou l'autre du flux.

Code:
.pizitextbox{
  position: absolute;
  margin-left: 230px;
}

Ici tu as sorti le bloc texte du flux ce qui fait que l'image l'a remplacé, tu as mis une marge qui égale plus au moins la largeur de l'image, c'est intelligent, bravo. C'est un peu le même principe pour centrer une barre de navigation qui a une largeur fixe si tu t'en rappelles.
Petit détail : comme je l'ai dit un peu plus haut, sans parent positionné ton bloc peut très bien se mettre en haut de la page ce qui sera désagréable, le mieux est donc fixer son parent comme référence (c'est à dire mettre le bloc parent ici pizibox en relatif).
Sur codepen tu vois pas la différence surtout parce qu'il n'y a aucun élément avant ta fiche, mais sur un forum, il y a souvent ces petites surprises désagréables qu'on préfèrerait éviter.

Voilà c'est tout, dis moi s'il y a des choses que tu ne comprends pas, c'est maintenant ou jamais /pan.

En tout cas tu as fait du très bon travail :3





Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Ven 8 Mar 2019 - 15:05
Coucou,

Pas de souci, ne t'en fais pas, j'ai été très chargée (et fatiguée) cette semaine donc pas besoin d'excuses, je t'aime toujours autant Classe N°8 | Pizi - Page 3 3775839356

Merci beaucoup, du moins j'aurais aimé y arriver toute seule comme une grande, mais ça viendra avec le temps ^^

Voici la correction du code :



Coeur 2


Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Ven 8 Mar 2019 - 16:34
Tu t'en es sorti très bien, t'en fais pas.
Rappelle-toi juste quand tu veux mettre en absolute ou fixed qu'il faut positionner par rapport à quelque chose. Et pour définir cette chose en référence, il faut lui mettre un position: relative.

Alors toujours dans l'optique du positionnement : que sais-tu du float ?




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Dim 10 Mar 2019 - 20:50
Coucou,

Merci beaucoup, ça me touche vraiment :)
Je me sens beaucoup progresser alors c’est cool :)

Alors pour moi le float c’est la position du bloc par rapport à un bloc de référence.
Non?


Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Dim 10 Mar 2019 - 22:33
Coucou :3

C'est un peu vrai mais pas tout à fait. Voyons donc le float en détail.



Je te laisse donc examiner ces deux exemples et me dire si tu as du mal à comprendre quoique ce soit.




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Lun 11 Mar 2019 - 10:21
Coucou,

Non non tout est clair sur le float du coup ^^


Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Lun 11 Mar 2019 - 17:07
Super :3

Petit exercice d'entrainement alors :3

Classe N°8 | Pizi - Page 3 Ffcf6ece-0c68-4e0e-bd45-f5f0d6bc974a

Je te donne le HTML parce que je suis gentille il faut coder dans cet ordre sans toucher au HTML
Code:
<img src="http://nsm07.casimages.com/img/2018/02/05//18020506013312811115537392.png">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quasi quibusdam velit officiis soluta aliquam doloremque. Cupiditate quas tempore amet quae aliquid quaerat, sint quidem repellat molestiae. Velit, doloremque! Eaque.</div>
<img src="http://nsm07.casimages.com/img/2018/02/05//18020506012912811115537391.png">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quasi quibusdam velit officiis soluta aliquam doloremque. Cupiditate quas tempore amet quae aliquid quaerat, sint quidem repellat molestiae. Velit, doloremque! Eaque.</div>

<p>The most beautiful people we have know are those who have known defeat, known suffering, known struggle know loss and have found their way out of the depths. These persons have an appreciation, a sensitivity, and an understanding of life that fills them
  with compassion, gentlness and a deep loving concern. Beautiful people do not just happen. </p>

La couleur du fond c'est aliceblue. Les div devraient faire la même taille que les images, soit 150x200.

Voilà je te laisse faire un essai :3




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Mar 12 Mar 2019 - 10:54
Coucou,

J'ai fait un petit essai mais mes images se placent à gauche du texte.
Elles sont dans le bon sens si je place tout à droite mais du coup, je ne parviens pas à tout ramener à gauche...

[hide]
Codepen

CSS :
Code:

div{
  background: aliceblue;
  float: left;
  width: 100px;
  height: 180px;
  overflow: auto;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
}
img{
float: left;
}
p{
  width: 550px;
  background: aliceblue;
  padding: 10px;
  clear: left;
  texte-align: justify;
}

Ai-je mal fait quelque chose? Classe N°8 | Pizi - Page 3 514879035


Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Mar 12 Mar 2019 - 11:50
C'est parfait, je suis contente que tu as bien compris le float.
En fait on ne va pas ramener le tout à gauche, parce que logiquement on a demandé aux blocs de se placer à l'extrême droite. Alors tu peux remettre le tout à droite.

Pour mettre à gauche on aura besoin de définir une largeur fixe au bloc parent, vu que le float place les éléments aux extrémités de leur bloc parent. Ici vu qu'on a les balises directement dans le HTML sans aucune balise qui entoure le tout, par défaut c'est la balise "body" qui entoure le contenu d'une page HTML.
Du coup si tu veux quand même mettre à gauche ou même centré ta mini-fiche c'est sur body qu'il faut agir.

Et sinon tes div ne font pas la largeur des images, mais ça c'est pas grave.




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Mar 12 Mar 2019 - 14:18
Coucou,

Ah pardon pour la largeur, je n'avais pas capté que c'était la largeur des avatars Classe N°8 | Pizi - Page 3 514879035

Du coup j'ai plutôt opté pour tout à droite (pour vrai, j'ai essayé le body mais je n'y suis pas arrivée Happyness)



Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Mer 13 Mar 2019 - 23:40
Pardon, je suis sûre d'avoir répondu hier mais il m'arrive de fermer la page en oubliant de cliquer sur envoyer xD.

Donc, c'est bon pour la droite mais le paragraphe est décalé, il a une marge gauche bizarre alors qu'on a appris à mettre à l'extrême droite, pauvre petite chose *sort le fouet*

Alors comme tu le sais déjà toute page web est créé à partir du HTML. Et la structure de base d'une page HTML est la suivante :

Code:
<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
  </body>
</html>

head contient la partie invisible qui contient les informations sur la page.
body c'est la partie visible qui contient le contenu de la page.

La partie du rendu sur codepen est une page HTML vierge qu'on remplit grâce aux onglets HTML/CSS/JS.
Donc logiquement ce qu'on met dans HTML va directement dans la balise body, le CSS va directement dans la balise style qui devrait se trouver normalement dans head, etc.

Par défaut body prend toute la largeur (body c'est toute la page donc c'est normal).
Mais on peut limiter la zone où le contenu sera afficher en jouant sur le CSS du sélecteur body.
En gros si je mets width: 800px; dans body {}, body ça reste toute la page mais ce qu'il y a dedans ne va pas dépasser 800px.
Je te donne en exemple mon fichier de l'exercice. Comme tu vois le CSS relatif au body (ici background) s'applique à toute la page. Par contre le width limite la zone où sera le contenu. C'est comme une feuille A4, tu ne peux pas vraiment réduire sa largeur (nan pas les ciseaux tricheuse, je peux pas utiliser ça sur une page du navigateur), mais tu peux définir la zone où tu va écrire sans dépasser (comme les vieux cahiers grands carreaux, y a le trait rouge qui délimite la zone où il faut écrire).




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Jeu 14 Mar 2019 - 12:27
Ah parce que j'avais fait ça justement le body{} et pour test j'avais mis un fond noir car ça ne changeait rien visuellement.
Je pensais que la couleur noir se ferait uniquement sur la zone délimitée mais elle a rempli toute la page.
Du coup je m'étais dit que je n'avais pas compris et du coup j'ai laissé là ... Classe N°8 | Pizi - Page 3 514879035


Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Ven 15 Mar 2019 - 0:37
La couleur du fond je l'ai mise juste pour t'expliquer la différence entre avoir un bloc parent et agir directement sur le body. Dans l'exo ce qui nous intéresse c'est uniquement de centrer le contenu ou le mettre à gauche et ça il suffit d'avoir un width au body. Si on voulait mettre un fond on aurait pas eu d'autre choix que d'ajouter une div autour du tout.

Est-ce que c'est clair pour toi ? as-tu des questions sur tout ce qu'on a vu concernant le positionnement ?




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Ven 15 Mar 2019 - 14:20
Non, tout est clair merci beaucoup :)

Je suis prête pour la suite Classe N°8 | Pizi - Page 3 2702564696


Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Ven 15 Mar 2019 - 17:36
Alors, je te propose maintenant de revenir à cet exercice et corriger les positionnement avec ce qu'on a appris (position et float) :3

Sinon je voulais te demander si tu voudrais participer au concours de codage ? J'avais l'habitude de travailler les concours de codage en cours avec Tigrlion, sinon on fera autre chose :3




Spoiler:

Codée par Sun d'amour  Classe N°8 | Pizi - Page 3 3775839356
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 105
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
Conseiller.e
Conseiller.e
# Re: Classe N°8 | Pizile Lun 18 Mar 2019 - 13:48
Bonjour, bonjour,

J'ai modifié, j'espère que c'est bon car j'ai dû mettre plein de margin négatif (on m'avait dit d'éviter que c'était un défaut de qualité de son code de faire ça :/ )

Voici du coup une première proposition de correction :



* Croise les doigts *


Classe N°8 | Pizi - Page 3 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 : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
# Re: Classe N°8 | Pizile Ven 22 Mar 2019 - 0:12
Coucou :3
Ah c'était ça la raison pour laquelle tu m'as trouvée sadique ? xD

Bah puisque tu me dis d'avance de m'attendre à des marges négatives je sors le fouet d'avance moi aussi /pan.

Alors, un seul lien suffit pour les deux polices.

Code:
  <img src="https://i.imgur.com/vUqjSSv.png" />
Cette image est l'arrière-plan de la fiche, c'est une image de déco, si on la supprime rien ne va changer au contenu. En plus arrière-plan est littéralement background, et c'est le nom de la propriété CSS. Pour une question d'accessibilité du code, toutes les images décoratives et qui n'ont aucun "sens" pour le contenu doivent aller dans le CSS, en revanche, toutes les images qui font parties du contenu et qui ont un sens (comme les bannières, les avatars etc) doivent être mises dans le HTML.
D'ailleurs en mettant l'image du background dans le CSS, l'horrible marge de 700px va devoir disparaître.
N'oublie pas que la raison pour laquelle on a fait le cours du positionnement est de ne plus faire l'erreur de positionner avec margin.

Dans rpbox on avait utiliser le model rbga pour gérer l'opacité donc tu n'as plus besoin de la déclaration opacity:1; c'est la valeur par défaut de toute façon.

Code:
.illu {
  position: absolute;
  height: 388px;
  width: 190px;
  margin-left: 310px;
  margin-top: -65px;
  z-index: 2;
}
Alors là je vois une grosse erreur /pan
position te donne l'avantage d'utiliser les propriétés de direction top/bottom left/right. Donc on oublie les margin. D'ailleurs c'est beaucoup plus facile, tu n'as qu'à mettre 0 en haut et 0 à droite et voilà.

Alors quand on examine le schéma, à première vue, on a deux colonnes, une à gauche avec le titre et le texte et une à droite avec les avatars et le pseudo. Donc ce genre de pattern, il faut toujours penser au float vu que c'est la propriété par excellence qui permet de positionner sur les extrémités gauche et droite facilement et sans calcul.

Sinon on évite de mélanger HTML et CSS, il y a une marge sur l'avatar qui devraient aller au CSS.
Et le texte est toujours à gauche par défaut, pas besoin du text-align: left :3

Et bravo pour les positions, elles sont toutes bien placées, je suis contente :3
Je ne pointe que les petits défauts je m'en excuse mais ton code est très bien en général. Tu t'es bien débrouillée. Je me dois de pointer les petits problèmes pour qu'on en apprend et qu'on progresse bien ensemble :3




Spoiler:

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