Yes You Web!

Publié le 1er mai 2021 —

Positionner des blocs dans une page de site web est tout un art, tout comme maîtriser leur comportement lorsque la taille de l’écran change, ce qui est inévitable aujourd’hui au vu de la proportion de smartphones. Dans un précédent article, nous avons vu comment placer vos éléments dans une page de site grâce aux modèles de boîtes flexibles et à la super CSS, Flexbox. Aujourd’hui, revenons aux bases du positionnement avec les modèles de boîtes simples. Compte tenu du nombre de propriétés à décrire, nous allons diviser cet article en 2 parties. Voici la 1ère !

  • position / placement top, right, left, bottom
  • float / clear
  • clip-path
  • vertical-align
  • z-index

Très bientôt dans un second article

display

La propriété Display, c’est la base. Elle permet de définir comme va s’afficher un élément en HTML. Elle peut prendre les valeurs suivantes (les plus fréquentes) :

  • none : l’élément ne s’affiche pas / plus.
  • inline : l’élément s’affiche en ligne, comme un span par exemple.
  • block : l’élément s’affiche comme un bloc, c’est le cas des div par exemple.
  • inline-block : l’élément s’affiche en ligne mais il se comporte comme un bloc, donc on peut lui affecter une hauteur / largeur par exemple ou des padding / margin.
  • flex : là, on passe côté boîtes flexibles et non plus simples et ça se passe par ici avec les super-pouvoirs de Flexbox.

Assez parlé, on regarde à quoi ça ressemble en pratique avec le début de Voyage au bout de la Nuit de Céline. L’élément sur lequel on va jouer est ARTHUR GANATE.

Display: inline

Ça a débuté comme ça. Moi, j’avais jamais rien dit. Rien. C’est

ARTHUR GANATE

qui m’a fait parler. Arthur, un étudiant, un carabin lui aussi, un camarade. On se rencontre donc place Clichy. C’était après le déjeuner. Il veut me parler. Je l’écoute.

Display: none

Ça a débuté comme ça. Moi, j’avais jamais rien dit. Rien. C’est

ARTHUR GANATE

qui m’a fait parler. Arthur, un étudiant, un carabin lui aussi, un camarade. On se rencontre donc place Clichy. C’était après le déjeuner. Il veut me parler. Je l’écoute.

Display: block

Ça a débuté comme ça. Moi, j’avais jamais rien dit. Rien. C’est

ARTHUR GANATE

qui m’a fait parler. Arthur, un étudiant, un carabin lui aussi, un camarade. On se rencontre donc place Clichy. C’était après le déjeuner. Il veut me parler. Je l’écoute.

Display: inline-block

Ça a débuté comme ça. Moi, j’avais jamais rien dit. Rien. C’est

ARTHUR GANATE

qui m’a fait parler. Arthur, un étudiant, un carabin lui aussi, un camarade. On se rencontre donc place Clichy. C’était après le déjeuner. Il veut me parler. Je l’écoute.

margin et padding

Poursuivons par ces propriétés qui sont très, mais très fréquemment utilisées. La différence entre padding et margin est une question qui revient souvent et force est de constater qu’il n’est pas toujours facile de l’expliquer. Nous, on aime imager les choses et oui, Jean-François, je vais faire encore faire appel à une notion de déco 😉

Vous possédez une photo que vous voulez encadrer. Vous avez le choix entre choisir un cadre pile à la taille de la photo, on parle de margin. En revanche, si vous souhaitez mettre un passe-partout à l’intérieur du cadre pour mettre en valeur la photo, on parle de padding. Notez que le passe partout va manger votre photo (ou alors il va falloir prendre un cadre de taille supérieure). Nous évitons volontairement de vous parler de la bordure, qui se trouve entre les margin et les padding mais qui ne rentrent pas ds le sujet des boîtes simples.

Yes You Web!

Dans la pratique, il y a pas mal de cas où utiliser des margin ou des padding revient au même. Pour décoller ce paragraphe de l’image du dessus, j’ai utilisé un padding-bottom de 20px mais j’aurais pu utiliser un margin-bottom de 20px.

En revanche, si vous avez un bloc avec un fond de couleur et que vous voulez décoller votre contenu des limites de ce bloc, alors vous devrez utiliser un padding.

Ces 2 propriétés fonctionnent de la même manière, vous pouvez définir les 4 côtés en une seule fois et vous tournez dans le sens des aiguilles d’une montre en partant du haut, ce qui donne haut / droite / bas / gauche :

Copier

ou choisir  seulement quelques côtés :

Copier

2 dernières choses pour clore ce point :

  • On peut saisir les marges en pixels ou en %
  • La syntaxe d’un padding ou margin peut s’écrire avec 1, 2, 3 ou 4 valeurs (comme dans notre exemple ci-dessus)
Copier

height / width

Intéressons-nous maintenant à la notion de hauteur (height), de largeur (width), de largeur max ou minimum et de hauteur max ou minimum.

Height / Width : ces notions ne tiennent pas compte des padding, bordures et margin. Elles permettent de définir les réelles dimensions d’un bloc. Par défaut, la largeur et la hauteur d’un bloc sont « auto », c’est-à-dire qu’elles s’adaptent au contenu. Si on veut agir dessus, on peut renseigner un %, des valeurs en pixels ou en valeur.

Redimensionnons une image (pour l’exemple, car pour les performances du site, il vaut la mieux redimensionner avant de l’intégrer) dont la taille originale est 600×400 px de 40%.

Copier

Ici, nous allons fixer une taille au bloc avec un fond rose qui contient notre texte.

Ce bloc a une largeur de 360px et une hauteur de 240px.

Copier

A l’heure de la multiplication des tailles d’écrans, fixer des tailles peut engendre des contraintes et des problèmes d’affichage. Par exemple, une image avec une largeur fixe de 500px ne se verra pas en entier sur un écran d’Iphone 5 ou on aura un ascenseur horizontal (OK, il n’y en a presque plus mais sa largeur de 320px reste une valeur basse quand on adapte les sites sur mobile). Pour pallier à ces soucis, il existe d’autres propriétés que nous allons voir.

Min-height / Max-height / Min-width / Max-width : comme leurs noms l’indiquent, ces propriétés permettent de définir une hauteur minimale et maximale ou une largeur minimale et maximale. Si on utilise les 2 valeurs, on peut même définir un intervalle. Comme précédemment, on peut exprimer ces valeurs en %, en px ou en em. Sachez également qu’elles prennent la main sur une largeur / hauteur déjà exprimées.

Ici, nous écrivons que le bloc « taille-mini » a une largeur et une hauteur minimales de 200px. Même si la largeur initial est définie à 150px, elle sera automatiquement agrandie au minimum à 200px.

Copier

A contrario, ce bloc « taille-maxi » a une largeur et une hauteur maximales de 600px. Même si l’écran fait 1920px de large, le bloc ne dépassera pas 600px. Et si la largeur initiale déclarée est de 800px, elle sera recalculée à 600px.

Copier

overflow

La propriété overflow se couple avec les tailles que nous venons de voir car elle permet de définir le comportement d’un élément quand il est trop grand pour rentrer dans son bloc. Il faut donc fixer une taille avant.

L’overflow peut prendre 4 valeurs :

  • visible : c’est la valeur par défaut. Comme son nom l’indique, tout est visible, même si ça déborde (après ces mois de confinement, on a bien une image en tête pour illustrer ce cas mais on va se retenir ;-))
  • hidden : ici c’est l’inverse, on ne voit pas ce qui dépasse, ce qui signifie donc que votre contenu est coupé.
  • scroll : le contenu reste dans son bloc mais des ascenseurs horizontaux et/ou verticaux apparaissent pour tout voir.
  • auto : c’est la même chose que scroll mais l’ascenseur n’apparaît que si c’est nécessaire.

Voyons ça en pratique (après Céline, Baudelaire !) : la zone dont on fixe la taille est la zone grise avec 400 x 50px.

Visible

Souvent, pour s’amuser, les hommes d’équipage
Prennent des albatros, vastes oiseaux des mers,
Qui suivent, indolents compagnons de voyage,
Le navire glissant sur les gouffres amers.

Copier

Hidden

Souvent, pour s’amuser, les hommes d’équipage
Prennent des albatros, vastes oiseaux des mers,
Qui suivent, indolents compagnons de voyage,
Le navire glissant sur les gouffres amers.

Copier

Scroll

Souvent, pour s’amuser, les hommes d’équipage
Prennent des albatros, vastes oiseaux des mers,
Qui suivent, indolents compagnons de voyage,
Le navire glissant sur les gouffres amers.

Copier

Auto

Souvent, pour s’amuser, les hommes d’équipage
Prennent des albatros, vastes oiseaux des mers,
Qui suivent, indolents compagnons de voyage,
Le navire glissant sur les gouffres amers.

Copier

visibility

La propriété visibility permet de dire si un élément est visible ou non. La différence avec le display: none, vient du fait qu’ici, la place réservée à l’élément reste, contrairement au display:none, où l’élément disparaît.

visibility peut prendre 3 valeurs :

  • visible : c’est la valeur par défaut. Comme son nom l’indique, l’élément est visible
  • hidden : l’élément est caché.
  • collapse: celle-ci est réservée aux tableaux et comme on n’en fait quasiment plus, on ne va pas la détailler ici.

Voyons ça en pratique :

Visible

Un Premier titre toujours visible

Un second titre sur lequel on va appliquer la CSS

Et un petit texte pour vous montrer que la place du second titre est conservée, même lorsqu’on le masque.

Copier

Hidden

Un Premier titre toujours visible

Un second titre sur lequel on va appliquer la CSS

Et un petit texte pour vous montrer que la place du second titre est conservée, même lorsqu’on le masque.

Copier

Conclusion

Voilà, vous allez pouvoir commencer à vous entraîner avec  ces premiers éléments de positionnement, la suite arrive dans 15 jours dans un second article.
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !