Par défaut, les éléments de type bloc seront affichés dans une succession verticale.

Transcription

1 Le positionnement Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Une boîte jaune Une boîte verte Les principaux éléments de type bloc sont : l'élément div ; les titres h1, h2, h3, h4, h5, h6; le paragraphe p; Les listes et éléments de liste ul, ol, li, dl, dd; Le bloc de citation blockquote; Le texte pré-formaté pre; L'adresse address. Par défaut, les éléments de type en ligne sont affichés dans une succession horizontale. Prenons par exemple deux portions de texte différenciées par leur couleur : Une boîte jaune Une boîte verte Les principaux éléments de type en ligne sont : l'élément span; le lien a; L'image img; Les emphases em et strong; La citation q; La citation cite; L'élément code; Le texte entré par l'utilisateur kbd; L'exemple samp; La variable var; Les abréviations et acronymes abbr, acronym; Le texte inséré ins; Le texte supprimé del. positionnement.docx 1/5

2 Le positionnement des éléments Imaginons la fenêtre du navigateur comme un système de coordonnées : Si nous voulons positionner un titre à 100px du haut et à 200px de la gauche du document, notre code CSS pourrait être le suivant : h1 { position: absolute; top: 100px; left: 200px; } Le résultat sera le suivant : Le principe du positionnement CSS fait que l'on peut positionner une boîte n'importe où dans le système de coordonnées. positionnement.docx 2/5

3 Vous pouvez déterminer le mode de positionnement suivant : static absolute relative fixed (ou flux courant) Positionnement habituel de l'élément, le flux normal de l'élément, c'est-àdire le comportement naturel selon l'ordre déclaré des éléments html (réglage par défaut). Se positionne par rapport aux éléments parent et frères. Ne peut être déplacé de sa position et ignore les déclarations top, bottom, left et right. Positionnement absolu, mesuré à partir du bord de l'élément parent, c'est-à-dire se place par rapport au 1 re ancêtre (parent) positionné. Se déplace lors du défilement de la fenêtre. Permet les superpositions. Ne dépend plus des éléments qui le côtoient. S'utilise conjointement avec les propriétés : top, bottom, left ou right. Positionnement relatif mesuré à partir de l'élément parent. Sert de référent à un élément enfant en position absolue. S'utilise conjointement avec les propriétés : top, bottom, left ou right. S'apparente au positionnement absolu, mais mesuré à partir du bord de la fenêtre du navigateur. Sort du flux normal de la page. Toujours positionné par rapport au coin supérieur gauche de la fenêtre du navigateur (si non spécifié autrement) et jamais par rapport à l'élément parent. Les éléments restent fixes lors du défilement de la fenêtre du navigateur. S'utilise conjointement avec les propriétés : top, bottom, left ou right. En particulier la conduite des mentions absolute et relative déconcerte un peu au début. Car absolute se comporte après tout de façon relative. Quand il n'y a pas d'élément parent, c'est l'élément body qui est l'élément parent. La mention relative se réfère par contre à la position normale de l'élément lui même. La mention position: n'établit pas encore fermement où exactement un élément doit commencer. La mention n'a de sens que si vous mentionnez en même temps la position de départ désirée. C'est ce que vous pouvez faire par exemple avec des mentions sur la position à partir du haut (top) ou bien sur la position à partir de la gauche (left). Si vous mentionnez par exemple position: absolute; top: 30px, alors vous fixez pour l'élément concerné qu'il doit commencer 30 pixels sous le bord inférieur de l'élément parent. Si vous mentionnez par exemple position: relative; top: 5px alors vous fixez que le bord supérieur de l'élément se trouve 5 pixels plus bas qu'il ne serait normalement. Le positionnement absolu Un élément en position absolue ne reçoit aucune place dans le document. Cela signifie qu'il ne laisse aucun espace vide après qu'il est positionné. On place un élément en position absolue en fixant la valeur de la propriété position à "absolute". On peut alors utiliser les propriétés left, right, top et bottom pour placer la boîte. Le positionnement relatif On place un élément en position relative en fixant la valeur de la propriété position à "relative". La différence entre position absolue et position relative tient à la façon dont la position est calculée. positionnement.docx 3/5

4 Pour un élément en position relative, elle est calculée d'après sa position originale dans le document. Cela signifie que l'on déplace l'élément vers la droite, la gauche, le haut ou le bas. Ainsi, l'élément obtient toujours un espace dans le document après qu'il est positionné. float (Cours du texte) Un élément peut avoir une position flottante à droite ou à gauche avec la propriété float. C'est-à-dire que la boîte et son contenu peut flotter soit à droite, soit à gauche dans un document (ou dans la boîte conteneur). Cette boîte n'est plus dans le flux normal de la page. Le contenu de la boîte suivante viendra se placer juste à droite (ou à gauche en fonction de l'inverse de la valeur de la propriété float). left right none L'élément se trouve à gauche et sera entouré par la droite des éléments qui le suivent. L'élément se trouve à droite et sera entouré par la gauche des éléments qui le suivent. L'élément ne sera pas entouré (réglage normal). center n'existe pas Attention : Quand vous utilisez un float, vous devez définir une largeur (width). Parfois certains défauts d'affichage avec certaines versions de navigateurs. Utilisation de float : habillage de texte (enroule du texte alentour d'une image), colonnes d'une page Web, etc. Nettoyer les flottants : clear (pour le cours du texte) La propriété clear sert à contrôler le comportement des éléments qui viennent après les éléments flottants dans le document. Par défaut, les éléments à suivre remontent pour combler l'espace disponible libéré lorsqu'une boîte flotte d'un côté. positionnement.docx 4/5

5 Avec clear: vous pouvez interrompre le cours du texte pour en forcer la poursuite sous l'élément/le passage entouré. La propriété clear admet les valeurs "left", "right", "both" ou "none". left right both none impose la poursuite du texte en dessous de l'élément défini à l'aide de float : (pour float:left;). impose la poursuite du texte en dessous de l'élément défini à l'aide de float : (float:right;). impose dans chaque cas (droit ou gauche) la poursuite en dessous de l'élément. n'impose pas de poursuite dessous. (réglage normal). z-index (position de la couche en cas de superposition) Avec z-index: vous pouvez spécifier l'ordre dans lequel des éléments se superposent. Notez un nombre pour chaque élément pour lequel vous voulez fixer clairement la position de la couche. Plus le chiffre est élevé plus l'élément sera placé vers l'avant, plus il est bas plus l'élément sera placé derrière en arrière plan. CSS agit dans trois dimensions : la hauteur, la largeur et la profondeur. Nous avons vu les deux premières dimensions dans les leçons précédentes. Dans celle-ci, nous allons apprendre à ranger les éléments en couches. Pour faire court, l'ordre dans lequel les éléments recouvrent les autres. Mais l'utilisation de cette propriété comporte quelques pièges : 1. Seuls les éléments positionnés peuvent avoir un z-index. Un élément positionné est un élément dont la propriété CSS "position" a pour valeur "relative", "absolute" ou "fixed". Par défaut, les éléments d'une page ne sont pas positionnés (ils sont en "position: static"). 2. Les valeurs les plus élevées sont au premier plan, et les plus faibles sont au second plan. Un z-index de 2 sera placé au dessus d'un z-index de 1, et un z-index de -1 sera placé au dessus d'un z- index de -2. Exemple : Soit une suite royale dans une main de poker. On peut la présenter de telle sorte que chaque carte ait un numéro z-index : Ici les numéros se suivent (de 1 à 5), mais on peut obtenir le même résultat avec cinq numéros différents. C'est la séquence chronologique des numéros (l'ordre) qui importe. positionnement.docx 5/5