Aligner des éléments avec Oxygen

IMPORTANT : Avant de commencer cet article, il est conseillé d'avoir consulté au préalable le cours dédié aux conteneurs et aux divs, ainsi que celui dédié à l'onglet Size & spacing

Introduction

Initialement, lorsque vous construisez votre page, les éléments que vous ajoutez suivent les règles suivantes :

• Ils se mettent en dessous de l'élément situé plus haut
• Ils s'alignent à gauche du conteneur parent.

Il est cependant possible de modifier cette architecture en imbriquant des div.

Exemple concret

Commençons par construire une mise en page compatible avec des règles d'alignement :

• Cliquez sur l'élément inner content dans la barre de structure (à droite) et insérez une div
• Cliquez ensuite sur la div nouvellement créée et insérez une nouvelle div
• Cliquez ensuite sur la div nouvellement créé et insérez un titre, encore une nouvelle div, et un texte
  • N'hésitez pas à renommer toutes vos div en fonction de leur objectif pour rendre votre organisation plus lisible.

Cette étape est très importante car elle permet de ranger chaque élément. Vous verrez qu'il sera beaucoup plus facile par la suite d'organiser la page.

Pour rendre la structure plus lisible, nous allons renommer toute les div :

• La 1ère englobe l'ensemble de nos éléments. Nous l'appellerons sous-section
• La 2e est destinée à être dupliquée. Nous l'appellerons Elément
• La 3e sera utilisée pour faire un cadre coloré. Nous l'appellerons Image. (pour savoir pourquoi nous utilisons une div, voir le guide dédié aux images.

Nous avons maintenant une section, qui comprend pour l'instant une seule sous-section, qui contient elle-même plusieurs éléments. Notre objectif est d'ajouter ensuite plusieurs autres sous-section, mais nous allons styliser celle-ci au préalable :

• Cliquez sur la div section et ajoutez un peu de margin-top de manière à ce qu'elle soit bien visible sur la page et séparé d'autres sections.
  • onglet size & spacing

• Assignez-lui également une width de 100%

• Cliquez sur la div sous-section et assignez-lui une width de 400px.

• Renommez les éléments Heading et Text selon votre convenance.

• Cliquez sur la div Image et assignez-lui une width de 100% ainsi qu'une height de 250px.
• Assignez-lui également une margin top et bottom de 50px pour la séparer des éléments de texte.
• Toujours avec la div image, dans l'onglet, allez dans l'onglet background et assignez une couleur de votre choix dans le champ background color
  • Pour plus d'infos, consultez le guide dédié

• Enfin, revenez sur la div sous-section et ajoutez des margin left et right de 4% et des margin top et bottom de 40px. Cela évitera que les autres sous-sections soient trop collées les unes aux autres

Notre élément est maintenant prêt à être dupliqué. Bien sûr, les valeurs que nous vous avons données ont été choisies arbitrairement. Vous pouvez tout à fait appliquer des espacements différents.

• Repliez la sous-section en cliquant sur la flèche et dupliquez-là de manière à en avoir 4 au total

Nous avons maintenant Plusieurs éléments à l'écran, les uns en dessous des autres. Vous remarquerez que si nous avons besoin de changer un élément, par exemple si nous voulons modifier la couleur de l'image, il faudra le faire quatre fois. Pour que les sous-section soient plus facilement modifiables, il aurait été intéressant d'ajouter une classe au préalable sur chaque élément susceptible d'être modifié. Mais revenons à notre sujet.

Aligner des div

Nous avons maintenant une section comprenant quatre sous-sections, que nous allons pouvoir aligner à notre guise. Cliquez sur la div section pour afficher la fenêtre d'alignement dans la barre d'édition (à gauche)

Layout child element

Ce champ permet de définir si l'on souhaite que les éléments enfants (ici, les sous-section) soient alignés de manière verticale ou horizontale. Cliquez sur le bouton Horizontal

Vous remarquerez que les sous-sections se retrouvent écrasées. En effet, Oxygen empèche par défaut les éléments de s'aligner sur plusieurs lignes par sécurité. Il faut donc cliquez sur le bouton allow multiline, situé sous le bouton grid.

Le bouton Grid n'est à utiliser que si vous êtes déjà familirisé avec le concept de Grid. Pour le moment, nous n'abordons pas ce concept dans cette formation.

Vertical item alignment

Ce champ sert à aligner les éléments verticalement par rapport au conteneur parent.

• Top aligne les éléments vers les haut
• Middle cherche à les centrer
• Bottom les aligne vers le bas
• Stretch cherche à les étendre pour qu'ils prennent le plus de place possible

Sur notre exemple, comme nous n'avons pas spécifié de hauteur pour la div section, sa hauteur dépend entièrement de la place prise par les éléments. changer les options n'aura donc aucun effet, car il n'y a aucun espace vide.

Horizontal align alignment

Ce champ sert à aligner les éléments horizontalement par rapport au conteneur parent.

• Left aligne les éléments vers la gauche
• Center cherche à les centrer au milieu du conteneur
• Right les aligne sur la droite
• Space around cherche à les aligner de manière à conserver le même espace entre chaque colonne et les bords du conteneur
• Space between cherche à mettre le maximum d'espace entre chaque colonne, qui sont donc envoyés sur les bords du conteneur.

Testez les différents réglages pour en voir les effets !

Ici, le conteneur section étant une div de 1er niveau, et étant que sa width a été définie sur 100%, elle a par conséquent une largeur égale à la totalité de la page.

Aligner les textes

Vous remarquerez que même si vous cliquez sur center pour l'alignement horizontal, les textes ne s'alignent pas forcément au milieu. En effet, dans ce cas précis, les élements heading et text font déjà 100% de la largeur de la div sous-section : en effet, leur contenu fait plus de 400px, qui est la valeur spécifiée pour la div sous-section. Ils ne bougeront donc pas.

• Cliquez sur le texte à aligner, puis ouvrez l'onglet typography (4e onglet) de la barre d'édition à gauche.
• Dans le champ text align, choisissez l'alignement désiré.

Notez que dans notre exmeple, comme nous n'avons pas configuré de classe, il faudra refaire la manip pour tous les éléments de texte.

Modifier les marge et la taille des sous-section

Si vous le souhaitez, vous pouvez modifiez quelques paramètres des sous-sections pour améliorer leur rendu. Vous pouvez notamment modifier :

• La width : elle est ici définie sur 400px, ce qui les rendra peut-être trop verticales s'il y a beaucoup de texte. Vous pouvez au choix
  • Mettre une width plus large en px, ce qui la rendra moins verticale, mais qui posera problème en format mobile
  • Mettre une width en %, ce qui rendra ce taille adaptative, mais qui la déformera peut-être trop sur un trop petit ou trop grand format

Vous pouvez également changer de réglage en fonction du format (ordi, tablette ...) ou ajouter des max et / ou min-width.

• La marge : elle augmentera ou diminuera l'espace entre vos colonnes.

A noter : sur notre exemple, nous n'avons pas défini de classe. Il faudra donc effectuer les modifications pour tous les éléments.