L'onglet Layout Sur Oxygen / Positionnement

IMPORTANT : Avant de commencer cet article, il est conseillé d'avoir consulté au préalable le cours dédié à l'alignement des éléments et à la div.

Introduction

Cet onglet a pour but de vous permettre de changer les options d'affichage de vos éléments. Lorsque vous avez besoin de réaliser des mise en page complexes, cet onglet peut s'avérer très puissant.

Nous allons cependant aborder ici des termes plus techniques. Il sera donc supposé ici que vous maîtrisez déjà la plupart des concepts de base, notamment la prise en main d'Oxygen, mais également quelques concepts plus avancés comme l'alignement des éléments, les unités de mesure, les marges et l'espacement ...

L'onglet Layout est le troisième onglet de votre barre d'édition sur Oxygen. Dans ce guide, nous aborderons uniquement les champs les plus intéressants pour vous, car aborder tous les concept rendrait ce guide 20 fois plus long et peu pertinent pour vous. Si vous commencez à vous sentir à l'aise en création web, ou que vous avez besoin d'avoir plus d'informations à propos d'un champ en particulier, vous pouvez consultez les sites de Mozilla developper et W3School. Une fois que vous comprenez le concept, utiliser les champs sur Oxygen s'avère très simple.

Les types des champs

Display

Ce champ sert à définir de quelle manière vous souhaitez afficher vos éléments. Il y a beaucoup de d'options, mais généralement, seules trois vont vous servir :

flex : l'option par défaut. Les éléments sont alignés en ligne dans le conteneur parent
block : chaque élément occupe toute la largeur disponible et est séparé des autres éléments. A utiliser si vous souhaitez que les éléments enfants d'un conteneur soient séparés.
none : l'élément est effacé du site tant que cette option est sélectionnée. Cela signifie que, même si l'élément est encore présent dans le code de la page, c'est comme s'il était supprimé pour l'utilisateur qui verra la page

Si vous souhaitez en apprendre plus sur le concept de display, vous pouvez consulter l'article dédié sur Mozilla development et vous entraîner sur W3School.

Flex-direction

Ce champ est uniquement visible lorsque display: flex est sélectionné. Il détermine si les éléments doivent s'aligner en colonne, ou en ligne. C'est exactement la même option que la champ layout child element dans l'onglet primary de l'élément (voir le guide dédié)

Sur la droite, le bouton reverse permet d'inverser l'ordre d'apparition des éléments.

Overflow

Ce champ vous permet de contrôler le comportement des éléments qui dépassent de leur conteneur parent.

Lorsque vous avez désigné une certaine largeur ou hauteur pour un conteneur, si l'un des éléments enfant a une taille plus importante que la limite que vous avez fixé, il dépassera du cadre, ce qui peut être embétant pour votre mise en page.

Overflow vous permet de déterminer comment doivent se comporter les éléments qui dépassent du conteneur :

visible : option par défaut. Si l'élément est plus grand, il dépassera du conteneur
Hidden : Si l'élément est plus grand, la partie de l'élément qui dépasse sera rognée
Scroll : Si l'élément est plus grand, une barre dé défilement horizontale apparaîtra.

Ici, le conteneur marron est plus large que la page, et dépasse donc de la page, ce qui amène une barre blanche disgracieuse sur le coté droit, car le navigateur affiche le conteneur marron en entier.

*Le fait de mettre un overflow hidden sur le conteneur parent empêche le conteneur de sortir du cadre qui lui a été imposé.*

*Overflow scroll rajoute de son côté une barre horizontale qui permet de faire défiler l'élément sans qu'il dépasse*

Attention cependant, Overflow ne fonctionne qui si vous l'appliquez au conteneur parent. En effet, overflow hidden demande au conteneur : "les éléments que tu contient doivent rester à l'intérieur de toi".

Visibility

Fonctionnant sur le même principe que display : none, le champ visibility se différencie dans le sens où il ne fait que rendre transparent l'élément. C'est-à-dire que l'élément devient invisible et l'utilisateur ne peut plus interagir avec, mais il est toujours présent sur la page.

visible : option par défaut, l'élément est visible
hidden : l'élement est invisible

Z-index

Le z-index est à utiliser lorsque des éléments se chevauchent entre eux. Ce champ sert à définir quel élément doit s'afficher en avant-plan, et lesquels doivent arriver ensuite.

Pour définir un z-index pour votre élément, entrez un nombre dans le champ. Plus ce nombre est élevé, plus il arrivera en avant-plan.

*Ici, l'élément rouge a un z-index de 2, et l'élément bleu un z-index de 1. Par conséquent, l'élément rouge apparaît en* premier plan

*Ici, l'élément rouge a un z-index de 1, et l'élément bleu un z-index de 2. Par conséquent, l'élément bleu apparaît en* premier plan

Position

Le champ position est utilisé pour modifier le positionnement des éléments. Il est très utile si vous avez besoin de mettre un élément à un endroit précis. Attention cependant, ce champ fait partie des plus complexes à utiliser.

Static

C'est la position par défaut. L'élément est positionné à la suite des autres.

Relative

L'élément est déplacé de sa position initiale. En fonction de ce qui est précisé, il se déplacera de X unités en fonction de l'endroit où il est censé être en position static.

Pour déplacer l'élément vers le haut, il faut éditer le champ bottom. Pour le déplacer vers la droite, il faut éditer le champ left.

*Ici, nous avons deux éléments en position static, donc l'un en dessous de l'autre.*

Ici, l'élément bleu a une position relative de 100px en bottom, et 100px en left, ce qui le fait monter et le décale vers la droite. Notez que l'élément à un z-index de 2 pour lui permettre d'apparaître devant l'élément rouge.

Absolute

L'élément "sort" de sa position initiale et n'est plus positionné à la suite des autres. Au lieu de ça, il se positionne tout en haut à droite du premier conteneur parent qui a une position relative.

Si aucun conteneur n'a une position relative, alors l'élément se positionne en haut de page

Il faut ensuite éditer les champs pour positionner l'élément dans le conteneur parent. Contrairement à la position relative, le nombre entré définira à quelle distance du bord doit être l'élément

Mettre 100px dans le champ top positionne l'élément à 100px du haut du conteneur.
Mettre 30% dans le champ right position l'élément à 30% du bord droit du conteneur.
- 30% de la largeur du conteneur parent.

Nous souhaitons mettre l'élément bleu en position absolute. Avant de commencer, nous mettons le conteneur parent en position relative, ce qui permet de s'assurer que l'élément bleu restera dans le conteneur parent et n'ira pas en haut de page.

*Nous mettons l'élément bleu en position absolute. Par défaut, il se met donc en haut à droite du conteneur. Comme il a un z-index plus élevé, il passe devant l'élément rouge.*

*Nous ajoutons maintenant 40px en top 15% en left, ce qui place l'élément à 40px du haut du conteneur, et à 15% de la gauche du conteneur.*

A noter : Si aucun z-index n'est précisé, un élément en position absolute passera systématiquement devant un élément en position statique ou relative.

Fixed

C'est le même principe que position absolute, à deux différences près :

L'élément se positionne par rapport à la page, et plus en fonction des conteneur en position relative
L'élément va rester fixé à la position, y compris lorsque l'on fait défiler la page.

C'est exactement la technique qui est employé pour faire en sorte que la navbar (logo, onglets de navigation ...) reste en haut de page même lorsque l'utilisateur se met à scroller.