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 !
Souvent il n'est pas nécessaire d'utiliser les outils de positionnement sophistiqués prévus avec la propriété position (position : fixed / absolute / relative). On peut se contenter d'une mise en page via float ou avec display (display : inline-block ou display : table).

Le code commun aux différents exemples

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, ARTICLE.

Règles de style communes :

	img.gauche {height : 100px ; float : left ; }
	img.droite {height : 100px ; float : right ; }

Les images se positionnent à gauche ou à droite dans leur conteneur.

Mise en page avec FLOAT

La feuille de style

	body {width : 90% ; margin : auto ; }
	header{height : 100px ; float : left;}
	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 ;}

Trois boîtes "flottent" à gauche (HEADER,NAV, FOOTER) 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.
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 boites 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% ;}

Les boites HEADER, NAV, ARTICLE,FOOTER sont désormais des éléments "inline-block".
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.

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.
Aperçu de la mise en page

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 (display : flex).
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