Abordez d'autres techniques de mise en page

Transformez vos éléments avec  display

La propriété CSS display permet de transformer n'importe quel élément de votre page, d'un type vers un autre. Avec cette propriété, on peut par exemple imposer à des liens (originellement de type  inline  ) d'apparaître sous forme de type  block  :

a {
    display: block;
}

À ce moment-là, les liens vont se positionner les uns en dessous des autres (comme des blocs normaux), et il devient possible de modifier leurs dimensions ! Et à l'inverse, vous pouvez tenter de faire en sorte qu'un élément qui est de type  block  par défaut devienne  inline .

Cachez vos éléments avec  display: none;

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.

La liste des différentes valeurs possibles pour  display  est longue. Nous n'aurons pas le temps de toutes les aborder ensemble ici, mais sachez qu'il est notamment possible de tirer parti du meilleur de  inline  et  block  . Pour cela, vous pouvez utiliser  display: inline-block;  qui rend vos éléments  inline  tout en permettant de les dimensionner.

Positionnez vos éléments avec la propriété CSS  position

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.

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 :

1. left   : décalage depuis la gauche.

2. right  : décalage depuis la droite.

3. top  : décalage depuis le haut de notre élément.

4. 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 :

Définissez un positionnement absolu avec  position: absolute;

Le positionnement absolu permet de placer un élément (réellement) n'importe où sur la page. Pour l'utiliser, on écrit tout simplement position: absolute;:

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

Regardez ce que ça donne :

Prenons un autre exemple maintenant, et regardez le résultat du CodePen P3C5c.

Bon c'est bien beau, mais cela ne suffit pas pour positionner un élément où on souhaite vraiment. Pour y parvenir, on va refaire appel à nos  left,  right,  top  et  bottom.

On pourra leur donner une valeur en pixels, comme 14px ou une valeur en pourcentage, comme 50%  .

Habituellement, les éléments  inline  et  block  sont disposés dans le flux normal. Mais ici, vous voyez, nos éléments ne respectent plus rien, et sortent du flux.

Eh bien… pas nécessairement. Un élément  absolute  va se positionner par rapport au premier élément qu'il rencontre dans ses parents, et qui utilise lui-même la propriété  position . Donc si on veut placer un élément par-dessus un autre, il faudra que ce premier élément utilise aussi la propriété  position.

Regardez un peu ce que cela donne :

Gérez le chevauchement avec la propriété   z-index

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.

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.

Si j'écris le HTML :

<div class="conteneur">
    <div class="box une">Élément 1</div>
    <div class="box deux">Élément 2</div>
    <div class="box trois">Élément 3</div>
<div>

…associé au CSS suivant :

.conteneur {
    position: relative;
    height: 300px;
    width: 300px;
}

.une {
    background-color: #C2B0F9;
    position: absolute;
    left: 0;
    top: 90px;
}

.deux {
    background-color: #CBFCB9;
    position: absolute;
    right: 70px;
    top: 0;
}

.trois {
    background-color: #F2A3BB;
    position: absolute;
    right: 0;
    bottom: 20px;
}

…on obtient :

Bloquez un élément avec 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;
}

Vous voyez, avec la valeur  fixed  , l'élément fixe ne bouge pas.

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

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

element {
    position: sticky;
    top: 0;
}

Et c'est la même chose pour la valeur sticky: l'élément ne bouge pas

À vous de jouer !

Vous allez maintenant pouvoir exploiter ce que vous venez d'apprendre dans le portfolio de Robbie Lens. Les images de la page "Portfolio" peuvent maintenant s'afficher en plein écran avec la méthode vue dans le chapitre “Insérez des images”. Pour cela, des liens ont été ajoutés avec la classe  lien-conteneur-photo  .

Pour ce chapitre, vous allez :

• transformer les liens qui ont la classe  .cta  en éléments  inline-block  avec  display  sur les pages "Accueil" et "À propos", et ajouter leur lien vers la page "Portfolio" ; (cta veut dire call to action en anglais, autrement dit, en français : "bouton d'appel à l'action") ;

• ajouter des  margin  et  padding  là où il en manque sur les pages "Accueil" et "À propos" (pour rappel, voici la maquette d’inspiration pour le site) ;

• créer sur les images un effet au survol de la souris en affichant un élément (grâce à display ) qui :

  • aura un fond noir d’une opacité de  70%  ;

  • s’affichera par-dessus l’image, et y mentionnera le texte suivant : “Voir la photo”, comme ceci :

En résumé

• La propriété  display  permet de changer le comportement de base d'un élément : 

  • transformer un élément  inline  en  block  ;

  • inversement, un élément  block  en  inline  ;

  • mais aussi de faire un mélange des deux avec  inline-block.

• Le positionnement relatif permet de décaler un bloc par rapport à sa position normale.

• Le positionnement absolu permet de placer un élément où l'on souhaite sur la page, au pixel près.

• Un élément A positionné en absolu à l'intérieur d'un autre élément B (lui-même positionné en absolu, fixe ou relatif) se positionne par rapport à l'élément B, et non par rapport au coin en haut à gauche de la page.

• Lorsque plusieurs éléments s'empilent, il est possible de les ordonner avec  z-index.