Retrouvez cet article dans : Linux Pratique 38
Nous allons voir ensemble comment créer rapidement un « gabarit » classique de mise en page pour vos pages Web. Nous nous baserons sur un modèle constitué de 3 colonnes, les 2 colonnes latérales étant destinées à l'affichage d'un menu, de liens, etc. Nous n'oublierons pas de prévoir un en-tête et un pied de page.
La structure de la page
Notre gabarit est simplement constitué d'un enchaînement d'éléments de type bloc, compris entre des balises <div>. Chacun de ces blocs va correspondre à une zone bien définie de la page. L'ensemble des blocs sera contenu dans une même boîte d'identifiant « conteneur ».
Remarque :
Chaque boîte possède un arrière-plan de couleur différente, de manière à illustrer notre pas à pas de façon plus lisible sur les captures. Pour la même raison, le conteneur global est doté d'un contour noir de 3 pixels.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="fr" dir="ltr"> <head> <title>Une mise en page simple</title> <meta http-equiv="content-type" content="text/ html; charset=iso-8859-1" /> <link href="styles38.css" rel="stylesheet" type="text/css" title="styles_site" /> </head> <body> <div id="conteneur"> <div id="entete"><p>...</p></div> <div id="leftside"><p>...</p></div> <div id="rightside"><p>...</p></div> <div id="middle"><p>...</p></div> <div id="footer"><p>...</p></div> </div> </body> </html>
Rappelons que lorsque aucun positionnement n'est spécifié dans la feuille de style, les différents éléments de la page se placent selon l'ordre dans lequel ils apparaissent dans le code HTML. Ainsi, le bloc d'en-tête se placera en premier, suivi du bloc correspondant à la colonne de gauche, etc.
Il est par conséquent impératif de définir les 2 colonnes latérales AVANT la zone centrale dans le code HTML. Dans le cas contraire, si vous définissez la zone centrale avant la colonne de droite, cette
dernière, qui va recevoir la propriété float: right;,
se positionnera, certes à droite du conteneur parent (le conteneur global), mais en dessous de la boîte centrale (Fig. 1).
Fig. 1 : Attention à l'enchaînement des conteneurs dans le code HTML : de celui-ci peut dépendre le positionnement des blocs.
Positionner et styliser les conteneurs
Les colonnes latérales ont une largeur fixe (ici 200px) ; ce sont des boîtes flottantes, à gauche et à droite, dans le conteneur. C'est pourquoi on utilise la propriété float :
#leftside {
background-color: #0000FF;
float: left;
width: 200px;
}
#rightside {
background-color: #FF9900;
float: right;
width: 200px;
}
Sans précision aucune, un élément de type bloc vient toujours se positionner sous l'élément précédent ; un élément de type « en-ligne » vient toujours se placer à côté de l'élément précédent. C'est pourquoi la propriété float est ici indispensable : sans elle, les blocs viendraient se placer les uns en dessous des autres.
La propriété float permet de positionner un élément à gauche ou à droite de son élément parent (ici conteneur). Le reste du contenu du parent (la zone centrale et le pied de page) occupera alors l'espace restant, en commençant par s'écouler autour du flottant.
La zone centrale, quant à elle, n'est pas une boîte flottante ; elle possède des marges de taille fixe, égales à la largeur des colonnes latérales définies ci-dessus ; de cette manière, elle est correctement positionnée entre les 2 colonnes :
#middle {
position: relative;
background-color: #339900;
margin-left: 200px;
margin-right: 200px;
}
Le pied de page, enfin, n'a pas d'autre propriété que la définition d'une taille de police plus petite, car le pied de page est en général destiné à l'affichage d'informations annexes, mais essentielles : copyright, liens vers les contacts, vers les crédits, etc.
#footer {
background-color: #FF33CC;
font-size: 8px;
}
Fig. 2 : Pour éviter que le pied de page ne quitte la position qui lui est propre, on lui ajoute la propriété clear: both; qui l'empêche de se trouver sur la même ligne qu'un autre élément.
Mais attention au contenu des colonnes : il peut y avoir un problème d'affichage si l'une des deux colonnes contient plus de texte que la zone centrale. En effet, dans ce cas, le cadre du pied de page ne se positionne plus en dessous des colonnes, mais vient se placer en « boîte flottante » à droite de l'écran (Fig. 2). Pour résoudre ce problème, il suffit d'ajouter la propriété clear. Cette dernière permet d'indiquer de quel côté le flottement d'un conteneur est interdit. Autrement dit, elle empêche un élément de se trouver sur la même ligne qu'un élément flottant. En l'occurrence, nous souhaitons qu'il n'y ait aucun flottement, ce qui se traduit par la valeur both. On ajoute alors une propriété à la déclaration du #footer :
#footer {
background-color: #FF33CC;
font-size: 8px;
clear: both;
}
L'en-tête occupe toute la largeur du conteneur, autrement dit, toute la largeur de la page, car nous n'avons pas précisé de largeur fixe. Finalement, nous obtenons un résultat identique à la figure 3.
Fig. 3 : Nos « boîtes » sont placées correctement, il ne nous reste plus qu'à améliorer leur apparence...
Pour améliorer un peu l'apparence de votre page, (inutile de vous préciser de modifier la couleur des arrière-plans et de la police !). Veillez à indiquer la même couleur d'arrière-plan pour la zone centrale et le conteneur global et précisez éventuellement une même hauteur fixe pour les deux colonnes. Ce qui donne, à peu de choses près, le résultat suivant (Fig. 4).
Fig. 4 : Voilà , cette fois-ci, notre page est un peu plus présentable...
Constatez que si vous réduisez la taille de la fenêtre de votre navigateur, seules les largeurs de l'en-tête, de la zone centrale et du pied de page varient ; elles s'adaptent à la largeur de l'écran. Les colonnes, elles, restent de taille fixe.
Variante : mise en page à largeur fixe
L'objectif est ici de réaliser une mise en page identique à la précédente, à la différence près que l'ensemble devra être centré dans la page. Autrement dit, votre page n'occupera pas toute la fenêtre de votre navigateur.
Fig. 5 : Ici, le conteneur global est centré par rapport à la page.
Pour obtenir ce résultat (Fig. 5), il vous suffit juste de modifier la déclaration de #conteneur dans la feuille de styles précédente, de la façon suivante :
- ajoutez une largeur fixe, de 850 pixels par exemple ;
- supprimez ses marges verticales (top et bottom) ;
- fixez ses marges latérales (left et right) à auto (à l'aide de cette mention, les marges latérales occuperont tout l'espace disponible restant autour du bloc, et auront toutes deux la même largeur).
Ce qui donne la déclaration suivante :
#conteneur {
background-color: #FFFFCC;
width: 850px;
margin: 0 auto;
}
Notez ici que margin ne reçoit que 2 valeurs. Lorsqu'une seule valeur est spécifiée, cela signifie que les quatre marges reçoivent la même dimension. Lorsque deux valeurs sont spécifiées comme ici, la première
correspond aux marges du haut et du bas, la deuxième correspond aux marges gauche et droite. Tant qu'on y est, rappelons enfin que trois valeurs correspondent respectivement à la marge du haut, aux marges gauche et droite, puis à la marge du bas.
Cerise sur le gâteau : on n'oublie pas de soumettre notre page au terrible HTML validator du W3C (http://validator.w3.org/). Si vous avez de la chance, vous serez autorisé à ajouter le petit logo tant convoité, comme nous (!) (Fig. 6).
Fig. 6 : Notre page est conforme au XHTML 1.0 strict. Nous pouvons donc nous permettre d'ajouter le logo correspondant.
