Table des matièresPagination : le saint Graal

Le "Saint Graal" est décrit historiquement dans l'article In Search of the Holy Grail http://alistapart.com/article/holygrail

Il s'agit de la pagination commune à colonne de largeur fixe et contenu principal fluide, je cite :

It will:

  1. have a fluid center with fixed width sidebars,
  2. allow the center column to appear first in the source,
  3. allow any column to be the tallest,
  4. require only a single extra div of markup, and
  5. require very simple CSS, with minimal hacks patches.

Voici la pagination recherchée :

Entrons dans le vif du Sujet

I Un code html inversé ?

Dans le code qui suit le "main" précéde la "nav" qui sera notre colonne gauche. A l'inverse du sens de lecture habituelle, de gauche à droite ...

<body>
<header>
<h1>header : Un gabarit pour ma licence professionnelle</h1>
</header>
<main>
<section class="content">
<h2>main section.content</h2>
<h4>compétence technologique : </h4>
<ul>
<li>langages du Web, </li>
<li>réseaux, outils, </li>
<li>environnement informatique</li>
</ul>
<h4>compétence en communication visuelle</h4>
<ul>
<li>infographie, </li>
<li>animation multimédia, </li>
<li>culture de l'image, </li>
<li>art graphique</li>
</ul>
</section>
<nav>
<h2>nav</h2>
<ul>
<li><a title="Accueil" href="#">Accueil</a></li>
<li><a href="#">La formation</a></li>
<li><a href="#">Les Métiers cibles</a></li>
<li><a href="#">Alternance et Apprentissage</a> </li>
<li><a href="#">Compte Personnel de Formation</a></li>
<li><a title="Programme" href="#">Le programme</a> </li>
</ul>
</nav>
<aside>
<h2>aside</h2>
<p><strong>CFA Vie Scolaire</strong><br>
Isabelle Maës<br>
01 44 27 84 17<br>
<a href="mailto:isabelle.maes@upmc.fr">isabelle.maes@upmc.fr</a><br>
<br>
<strong>CFA Relations entreprises <br>
</strong> Blandine MAHON<br>
01 44 27 74 40<br>
<a href="mailto:carole.bellaiche@upmc.fr">blandine.mahon@upmc.fr</a></p>
</aside>
</main>
<footer>
<h2>footer</h2>
<p>UPMC - 4 place Jussieu 75005 Paris, France - Tél. +33 1 44 27 44 27 </p>
</footer>
</body>

Copier ce code pour l'insérer dans votre page html qui vous servira de test. Ajouter dans le <head>, ces premières lignes de css :

<style type="text/css">
body {
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
}
h2 {
padding: 2px;
margin: 2px;
}
body>*, main>* {
border-radius: 3px;
}
a {
text-decoration:none;
}
header {
background-color:DodgerBlue;
padding: 4px;
margin: 2px;
}
header h1 {
text-align:center;
font-size:16px;
padding:20px 4px;
margin: 2px;
}
.content {
background-color:Red;
padding: 4px;
margin: 2px;
}
aside {
background-color:Chocolate;
padding: 4px;
margin: 2px;
}
nav {
background-color:Gold;
padding: 4px;
margin: 2px;
}
footer {
background-color:Olive;
padding: 4px;
margin: 2px;
text-align:center;
}
footer h2 {
float:left;
}
nav, aside {
width: 18em;
}

II Raisonnons pas étape, placer le contenu du <main> en colonnes

Pour faire apparaître en 3 colonnes le contenu principal <main>, il suffit de la déclarer display: flex;

main {
	display:flex;
}

Par défaut, flex-direction prend la valeur "row", l'axe principal est donc horizontal et les blocs en colonne.

III Occupation de la hauteur disponible

Afin que l'ensemble occupe toute la hauteur, déclarons le <body> comme un flex container, avec un axe "vertical" flex-direction à "column".

body {
	display:flex;
	flex-direction : column;
}

IV La colonne du content doit être fluide et s'étendre sur toute la place disponible

Cette fois, c'est le flex item section.content qui doit porter un attribut flex-grow

main section {
	flex: 1 1 0%;
}

V La page doit occuper toute la hauteur : min-height du <body>

body {
	min-height: 99vh;
}

VI Réordonner la colonne droite

nav {
	order : -1;
}

VII Comment gérer le responsive ?

 

Il s'agit de réinitialiser bon nombre d'attributs à leurs valeurs par défaut

 

@media (max-width: 640px){
	main {
		flex-direction : column; /* les blocs du main doivent se superposer, l'axe principal est "column" */
	}
	nav , aside {
		width : auto ; /* les largeurs ne sont plus ficxes*/
	}
	.content {
		flex-basis: auto; /* réinitialisation de la première propriété de flex */
	}
	nav {
		order : 1; /* l'ordre ne doit plus être inversé */
	}
}

 

Tour de chauffe 2
Exercice