Dans le cours précédent, nous avons vu que par défaut, les blocs prennent toute la largeur et la position de leur bloc parent. Cependant, toujours dans le but de pouvoir créer un vrai site Web, il est indispensable de savoir maîtriser correctement les dimensions et le positionnement des blocs en CSS.

Dimensions d’un bloc

Mais tout d’abord, mettons en place nos blocs pour les exemples. Nous allons utiliser 3 div dans notre document html car il s’agit de l’élément générique des blocs, auxquels nous donnerons un id. Si vous avez besoin d’un rappel sur les balises génériques, cliquez ici. Dans le fichier CSS, nous allons donner une couleur de fond à ces blocs, vous pouvez faire comme dans mon exemple :

si vous regardez à présent dans votre navigateur, rien n’apparaît. C’est tout à fait normal, un élément bloc, s’il n’a pas de contenu, et pas de dimensions précises n’apparaîtra pas. Pour le faire apparaître, il faut donc lui donner des dimensions, ou écrire dedans comme ci-dessous :

À présent, donnons des dimensions de 500 pixels à la divM, avec les propriétés width et height :

comme on peut le voir, les deux blocs contenus dans la divM prennent automatiquement la même largeur. Pour tester vous pouvez aussi changer les tailles des deux autres blocs. Par exemple, vous pouvez donner une largeur supérieure à 500 px. Vous constaterez donc que le bloc contenu va donc « déborder » de son bloc parent. Vous pourrez aussi voir que lorsque vous rétrécissez votre page, les éléments ne s’adaptent plus. Votre propriété widht a en effet changé de valeur. En effet, width et height ont pour valeurs par défaut auto : la largeur va prendre toute la place du conteneur, et la hauteur, seulement la place dont elle a besoin.

 

 Position d’un bloc

Maintenant que nous avons vu comment donner des tailles à nos blocs, nous allons découvrir comment positionner ces blocs dans l’espace de votre page Web. Il existe différentes possibilités et chacun doit essayer de trouver ce qui lui convient le mieux en fonction de son site.
Mais d’abord changeons la dimension de nos deux blocs enfants :

Position avec margin

Nous avons vu dans le cours précédent, comment utiliser cette propriété, cliquez ici si vous avez besoin d’un rappel. Si je désire donc bouger un peu mes deux balises enfants vers la droite et les séparer de quelques pixels, je peux utiliser les propriétés margin-left et margin-top :

 

bien entendu, ce n’est qu’un exemple, il y a d’autres solutions avec les propriétés margin. C’est une bonne solution assez basique pour faire du positionnement. Mais nous la reverrons un peu plus tard car elle a aussi de bonnes qualités.
Maintenant que faire si je désire mettre mes deux blocs l’un à côté de l’autre ? Là encore plusieurs solutions se profilent. La première toujours en utilisant les marges, serait de mettre une valeur négative de -150 pixels (valeur qui correspond à la hauteur de la divA) à la propriété margin-top de la divB. Puis, si on veut les coller sans espace, il faudra donner une valeur de 170 pixels à sa propriété margin-left. Cette méthode fonctionne bien, mais est un peu « bâtarde ». Pour faire plus simple, sans avoir de calculs à faire, il existe une autre propriété : display.

 

Position avec display

Cette propriété display est vraiment très puissante, elle permet en effet de changer la nature des éléments html ! Vous pouvez donc convertir un élément de type bloc en élément de type inline et vice-versa. Vous pouvez même faire un mix des deux, et c’est ce qui nous intéresse pour le positionnement.
En l’utilisant avec la valeur inline-block, le bloc concerné annule les retours à la ligne avant et après le bloc. Pour mettre les deux blocs enfants côte à côte, je vais donc appliquer cette valeur sur eux :

comme vous pouvez le voir les deux blocs sont séparés de quelques pixels (4 exactement).
Les autres valeurs importantes de display sont inline qui s’utilise sur les éléments de type bloc et block qui vous l’aurez compris s’applique pour les éléments de type inline. Chacun prenant ainsi les principales caractéristiques de l’autre.

Position avec Float

Initialement, cette propriété n’est pas destinée à faire du positionnement. En effet, elle permet au bloc concerné de « flotter » le plus haut possible dans son conteneur, à droite ou à gauche selon la valeur qu’on lui donne (left ou rigth). Dans l’exemple ci-dessous, je fais « flotter » la divA à gauche :

comme vous pouvez le constater, tout a changé. Cet exemple met en évidence les conséquences et l’utilité de base de la propriété float.

• L’élément flottant s’affiche en premier plan dans son parent.
• Le texte, et les éléments dont les dimensions n’ont pas été modifiées, viennent entourer le flottant. C’est la raison d’exister de float.

Maintenant si je veux que ma divB s’affiche entièrement sous le flottant, il suffit d’utiliser la propriété clear avec la même valeur que le flottant, ici left :

cette propriété clear ne fonctionne que sur les éléments de type bloc. Si je désire donc mettre du texte à la fois à droite du flottant et sous le flottant, le mieux est de créer deux paragraphes dans mon fichier html, après le bloc flottant, et d’appliquer clear : left à celui que l’on veut mettre sous le bloc flottant.
La propriété float est très intéressante à utiliser, je recommande cependant de ne pas s’en servir pour le positionnement, ce n’est pas son utilité première et ses conséquences peuvent être source de problème si on la maîtrise mal.

 

Propriété Position

C’est la propriété que je recommande d’utiliser au maximum pour le positionnement de vos blocs. Effectivement, elle permet de situer avec précision n’importe quel élément dans la page. Cette propriété, par défaut à la valeur static. Mais elle peut prendre trois valeurs qui sont trois modes de positionnement possible.

• abolute : pour un positionnement absolu ;
• fixed : pour un positionnement fixe ;
• relative : pour un positionnement relatif.

Nous allons détailler ces 3 modes.

Le positionnement absolu

Cette valeur permet de positionner un élément existant n’importe où sur notre page par rapport à la page. Comment ? Tout simplement, lorsque l’on écrit position : absolute ; dans notre éditeur, cela débloque 4 autres propriétés :

• left : pour donner une position par rapport au côté gauche de la page ;
• right : pour donner une position par rapport au côté droit de la page ;
• top : pour donner une position par rapport au haut de la page ;
• bottom : pour donner une position par rapport au bas de la page.

Les valeurs que nous leur donnerons peuvent être aussi bien en pixel ou en pourcentage.

Ci-dessous, je décide de coller ma divB tout à gauche de la page, avec une valeur de 0px à ma propriété left :

par défaut, ma divB reste collé sous le bloc précédent. Cependant, si je met une position absolue aussi à la divA, les deux blocs vont se superposer. C’est en effet logique car la position absolue implique de mettre en œuvre les propriétés vues précédemment.

Le positionnement fixe

Ce mode de fonctionnement de ce positionnement est exactement le même que précédemment. Sa seule et unique différence est que sur une page très grande avec une barre de défilement, votre élément restera à la même place lors de votre navigation sur la page. Il est fixe sur votre écran. On l’utilise souvent pour des menus de navigations, des barres de contact…

Le positionnement relatif

Un peu plus ardu pour certain à utiliser, ce positionnement fonctionne pourtant de la même façon que les précédents. Ce qu’il faut retenir, c’est simplement que ce n’est plus par rapport à la page que l’on agit, mais par rapport à la position initiale de l’élément. Ici, je déplace ma divA de 10px vers le bas :

comme vous pouvez le voir, la divA se glisse légèrement sous la divB. C’est tout à fait normal car son positionnement ne dépend pas de ce bloc mais de la page. Pour l’ajuster correctement sous la divA, il suffit de lui donner un positionnement relatif et un décalage aussi de 10px vers le bas.

Centrer un élément bloc

Lorsque l’on ne connaît pas la résolution de notre utilisateur, ce qui est le cas à peu près tout le temps, il peut être pratique, ou même indispensable de centre notre élément. Cela implique évidemment que nous ayons défini au préalable une largeur à notre bloc comme dans nos exemples.
Pour centrer nos blocs, nous allons utiliser une propriété déjà bien connue et vue plus haut : margin. En effet, margin peut prendre la valeur auto et va obliger notre bloc à se centrer dans son conteneur :

vous pouvez appliquer cela à la divM qui se centrera ainsi sur la page.

Ce qu’il faut retenir

Lorsque l’on se décide à mettre en ordre les éléments importants de notre site, il est important de se faire un plan pour ne pas perdre le fil. Puis il faut donner les dimensions voulues à vos blocs et déterminer la méthode que vous allez utiliser pour les positionner dans votre page.
J’espère que ce cours vous a plu, n’hésitez pas à laisser un commentaire pour toute question ou remarque, JB.