4. Les Boxes¶

Dans ce chapitre vous découvrirez les bases permettant manipuler les boxes ou blocs. Ces techniques sont essentiel pour concevoir des designs prodigieux sur vos pages.

Élément de type 'block'¶

Un élément de type block commence toujours sur une nouvelle ligne et occupe toute la largeur disponible. Il s'étire de la gauche vers la droite aussi loin que possible.

Ci-après un extrait des éléments qui ont pour valeur par défaut block :

<div>, <header>, <nav>, <article>, <section>, <footer>, <p>, <h1>, <table>, <form>…

Élément de type 'inline'¶

A contrario d'un élément de type block, un élément de type inline ne démarre pas sur une nouvelle ligne et ne prend seulement que la largeur de son contenu.

Ci-après un extrait des éléments qui ont pour valeur par défaut inline :

<span>, <strong>, <b>, <a>, <img>, <input>, <canvas>, <button>, <label>, <textarea>…

Propriété display:¶

Chaque élément HTML a une valeur de la propriété display: par défaut. La valeur par défaut pour la plupart des éléments est block ou inline. Nous nous focaliserons sur ces deux valeurs qui sont les plus répandues.

Depuis l'arrivée du CSS3, il existe bien plus que deux valeurs pour display:. Cette propriété correspond au type de boîte. Nous reviendrons sur la notion de boîte plus précisément dans le chapitre suivant.

Modification¶

Avec la propriété CSS display: il est possible de modifier la type d'un élément par défaut.

Exemple avec la balise <a> qui par défaut est de type inline:

<div>
  <p>Mon lien préféré <a href="https://www.google.ch">Google</a> est mon préférer</p>
<div>

Son rendu part défaut est:

Maintenant si l'on modifie la propriété en type block comme ceci:

a {
  display: block;
}

Le rendu deviendra:

Les déférents types¶

Voici les déférents types principalement utilisé de la propriété display: :

display: block
display: inline
display: inline-block
display: none;

Cachez vos éléments¶

On peut également décider de masquer complètement un élément de la page en attribuant à display la valeur none. Par exemple, si je veux masquer les éléments qui ont la classe secret, je vais écrire :

.secret {
    display: none;
}

none est très pratique lorsqu'il faut cacher certains éléments en fonction de la taille de l'écran.

Positionnez vos éléments¶

Dans les méthodes que nous avons vues jusqu'à maintenant, le navigateur dispose les éléments afin qu'ils ne se superposent jamais. Ils font partie d'un flux normal. Mais nous allons maintenant voir une nouvelle propriété position:. Elle permet de positionner avec précision des éléments sur la page (et même parfois de les superposer).

• Le positionnement relatif permet de décaler l'élément par rapport à sa position normale.
• Le positionnement absolu permet de placer un élément n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre, etc.).

D'autres types de positionnements comme fixed ou encore sticky, qui ont des comportements assez semblables, peuvent être utiles si l'on veut qu'un élément, tel que le menu de navigation par exemple, reste à l'écran de manière fixe.

Le positionnement fonctionne aussi bien sur des balises qui sont inline que block. Mais dans les faits, vous verrez qu'on l'utilise bien plus souvent sur des balises block que sur des balises inline.

Il faut d'abord faire son choix entre les trois modes de positionnement disponibles. Pour cela, on utilise la propriété CSS position.

Regardons tout ça d'un peu plus près !

Définissez un positionnement relatif avec position: relative; Le positionnement relatif permet d'effectuer des ajustements : l'élément est décalé par rapport à sa position initiale.

Prenons par exemple un texte dans lequel se trouve un lien. Pour commencer, on donne une couleur de fond au body, et on met le lien sur un fond blanc.

Ici, on utilise position: relative;. Notre élément a alors un point d'origine : le point de coordonnées (0, 0) qui va nous permettre de le déplacer :

On accède alors à quatre propriétés CSS qui vont nous permettre de décaler notre élément :

• left : décalage depuis la gauche.
• right : décalage depuis la droite.
• top : décalage depuis le haut de notre élément.
• bottom : décalage depuis le bas de notre élément.

Ainsi, si j'écris le CSS suivant :

a {
    background-color: white;
    position: relative;
    top: 6px;
    left: 10px;
}

Regardez ce que ça donne :

Le lien est légèrement plus bas que la ligne de texte, car il est décalé de 6 pixels à partir du haut du bloc de texte ; et il est aussi plus à droite car il est décalé de 10 pixels à partir de la gauche de là où il devrait commencer.

Pour mieux comprendre:

Vous l'avez remarqué, les éléments positionnés en absolu sont placés par-dessus le reste des éléments de la page. Mais si vous placez deux éléments en absolu aux mêmes coordonnées… ils vont se chevaucher.

Si j'écris le HTML :

<div class="conteneur">
    Boxe: relative
    <div class="box une">Boxe 1:<br>absolute</div>
    <div class="box deux">Boxe 2:<br>absolute</div>
    <div class="box trois">Boxe 3:<br>absolute</div>
<div>

.conteneur {
    position: relative;
    height: 200px;
    width: 500px;
    background-color: #ececec;
    padding: 10px;
}

.box {
  width: 250px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

.une {
    background-color: #C2B0F9;

    position: absolute;
    left: 10px;
    top: 40px;
}

.deux {
    background-color: #CBFCB9;

    position: absolute;
    right: 70px;
    top: 10px;
}

.trois {
    background-color: #F2A3BB;

    position: absolute;
    right: 10px;
    bottom: 20px;
}

…on obtient :

Propriété 'z-index'¶

Dans ce cas, vous pouvez utiliser la propriété z-index pour indiquer quel élément doit apparaître au-dessus des autres : vous empilez vos éléments dans l'ordre souhaité !

L'élément ayant la valeur de z-index la plus élevée sera placé par-dessus les autres.

Ici le même code en utilisant z-index pour modifier l'ordre de positionnement par défaut:

Propriétés 'fixed' ou 'sticky'¶

Le principe est exactement le même que pour le positionnement absolu sauf que, cette fois, le bloc se fige, même si on descend plus bas dans la page. Pour faire cela, il y a deux options possibles : attribuer la valeur fixed ou sticky à la propriété CSS position.

Rendez un élément fixe avec 'position: fixed';¶

En HTML, on écrit :

<div class="box fixed">Élément fixed</div>

et en CSS, on écrit :

element {
    position: fixed;
    right: 0;
    top: 0;
}

Faite des test sur votre page index.html et votre navigation du haut, l'élément fixe ne bouge pas en scrollant la page.

Rendez un élément adhérent avec 'position: sticky'¶

Rendez un élément adhérent avec position: sticky; avec :

<div class="box sticky">Élément sticky</div>

element {
    position: sticky;
    top: 0;
}

Attendez mais fixed et sticky exactement le même résultat ? Je ne comprends pas la différence entre un élément fixe et un élément adhérent… Qu'est-ce que ça change ?

Vous allez voir tout de suite la différence dans l'exemple ci-dessous lorsque vous essaierez de scroller pour descendre plus bas sur la page !

Faite des tests sur votre page index.html avec votre navigation (nav) du haut, pour mieux comprendre son comportement.