Mise en page - autres techniques

Faut-il rappeler que par défaut les boîtes d'une page se positionnent les unes en dessous des autres.
C'est le mode de positionnement normal ou flux normal.
Mais dès que vous voulez mettre deux éléments "block" côte à côte vous devez utiliser une technique de positionnement !
Pour les positionnement simples il n'est pas nécessaire d'utiliser les outils de positionnement sophistiqués prévus avec la propriété position (position : fixed, position : relative, position :absolute). On peut se contenter d'une mise en page via float ou avec display (display : inline-block ou display : table).

Le code HTML

Dans le trois cas le code HTML sera identique !

<header><h2>En-tête de page </h2></header> <section> <nav> <img src ="../images/bikini.jpg" class ="droite" /> <h2>Menu </h2> </nav> <article> <img src ="../images/trikini.jpg" class ="gauche"/> <h2>Contenu</h2> </article> </section> <footer><h2>Pied de page</h2></footer>

Body contient trois grandes boîtes : header, section, footer.
La boîte section contient à son tour deux boîtes : nav et article.

Mise en page avec float

La feuille de style

body {width : 90% ; margin : auto ; } header{height : 100px ;} header,nav,article,footer {background : pink ; margin-top : 10px;} nav{float : left ; width : 29% ; height : 300px ; } article {float : right ; width : 69% ; height : 400px ; } footer {width : 100% ; height : 100px ; float : left ;} ... img.gauche {height : 100px ; float : left ; } img.droite {height : 100px ; float : right ; }

Trois boîtes "flottent" à gauche et ARTICLE "flotte" à droite.
Afin que les boîtes NAV et ARTICLE ne se collent pas la somme des "width" ne fait pas 100% mais 98%.
De plus méfiez vous, si pour ces boîtes vous avez défini des marges gauche et droite la largeur totale est supérieure à celle indiquée par la propriété width.

Les images flottent à gauche ou à droite (selon la classe) dans leur conteneur. Aperçu de la mise en page

Positionnement avec display : inline-block

Cette technique fait partie du CSS2 et pourtant elle est mal connue.

Les éléments inline-block sont des boîtes qui se positionnent par défaut les unes à coté des autres (comme les éléments "inline") tant qu'il y a de la place !
Attention si les boîtes "inline" n'ont pas la même hauteur elles s'alignent verticalement par rapport à la base. Il faut donc forcer l'alignement vertical par le haut avec vertical-align : top.

La feuille de style (extrait)

body {width : 90% ; margin-left : auto ; margin-right : auto ;} header, nav, article, footer {background : pink ; display : inline-block ; vertical-align:top;} header,footer {width : 100% ; height : 100px ; margin-top : 10px ; } nav{width : 29% ; height : 300px ; margin-top : 10px; } article {width : 69% ; height : 400px ; margin-top : 10px; margin-left: 1% ;} ...

Il faut toujours éviter que les boîtes ne se collent d'où certaines marges externes.
Attention la largeur totale de ARTICLE est 70% : 69% + 1% de marge gauche.
Aperçu de la mise en page !

Mise en page avec display : table

Encore une technique très peu connue.

Pour que plusiseurs boîtes se positionnent côte à côte on peut émuler un tableau en CSS.
Aperçu de la mise en page !

La feuille de style

body {width : 1000px ; margin :auto ;} header, nav, article, footer {background : pink ; } header, footer{height : 100px ; } section{display : table; border-spacing : 20px;} nav,article {display : table-cell ; height : 400px ;} nav {width : 280px;} article {width : 700px ; }

La boîte SECTION est émulée en tableau (display : table) avec un espace entre cellules de 20px.

Les boîtes NAV et ARTICLE deviennent des cellules de ce tableau (display : table-cell).

Dans le cadre d'un "tableau CSS" on ne peut utiliser margin mais border-spacing.

La révolution CSS3

Dans un futur proche toutes ces techniques de positionnement (position, float, display) seront un lointain souvenir.
En effet la version 3 de CSS a introduit la notion de boîtes flexibles.
Cette technologie n'est implémentée que sur les navigateurs récents.
Je n'en dis pas plus ; je vous invite à visiter le tuto "tutoriel CSS3" dans le même site.
Retour menu