Je pars de la base d'une mise en page en colonnes typique pour notre projet de pratique. Avant de présenter ce projet en direct et en couleur, je souhaite vous montrer concrètement comment vous pouvez mettre en place vous-mêmes des mises en page en colonnes. L'accent sera mis sur des mises en page à deux et trois colonnes, car elles restent à ce jour la base de la plupart des sites Web.
Le classique ultime en matière de design web est probablement la mise en deux colonnes. Dans la zone de fenêtre de gauche, la navigation est généralement présentée, tandis que la colonne de droite affiche le contenu réel. En relation avec les blogs, ce comportement a d'ailleurs légèrement changé. En fait, dans de nombreux blogs, la navigation ou la publicité est affichée à droite, tandis que le contenu réel est présenté à gauche.
Ce type d'application peut être mis en œuvre assez facilement en CSS. En fait, les mises en deux colonnes sont la forme de mise en page la plus simple.
Je vais vous montrer dans l'exemple suivant une mise en deux colonnes qui fonctionne avec des valeurs absolues en pourcentage.
Voici l'exemple complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Dispositif de positionnement absolu</div>
<div id="nav">Navigation</div>
<div id="main">Ceci est la zone de contenu</div>
<div id="footer">Ici se trouvent les informations de copyright</div>
</body>
</html>Et voici le rendu dans le navigateur :
Vous pouvez d'ailleurs facilement déplacer la colonne de gauche vers la droite. Pour cela, ajustez les instructions suivantes :
• Pour #nav, remplacez left: 0 par right: 0.
• Pour #main, remplacez simplement margin-left par margin-right.
Une fois les modifications enregistrées, le résultat souhaité est visible.
Cependant, le design montré basé sur le positionnement absolu a un problème : si le contenu de la colonne de gauche devient plus long, il débordera sur la zone du pied de page.
Cela est simplement dû au fait que les éléments en position absolue ne "libèrent pas d'espace". Vous pouvez contourner ce problème en ajoutant des contenus appropriés dans la zone principale qui sont plus longs que ceux dans la colonne de gauche.
Vous devriez donc utiliser ce type de mise en page uniquement si vous êtes sûrs que la zone principale est effectivement plus haute que la colonne de gauche (ou de droite).
Une mise en deux colonnes avec technique Float
Le problème rencontré dans l'exemple précédent avec le chevauchement du pied de page peut être résolu en utilisant la propriété float. La syntaxe modifiée est la suivante :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Dispositif de positionnement absolu</div>
<div id="nav">Zone de navigation</div>
<div id="main">C'est la zone de contenu</div>
<div id="footer">Ici se trouvent les informations de copyright</div>
</body>
</html>Ici, les deux colonnes ont été équipées de la propriété float. En conséquence, les colonnes sont désormais disposées côte à côte.
La colonne de gauche se voit attribuer une largeur de 20 pour cent. Assurez-vous en particulier qu'un élément positionné via float attend effectivement toujours une largeur spécifiée.
La zone de contenu réelle reçoit une largeur de 80 pour cent. Cette zone est également positionnée avec float: left. De ce fait, cette zone est affichée à côté de la colonne de gauche.
Afin que le pied de page soit effectivement toujours situé dans la partie inférieure de la fenêtre - donc en dessous des colonnes - la syntaxe suivante est utilisée :
#footer {
clear: both;
}
Je vous avais déjà signalé la possibilité de définir une classe personnalisée pour cette variante.
Mise en trois colonnes avec Float
La mise en trois colonnes est également une variante couramment utilisée en design web. Une division typique est la suivante :
• La colonne de gauche contient la navigation.
• Dans la colonne centrale se trouve le contenu réel.
• À droite, des informations supplémentaires ou de la publicité sont affichées.
Ci-dessous, vous trouverez un exemple de création d'une mise en trois colonnes flexible. La syntaxe est - comme vous le verrez tout de suite - assez similaire à celle de la mise en deux colonnes précédente. Cependant, un nouveau div avec right est ajouté, qui finalement représente la colonne de fenêtre droite.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout avec positionnement absolu</div>
<div id="nav">La zone de navigation</div>
<div id="main">Ceci est la zone de contenu</div>
<div id="right">Ceci est la colonne de droite</div>
<div id="footer">Ici se trouvent les informations sur le copyright.</div>
</body>
</html>
La nouvelle zone s'est vu attribuer une largeur de 20 pour cent. Ainsi, la répartition se présente comme suit :
• Les colonnes de gauche et de droite occupent chacune 20 pour cent de l'espace publicitaire disponible.
• La colonne centrale a une largeur de 60 pour cent.
Grâce à la syntaxe présentée, la zone right est effectivement affichée à droite.
La syntaxe est cependant flexible à ce niveau. Vous pourriez adapter la zone main comme suit :
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Ici, float a été défini sur right. Cela déplace la zone right vers la gauche.
Dans ce didacticiel, vous avez vu à quel point il est facile de définir des mises en page de base en utilisant float. Cette connaissance constitue désormais la base de la construction d'un site web. Les prochains didacticiels verront la création pas à pas d'un site web, en commençant par la structure de base.
