Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# 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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Ven 1 Mar 2019 - 10:19
Coucou,

Ah mais non mais non mais non pardon !!!

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



Happyness




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 : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# 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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# 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

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




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 : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# 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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# 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?




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 : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# 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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Lun 11 Mar 2019 - 10:21
Coucou,

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




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

Petit exercice d'entrainement alors :3



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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# 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?




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 : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# 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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# 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

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)





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 : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# 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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# 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à ...




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 : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# 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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Ven 15 Mar 2019 - 14:20
Non, tout est clair merci beaucoup :)

Je suis prête pour la suite




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 : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# 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
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# 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 *




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum