L'utilisation classique d'une présentation en deux colonnes est celle d'une barre de menu à côté du contenu. Le code source HTML présente le contenu et sa structure.
Exemple d'affichage: aperçu sans CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Présentation en deux colonnes - structure</title>
</head>
<body>
<ul id="menu">
<li><a href="intro.htm">Introduction à la mise en page avec les CSS</a></li>
<li><a href="colonnes.htm">Présentation en colonnes avec les CSS</a></li>
<li><a href="domainefixe.htm">Domaines fixes avec les CSS</a></li>
<li><a href="barredemenu.htm">Barres de menu avec les CSS</a></li>
<li><a href="aiguillage.htm">Aiguillage de navigateurs avec les CSS</a></li>
</ul>
<div id="contenu">
<h1>Mise en page avec CSS</h1>
<h2>Sructure HTML sans CSS</h2>
<p>Cette page ne contient d'abord que la structure et le contenu.
La présentation ne sera définie avec des CSS que dans le prochain exemple.</p>
<p>Pourtant cette page est déjà utilisable et sera interprétée par le navigateur
avec ses valeurs par défaut de manière cohérente.</p>
</div>
</body>
</html>
Pour les boutons de menu on utilise ici une 
liste dont l' ID menu servira, plus loin, de sélecteur pour les définitions CSS. Les éléments du contenu sont groupés dans un élément div qui contient également un ID (contenu) et qui facilitera, plus loin, le formatage du contenu et de ses éléments par des CSS.
Dans le code source, les éléments à qui vous voulez attribuer la propriété float doivent être notés en premier.
Utilisez une déclaration de type de document pour le mode conforme aux standards, pour empêcher des erreurs d'affichage.
Pour placer le menu à gauche du contenu, mais aussi pour enlever les puces aux boutons de la liste dans le but de définir l'affichage des autres éléments sans laisser les valeurs par défaut des navigateurs, on incorporera cette feuille de style dans le code source.
Exemple d'affichage: aperçu avec CSS
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
}
ul#menu {
font-size: 0.91em;
float: left; width: 23em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#menu li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#menu a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#menu a:link {
color: black; background-color: #eee;
}
ul#menu a:visited {
color: #666; background-color: #eee;
}
ul#menu a:hover {
color: black; background-color: white;
}
ul#menu a:active {
color: white; background-color: gray;
}
div#contenu {
margin-left: 22em;
padding: 0 1em;
border: 1px dashed silver;
min-width: 16em; /* cette largeur minimale (du titre) empêche des erreurs d'affichage avec
des navigateurs modernes */
}
div#contenu h1 {
font-size: 1.5em;
margin: 0 0 1em;
}
div#contenu h2 {
font-size: 1.2em;
margin: 0 0 1em;
}
div#contenu p {
font-size:1em;
margin: 1em 0;
}
Le menu est "floaté" à gauche et sa largeur est indiquée en em en rapport avec la longueur du lien le plus long; par ceci, la taille du texte peut être adaptée à un degré défini (d'ailleurs aussi possible pour des images <img> pour autant que leur largeur et leur hauteur soient données en em comme dans l'exemple de mise en page avec un domaine fixe). Pour le contenu une marge extérieure gauche est définie par margin-left, légèrement supérieure à la largeur du menu. L' unité relative em dépend ici de la taille de police (font-size), qui est plus petite pour le menu.
Il n'y a pas d'indication de largeur pour le contenu, ce qui permet une adaptation à la largeur de la fenêtre et une correction de l'erreur du modèle de boîte avec Internet Explorer. Pour des navigateurs modernes qui soutiennent min-width, une largeur minimale est doné pour éviter un saut à la ligne dans le titre et pour s'assurer que le contenu ne devienne pas trop étroit dans de petites fenêtres d'affichage.
Pour éviter des problèmes d'affichage - surtout lors d'une grandeur relative avec Internet Explorer, lorsqu'on utilise em il faut indiquer la grandeur de texte pour l'élément extrême en % en évitant le 100% exact. Dans ces exemples on note donc body {font-size:100.01%}.
Si on enlève la marge extérieure, le contenu entoure le menu et continue sous le menu. Cela permet d'exploiter de manière optimale l'espace d'affichage, comme visible dans l'exemple suivant d'un menu placé à droite.
/* Voici les modifications: */
ul#menu {
font-size: 0.91em;
float: right; width: 23em;
margin: 0 0 1em 1em; padding: 0;
border: 1px dashed silver;
}
div#contenu { } /* pas de formatage (on peut laisser tomber ce div) */
body {
min-width: 20em; /* largeur minimale (du menu) pour empêcher une erreur d'affichge avec
des navigateurs modernes */
}
Le menu est placé par float:right, ce qui est indiqué pour un texte qui l'entoure. Le menu est pourvu d'une marge extérieure par margin-left et margin-bottom avec le contenu qui, lui, n'a plus de marge.
Pour limiter la largeur du contenu et pour éviter de trop longues lignes de texte, tous les éléments du prochain exemple sont groupés dans un élément div supplémentaire d'une largeur fixe de 760px et centré.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Présentation en deux colonnes à largeur fixe</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* centrer avec Internet Explorer */
}
div#page {
text-align: left; /* contenu placé à gauche */
margin: 0 auto; /* centrer horizontalement de manière standard */
width: 760px;
padding: 0.5em;
border: 2px ridge silver;
}
ul#menu {
font-size: 0.91em;
float: left; width: 23em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#menu li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#menu a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#menu a:link {
color: black; background-color: #eee;
}
ul#menu a:visited {
color: #666; background-color: #eee;
}
ul#menu a:hover {
color: black; background-color: white;
}
ul#menu a:active {
color: white; background-color: gray;
}
div#contenu {
margin-left: 22em;
padding: 0 1em;
border: 1px dashed silver;
}
div#contenu h1 {
font-size: 1.5em;
margin: 0 0 1em;
}
div#contenu h2 {
font-size: 1.2em;
margin: 0 0 1em;
}
div#contenu p {
font-size:1em;
margin: 1em 0;
}
</style>
</head>
<body>
<div id="page">
<ul id="menu">
<li><a href="intro.htm">Introduction à la mise en page avec les CSS</a></li>
<li><a href="colonnes.htm">Présentation en colonnes avec les CSS</a></li>
<li><a href="domainefixe.htm">Domaines fixes avec les CSS</a></li>
<li><a href="barredemenu.htm">Barres de menu avec les CSS</a></li>
<li><a href="aiguillages.htm">Aiguillages de navigateurs avec les CSS</a></li>
</ul>
<div id="contenu">
<h1>Mise en page avec les CSS</h1>
<h2>Page à largeur fixe</h2>
<p>Cette page a une largeur fixe de 760px et elle est centrée.</p>
<p>La largeur est choisie de manière à pouvoir se passer de barre de défilement
horizontale (taille minimale de la fenêtre: 800px) et pouvoir imprimer sans problème.</p>
</div>
</div>
</body>
</html>
L'élément de bloc supplémentaire <div id="page"> est nécessaire pour imposer une largeur fixe à la page et pour la centrer; la bordure est là pour mieux visualiser ce changement, vous pouvez vous en passer. Pour <body> la propriété text-align:center est donnée (de nouveau annulée par div#page), car dans le mode conforme au standard, Internet Explorer version 6 centre certes les éléments de bloc par margin:auto mais leur applique aussi text-align de manière erronnée.
La largeur de 760px est donnée, pour que la page soit bien placée dans une fenêtre large de 800px avec barre de défilement verticale, et pour qu'elle puisse être imprimée an A4 avec les valeurs normales pour les bords. C'est pourquoi il n'y a pas de marges sur les côtés.
On voit souvent une page avec un menu à gauche, un contenu de largeur flexible au centre et, à droite, une colonne avec des informations supplémentaires. Pour rendre cette présentation avec des CSS, il suffit de rajouter encore une boîte avec la propriété float:right et une bonne valeur pour width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Présentation en trois colonnes;/title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 40em; /* largeur minimale qui empêche des sauts à
la ligne et des erreurs d'affichage avec les navigateurs modernes */
}
ul#menu {
font-size: 0.83em;
float: left; width: 18em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#menu li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#menu a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#menu a:link {
color: black; background-color: #eee;
}
ul#menu a:visited {
color: #666; background-color: #eee;
}
ul#menu a:hover {
color: black; background-color: white;
}
ul#menu a:active {
color: white; background-color: gray;
}
div#info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0; padding: 0;
border: 1px dashed silver; background-color: #eee;
}
div#info strong {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#info p {
font-size: 1em;
margin: 0.5em;
}
div#contenu {
margin: 0 12em 0 16em;
padding: 0 1em;
border: 1px dashed silver;
}
div#contenu h1 {
font-size: 1.5em;
margin: 0 0 0.5em;
}
div#contenu h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#contenu p {
font-size: 1em;
margin: 1em 0;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="intro.htm">Introduction à la mise en page avec les CSS</a></li>
<li><a href="colonnes.htm">Présentation en colonnes avec les CSS</a></li>
<li><a href="domainefixe.htm">Domaines fixes avec les CSS</a></li>
<li><a href="barredemenu.htm">Barres de menu avec les CSS</a></li>
<li><a href="aiguillages.htm">Aiguillages de navigateurs avec les CSS</a></li>
</ul>
<div id="info">
<strong>Boîte d'info</strong>
<p>Bien que cette boîte d'information soit affichée en dernier, dans
dans le code source elle doit être notée avant le contenu qui reste dans
le flux.</p>
<p>Comme aucun float n'est défini pour le contenu, on peut renoncer
à indiquer une largeur et la page peut utiliser tout l'espace à
disposition.</p>
<p>Cette méthode, de laisser un élément dans le flux et de
pouvoir renoncer à lui attribuer une largeur a, en plus, l'avantage d'équilibrer
une erreur d'affichage due au mauvais modèle de boîte avec Internet
Explorer.</p>
</div>
<div id="contenu">
<h1>Mise en page avec les CSS</h1>
<h2>Présentation en trois colonnes</h2>
<p>Dans cet exemple, la largeur du menu est légèrement
réduite, pour faire place à une boîte d'information
supplémentaire sur la droite; la taille de la police d'écriture dans le menu
et la boîte d'information est un peu diminuée, pour s'adapter
aux largeurs relativement plus étroites.</p>
<p>Seules les boîtes extérieures sont pourvues d'une
largeur et d'un float. Par l'indication de la largeur en fonction de la
grandeur du texte en 'em', les boîtes peuvent s'adapter à un
changement de taille de police.</p>
<p>Le contenu au centre est tenu à distance par deux marges extérieures
et s'adapte de manière flexible à la largeur de la fenêtre.</p>
</div>
</body>
</html>
Pour juxtaposer plusieurs boîtes par float on peut renoncer à définir float et width pour une des boîtes, ici le contenu. Ainsi elle dispose de tout l'espace disponible et le remplit. Ceci nécessite de placer tous les éléments avec float en premier dans le code source, pour qu'ils puissent réserver leur propre largeur.
Pour que le contenu n'entoure pas les boîtes, il est délimité margin-left et margin-right. Les valeurs pour margin sont liées aux bords et correspondent aux largeurs des boîtes sorties du flux auquel on additionne la distance désirée. Si vous vous demandez pourquoi ici la valeur de margin est plus petite ou égale à la valeur width des boîtes de latérales et que malgré ceci il reste une distance: l'unité em employée dépend dans les indications de longueurs de la taille du texte de l'élément - celle-ci est définie plus grande pour la boîte contenu.
Avec une valeur pour min-width on peut éviter un saut de boîtes dans de petites fenêtres de navigateurs modernes.
Grâce à cet exemple vous voyez aussi que les boîtes ne s'influencent pas mutuellement dans leurs hauteurs. Ce n'est pas forcément un inconvénient, mais peut être exploité pour la présentation de la page. Cela nécessite en revanche une autre façon de penser que la vision en lignes et colonnes des mises en page avec tableaux.
Dans cet exemple la taille de police de div#info est donnée font-size:0.9em. La valeur augmentée font-size:1.33em pour div#info donne, en l'applicant à la taille 0.9em précédente comme résultat 1.197em (0.9 fois 1.33). Cela correspond environ à la taille du texte, font-size:1.2em, de div#contenu h2.
Tenez compte de l'héritage de tous les éléments emboîtés, auxquels une taille de police relative différente de 1em ou 100% a été attribuée. Vous pouvez contourner l'effort de calcul si vous ne donnez une taille de police qu'à l'élément extérieur ou intérieur. Dans le premier cas la taille du texte est héritée par tous les éléments contenus (Internet Explorer a des problèmes avec l'héritage aux cellules d'un tableau). Dans le second cas, la base pour la taille de police des éléments intérieurs est la même.
Cette problématique d'héritage ne se pose pas si vous utilisez l'unité px pour les polices d'écriture. Mais dans ce cas, vous n'aurez pas la possibilité d'indiquer en em les longueurs en fonction des tailles de police pour adapter la mise en page à la taille de police que l'utilisateur a réglée dans son navigateur. D'autre part, px empêche l'adaptation des tailles de police avec Internet Explorer, ce qui peut être un obstacle pour les utilisateurs.
Beaucoup de pages commencent par une entête avec le titre ou un logo, et se terminent par un pied de page contenant des mentions de droit d'auteur ou bien des liens généraux comme 'en haut', 'Informations légales' ou 'Plan du site'. Ce genre de présentation a des avantages pratiques avec les CSS:
L'entête est placée au début du code source et se comporte d'un titre h1; on utilisera ainsi de manière hiérarchique correcte des titres de niveau inférieur pour les boîtes suivantes. La propriété CSS clear du pied de page annulle le flux (float) des éléments placés sur les côtés ce qui peut être nécessaire lorsque des arrière-plans sont utilisés, comme le montrera le dernier exemple.
D'autre part les deux derniers exemples contiennent une adapation pour Internet Explorer jusqu'à la version 6 pour palier à l'indentation des 3px du texte à côté du menu.
L'exemple suivant complète le précédent, en trois colonnes, par une entête et un pied de page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Présentation en trois colonnes avec entête et pied de page</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 41em; /* largeur minimale qui empêche des sauts à
la ligne et des erreurs d'affichage avec les navigateurs modernes */
}
h1 {
font-size: 1.5em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge silver;
}
ul#menu {
font-size: 0.83em;
float: left; width: 18em;
margin: 0 0 1.2em; padding: 0;
border: 1px dashed silver;
}
ul#menu li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#menu a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#menu a:link {
color: black; background-color: #eee;
}
ul#menu a:visited {
color: #666; background-color: #eee;
}
ul#menu a:hover {
color: black; background-color: white;
}
ul#menu a:active {
color: white; background-color: gray;
}
div#info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0 0 1.1em; padding: 0;
background-color: #eee; border: 1px dashed silver;
}
div#info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#info p {
font-size: 1em;
margin: 0.5em;
}
div#contenu {
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver;
}
* html div#contenu {
height: 1em; /* contre la bogue des 3 pixels avec Internet Explorer y compris la version 6 */
}
div#contenu h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#contenu p {
font-size: 1em;
margin: 1em 0;
}
p#pied {
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
</style>
</head>
<body>
<h1>Mise en page avec les CSS</h1>
<ul id="menu">
<li><a href="intro.htm">Introduction à la mise en page avec les CSS</a></li>
<li><a href="colonnes.htm">Présentation en colonnes avec les CSS</a></li>
<li><a href="domainefixe.htm">Domaines fixes avec les CSS</a></li>
<li><a href="barredemenu.htm">Barres de menu avec les CSS</a></li>
<li><a href="aiguillages.htm">Aiguillages de navigateurs avec les CSS</a></li>
</ul>
<div id="info">
<h2>Boîte d'info</h2>
<p>Etiez-vous étonné que le titre de cette boîte dans l'exemple
précédent n'ait pas été balisé comme tel? Comme cette
boîte d'information était placée, dans le code source, avant le contenu
avec le titre principal, un titre de niveau 2 n'aurait pas encore eu de sens.</p>
<p>Dans le code source de l'exemple présent, le titre de la page est noté
en premier, ce qui résoud ce problème sémantique.</p>
</div>
<div id="contenu">
<h2>Trois colonnes avec entête et pied de page</h2>
<p>Cet exemple est complété d'une entête et d'un pied de page.</p>
<p>L'entête est définie en titre de niveau 1 <h1> et peut
être formatée avec les feuilles de style comme un élément <div> - ici avec une
bordure et une couleur d'arrière-plan. On pourrait aussi insérer une image comme
arrière-plan ou bien comme <img> dans <h1>.</p>
<p>Ne considérez pas cet exemple comme une mise en page terminée.
Utilisez le squelette HTML pour les contenus de votre page et adaptez les CSS
à votre page selon vos désirs: essayez diverses tailles, couleurs, bordures,
et ajoutez, par exemple, des images de votre choix.</p>
</div>
<p id="pied">Ce pied de page rétablit le flux
par la propriété CSS 'clear'.</p>
</body>
</html>
L'aiguillage nommé 'star HTML' attribue une hauteur au contenu seulement avec Internet Explorer jusqu'à la version 6. La hauteur trop petite sera agrandie par le navigateur, et entraîne qu'Internet Explorer ne place plus le texte à côté du menu floaté en retrait de trois pixels, comme dans les exemples précédents.
Vous pouvez adapter cet exemple et l'élargir, pour une présentation en trois colonnes qui s'adapte aux différentes tailles de police et de fenêtres d'affichage. Toutefois, cette flexibilité aura comme conséquence que, dans des fenêtres étroites et avec une trop grande taille de police, les éléments se placent les uns sous les autres. Elle empêche également un partage optique en colonnes avec différentes couleurs d'arrière-plan, comme vous avez l'habitude de le voir lors de mises en page avec des tableaux.
Le dernier exemple met à votre disposition une présentation en deux colonnes à largeurs fixes, dans laquelle les liens du menu de gauche se différencient du contenu par une autre couleur d'arrière-plan. Pour démonstration, le logo de SELFHTML a été attribué comme arrière-plan de l'entête, un morceau en étant visible avec un réglage normal de la taille de police d'écriture.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Présentation en colonnes avec séparation graphique</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* centrer avec Internet Explorer */
}
div#page {
text-align: left; /* placer la page à gauche */
margin: 0 auto; /* centrer de manière standard */
width: 760px;
padding: 0;
background: #ffffe0 url(arriere_plan.gif) repeat-y;
border: 2px ridge silver;
}
h1 {
font-size: 1.5em;
margin: 0; padding: 0.3em;
text-align: center;
background: #fed url(../../../src/logo.gif) no-repeat 100% 45%;
border-bottom: 1px solid silver;
}
ul#menu {
font-size: 0.83em;
float: left; width: 200px;
margin: 0 0 1.2em; padding: 0;
}
ul#menu li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#menu a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#menu a:link {
color: black; background-color: white;
}
ul#menu a:visited {
color: #666; background-color: white;
}
ul#menu a:hover {
color: black; background-color: #eee;
}
ul#menu a:active {
color: white; background-color: gray;
}
div#contenu {
margin: 0 0 1em 220px;
padding: 0 1em;
}
* html div#contenu {
height: 1em; /* contre le bug des 3px avec Internet Explorer jusqu'à la version 6 */
margin-bottom: 0;
}
div#contenu h2 {
font-size: 1.2em;
margin: 0.2em 0;
color: navy;
}
div#contenu p {
font-size: 1em;
margin: 1em 0;
}
p#pied {
clear: both;
font-size: 0.83em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed;
border-top: 1px solid silver;
}
</style>
</head>
<body>
<div id="page">
<h1>Mise en page avec les CSS</h1>
<ul id="menu">
<li><a href="intro.htm">Introduction à la mise en page avec les CSS</a></li>
<li><a href="colonnes.htm">Présentation en colonnes avec les CSS</a></li>
<li><a href="domainefixe.htm">Domaines fixes avec les CSS</a></li>
<li><a href="barredemenu.htm">Barres de menu avec les CSS</a></li>
<li><a href="aiguillages.htm">Aiguillages de navigateurs avec les CSS</a></li>
</ul>
<div id="contenu">
<h2>Présentation en deux colonnes avec image d'arrière-plan</h2>
<p>Pour bien différencier les deux colonnes, une image d'arrière-plan est
utilisée ici.</p>
<p>Cela demande, malheureusement, que la largeur du menu de gauche soit donnée
en 'px', en relation avec l'image d'arrière-plan.
La largeur de cette boîte ne pourra donc pas s'adapter à un changement
de taille de police d'écriture.</p>
<p>De même que la couleur grise de l'image d'arrière-plan de gauche,
la couleur d'arrière-plan jaune a été donnée au DIV entourant les
éléments.
Le menu et le contenu, eux-mêmes, sont sans arrière-plan.<br>
La séparation des boîtes est ainsi simulée en couleurs; elle
est indépendente de leurs hauteurs.</p>
<p>Une couleur d'arrière-plan a été attribuée à
l'entête et au pied de page, pour que cette séparation par les couleurs
ne les concerne pas.</p>
</div>
<p id="pied">Ce pied de page rétablit le flux
à l'intérieur du DIV qui les entoure.</p>
</div>
</body>
</html>
Comme des éléments juxtaposés ne s'influencent pas dans leurs hauteurs, l'arrière-plan de la colonne de gauche ainsi que la ligne de séparation (comme bordure ici) ont été réalisées avec l'image d'arrière-plan ci-dessous:
[
]
Elle n'est haute que de quelques pixels, et de même largueur que la boîte du menu y compris la distance jusqu'au contenu de droite. Définie comme image d'arrière-plan du div#page, elle est répétée verticalement selon l'axe y et s'adapte à la hauteur totale de div#page. En plus de cela, une couleur jaune d'arrière-plan est donnée; elle remplit le contenu de droite.
Cette séparation visuelle de la page demande une largeur fixe en px pour le menu. Veillez donc que les textes des liens puissent aussi prendre place dans la boîte avec une écriture agrandie. Vous pouvez permettre des sauts à la ligne par des espaces vides.
En combinant les exemples de cette page, vous devriez être capable maintenant de présenter une mise en page avec des arrière-plans et sans limitation de largeur de page ou bien en trois colonnes. Dans le cas où il vous faudrait plus de trois colonnes, définissez les propriétés CSS float et width pour les boîtes suivantes. Vous pourrez toujours laisser la dernière boîte dans le code source dans le flux des éléments, et renoncer à lui attribuer une largeur. Vous éviterez des erreurs d'affichage et n'aurez pas à corriger l' erreur du modèle de boîte d'Internet Explorer par un aiguillage CSS.
Alors que les présentations à l'aide de tableaux se distinguent par des lignes et des colonnes de hauteur et largeur identiques, avec différentes couleurs d'arrière-plan, les feuilles de style peuvent tenter de munir chaque boîte d'une bordure continue, traitillée ou pointillée. Ce fut le cas dans les exemples de cette page pour but de démonstration. Soyez cependant créatif, employez la propriété CSS border sans exagération et de manière bien ciblée pour vos bordures.
Si vous délimitez des domaines avec des bordures, des lignes simples ou des couleurs d'arrière-plan, pensez à un espace intérieur autour de votre texte.
Utilisez les possibilités avancées des CSS, ne pensez plus seulement en lignes et en colonnes, mais laissez le texte entourer les éléments. Tolérez si des éléments flottants se placent les uns sous les autres dans des fenêtres étroites - cela peut être plus agréable pour l'utilisateur qu'une barre de défilement horizontale. Vous pouvez aussi donner à un élément qui en entoure d'autres une largeur suffisante comme dans l'exemple ci-dessus pour éviter certaines dispositions et pour donner une impression de colonnes.
Donnez de la couleur à vos pages - mais sans exagération. Choisissez des couleurs bien assorties mais dans des tons semblables. Comme contraste, vous pouvez mettre des accents dans des couleurs complémentaires. Veillez à avoir des contrastes de couleur et de luminosité suffisantes pour que vos textes puissent être lus sans peine. Un texte sombre sur un fond clair est là plus favorable. Ne comptez pas sur les valeurs par défaut des navigateurs, ne comptez pas sur la couleur du texte noire et le fond blanc. Si vous indiquez la couleur de l'arrière-plan, n'oubliez sous aucun prétexte de définir la couleur du texte ni les couleurs des liens, car vous ne pouvez pas toujours compter sur des valeurs par défaut uniformes. Pour vos visiteurs cela paut être une aide d'avoir une coulur différente pour un lien visité ou non.
|
| |
 |
Domaines fixes avec les CSS
|
 |
Introduction à la mise en page avec les CSS
|
 SELFHTML/Aides à la navigation Feuilles de style CSS Mise en page avec les CSS |
|
© 2007 Redaktion SELFHTML / © 2007 Traduction Beate Niklewicz
selfhtml@fr.selfhtml.org