Rappel : dans un premier temps, nous allons tâcher d'obtenir le rendu voulu pour les navigateurs respectueux des standards. On se penchera sur la compatibilité avec IE par la suite.
Pré-requis : pour comprendre ce qui suit, il faut avoir compris les principes de base du positionnement, en particulier le positionnement absolu et le comportement des flottants. Je vous conseille de (re)lire ce tutoriel si vous avez des doutes ;).
L'ensemble du site
Tout d'abord, nous allons faire en sorte que le site occupe toute la hauteur de la fenêtre, même si il n'y a pas assez de contenu pour remplir l'espace :
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
}
Maintenant, on va réduire la largeur utilisée pour le contenu à 750px. Avec un padding de 10px de chaque côté, la largeur totale sera de 770px, valeur qui permet aux visiteurs ayant une résolution d'écran de 800x600 de visualiser le site sans barre de défilement horizontale.
Une fois que la largeur est définie, les marges automatiques permettent de centrer le site dans la fenêtre.
body {
min-height: 100%;
width: 750px;
padding: 0 10px;
margin: 0 auto;
}
Le pied de page
Ensuite, on positionne le pied de page tout en bas. C'est vrai, il est déjà en bas. Mais nous allons faire en sorte que ce soit le cas même si le contenu de la page n'est pas assez long pour remplir l'écran ;). On utilise pour cela le positionnement absolu :
body {
min-height: 100%;
width: 750px;
padding: 0 10px;
margin: 0 auto;
position: relative;
}
div#center {
/* Pour éviter la superposition du pied de page et du contenu : */
padding-bottom: 50px;
}
div#footer {
position: absolute;
width: 750px;
bottom: 0;
left: 10px;
}
L'utilisation de position: relative; sur body définit les frontières de l'élément body comme point de repère pour le positionnement de ses enfants. La position bottom: 0px, left: 10px est maintenant le coin inférieur gauche de body, sans cela, le référent serait l'élément racine du document, à savoir html.
Les colonnes
Enfin, nous allons positionner les colonnes. Je décide de mettre la colonne contenant le menu à droite et celle contenant le texte à gauche. Parce que j'ai envie, na !
Les deux colonnes vont être positionnées en float. Pour avoir l'ordre des colonnes que je viens de choisir, elles doivent toutes les deux être flottantes, par exemple l'une à gauche et l'autre à droite.
div#content {
float: left;
width: 530px;
}
div#sidebar {
float: right;
width: 200px;
}
Les largeurs doivent être choisies de façon à ce que les deux blocs aient suffisamment d'espace pour se tenir côte à côte, compte tenu de leurs marges et padding.
Pour placer les colonnes dans l'ordre inverse (colonne principale à droite et petite colonne à gauche), il suffit de remplacer les float: left; par des float: right; dans cette partie de la feuille de styles.
Si vous avez reproduit les différentes étapes jusqu'ici, vous devriez vous apercevoir d'un petit problème : le pied de page n'est plus en bas de la page, il est venu s'afficher au milieu du bazar.
Voici pourquoi : en passant les colonnes en flottants, nous les avons sorties du flux de la page. Dès lors, elles n'interviennent plus dans le calcul de la hauteur de leur conteneur, elles dépassent à l'extérieur de #center. Tout se passe comme si celui-ci était vide, et le navigateur vient donc placer le pied de page en bas du premier écran (c'est à dire en bas de l'écran quand la barre de défilement vertical est tout en haut).
Pour remettre tout cela en ordre, il faut obliger la division #centre à englober les flottants dans le calcul de sa hauteur. Ce qu'on obtient en modifiant sa propriéré overflow :
div#center {
padding-bottom: 50px;
overflow: auto;
}
En réalité, nous venons de créer un nouveau contexte de formatage.
Lire à ce sujet : "Marges et contexte de formatage".
Maintenant que tout a l'air d'être bien placé, passons à la suite avec les images de fond !