Tutoriel Pong

Dans un premier temps, la fenĂȘtre d’affichage reprĂ©sente une image numĂ©rique en couleur dans laquelle il est possible de dessiner toute sorte de formes qui se superposent comme lorsqu’on dessine sur feuille de papier ou sur un tableau. Il s’agit d’un espace en 2 dimensions.

Il est ensuite possible d’animer le contenu de la fenĂȘtre d’affichage en modifiant le contenu de la fenĂȘtre d’affichage 30 fois par seconde de la mĂȘme maniĂšre qu’un film ou qu’un dessin animĂ©.

Nous utiliserons donc un repĂšre mathĂ©matique avec un origine, un axe des abscisses et un axe des ordonnĂ©es oĂč chaque point $M$ est repĂ©rĂ© par deux coordonnĂ©es $x$ et $y$ : $$ M(x,y) $$

En rĂšgle gĂ©nĂ©rale, les Ă©crans utilisent un systĂšme de coordonnĂ©es Ă  deux dimensions pour positionner les objets affichĂ©s. Par convention, l’origine se situe en haut Ă  gauche de la fenĂȘtre d’affichage, les abscisses sont orientĂ©es de la gauche vers la droite, et les ordonnĂ©es du haut vers le bas : De plus, l'unitĂ© est le pixel.

Chaque élément HTML possÚde des marges extérieures décrites par la propriété margin (à ne pas confondre avec la marge intérieure padding). Elle décrivent les espacements des bords de la div avec ses voisins et son conteneur : On peut préciser les marges de plusieurs maniÚres, par exemple :
Description Valeur CSS
marge de 10px autour de la div margin:10px;
marges différentes pour chaque cÎté (préciser les valeurs de top, right, bottom et left) : margin:top right bottom left;
marges gauche/droite de 10px et haut/bas de 25px : margin : 25px 10px;
Pour centrer horizontalement un élément, on donne la valeur auto aux marges gauche et droite (pour équilibrer) :
margin : auto;
ou
margin : 10px auto 20px auto;
ou
margin : 10px auto;
Dans la capsule suivante, modifier le script css afin de : centrer l'Ă©lĂ©ment rouge d'id madiv donner des marges extĂ©rieures diffĂ©rentes pour chaque cĂŽtĂ©. coller la div rouge Ă  droite de la fenĂȘtre. Pour visualiser le rĂ©sultat, cliquez sur ViewApp.

Indice 1

 Donner la valeur auto à la propriété margin

Indice 2

 Donner par exemple la valeur 10px 0 25px 100px à la propriété margin

Indice 3

 Donner la valeur 0 Ă  la marge droite avec margin : auto 0 auto auto, ou plus directement margin-right:0
Les propriétés margin-top, margin-right, margin-bottom et margin-left existent indépendamment. La propriété margin est un raccourci. Par défaut, les éléments HTML sont affichés dans l'ordre du fluxLe flux HTML correspond aux positions données aux éléments HTML par le navigateur au fur et à mesure qu'il les rencontre dans le code de la page. Comme le sens de lecture, il part du haut vers le bas puis de la droite vers la gauche en interprétant les propriétés CSS.. La propriété position permet de "sortir du flux" en faisant "flotter" l'élément au dessus des autres.
position:absolute
Il est alors possible de prĂ©ciser sa position par rapport aux bords de son container avec les propriĂ©tĂ©s left, right, top, bottom. L'origine repĂ©rĂ© sera le coin en haut Ă  gauche de l'Ă©lĂ©ment conteneurL'Ă©lĂ©ment conteneur est le premier ascendant (parent de parent, etc.) dont la propriĂ©tĂ© position existe. : Il ne sert Ă  rien de donner des valeurs Ă  left et right Ă  la fois. De mĂȘme pour bottom et top. On privilĂ©fiera le couple left/top Dans la capsule suivante, modifier le script css : Retirer position:relative de l'Ă©lĂ©ment d'id conteneur. Que se passe t-il ? Par rapport Ă  quel point d'origine se positionne l'Ă©lĂ©ment d'id freediv ? Restaurer la css Ă  sa valeur initiale. Positionner l'Ă©lĂ©ment d'id freediv au centre de son conteneur. coller la div rouge Ă  droite de la fenĂȘtre. Pour visualiser le rĂ©sultat, cliquez sur ViewApp.

RĂ©ponse 1

 L'origine est maintenant le point en haut à gauche de l'élément body.

RĂ©ponse 2

 En tenant compte des largeurs et hauteurs des deux div, on obtient : width:200px; top:225px;

RĂ©ponse 2bis

 On peut faire faire le calcul par la css : width:calc((500px - 200px)/2); top:calc((500px - 50px)/2);
  1. Un élément en position absolue sera toujours positionné par rapport à un élément ascendant (pÚre, grand-pÚre, etc.) qui a une propriété position spécifiée (relative, absolute, etc.)
  2. Pour centrer horizontalement un élément en position absolue, margin:auto ne fonctionnera pas. Il sort du flux, et n'est plus positionné par rapport aux autres éléments.
 Pour en apprendre davantage sur le positionnement CSS, on recommande les ressources de W3schools (anglais) et Mozilla (français) : Cours W3schools sur le positionnement en CSS trÚs complet et pédagogique. Cours Mozilla sur le positionnement en CSS trÚs complet et pédagogique.