Login

Bienvenue sur le site de Jef

Étude CSS

Création d'une page avec 2 colonnes

Création du fond de page

En premier, nous définissons le margin et le padding de html et body à 0px.
Nous décollons de 2px en haut avec margin-top
Puis nous définissons la taille des caractères à 100%, c'est-à-dire 1em.

Code CSS: 

html, body  { margin:0; margin-top:2px; padding:0; height:100%; font-size:100%; }
Nous définissons ensuite dans body les polices de caractère à utiliser par défaut, la couleur de fond et le type des caractères.
body       { font-family:verdana,arial,sans-serif; background-color:#fff;
             font-weight:normal; }
Au contraire des conteneurs de type "class" qui peuvent être utilisés plusieurs fois dans une page, les conteneurs de type "id" sont uniques.
Nous allons donc, maintenant, créer un conteneur de type id que nous appellons #fond .
Ce conteneur va contenir notre page.
Nous lui donnons une largeur spécifique de 750px par exemple, une hauteur variable (auto)
Nous centrons ce fond au milieu de la fenêtre à l'aide de margin:0px auto;. C'est-à-dire 0px en haut et en bas, et automatique à gauche et à droite en fonction de la largeur de la fenêtre.
Puis nous mettons une image en arrière plan. 
#fond      { width: 750px; height:auto; margin:0px auto;
             background-image:url(/images/fond/papier.gif); background-repeat:repeat;  
             font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; }
Nous allons tricher un peu pour les besoins de la démonstration et nous allons mettre temporairement une hauteur de 600px au conteneur #fond afin de voir la page qui est vide. 
#fond     { height:600px; }

En résumé:

Code html: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="c'est ma page" />
<title>c'est le titre de ma page</title>
<style type="text/css">
html, body  { margin:0; margin-top:2px; padding:0; height:100%; font-size:100%; }
body        { font-family:verdana,arial,sans-serif; background-color:#fff;
              font-weight:normal; }
#fond       { width: 750px; height:auto; margin:0px auto;
              background-image:url(/images/fond/papier.gif); background-repeat:repeat;  
              font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; }              
#fond       { height:600px; }
</style>
</head>

<body>
<div id="fond">
.... ici la page
.... 
</div><!-- Fin de fond -->
</body>

Observez le résultat dans l'exemple suivant.

Création du bandeau ou entête

Nous allons maintenant définir une classe #bandeau d'une hauteur de 100px avec une bordure noire pour voir le bandeau.

Code CSS: 

#bandeau     	{ width:auto; height:100px; margin:0px; padding:0px;
                  border: 1px solid #000000;}
Observez le résultat dans l'exemple suivant.

Pour écrire un titre, nous utiliserons la balise html <h1>
Pour centrer la balise dans le bandeau, il faut définir le style suivant: 

#bandeau h1  { text-align:center;}

En résumé:

Code html: 

<!DOCTYPE html PUBLIC  ...
...
...
<style type="text/css">
html, body  { margin:0; margin-top:2px; padding:0; height:100%; font-size:100%; }
body        { font-family:verdana,arial,sans-serif; background-color:#fff;
              font-weight:normal; }
#fond       { width: 750px; height:auto; margin:0px auto;
              background-image:url(/images/fond/papier.gif); background-repeat:repeat;  
              font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; }              
#fond       { height:600px; }
#bandeau    { width:auto; height:100px; margin:0px; padding:0px;}
#bandeau    { border: 1px solid #000000;}
#bandeau h1 { text-align:center;}	 

</style>
</head>

<body>
<div id="fond">
<div id="bandeau">
<h1>Ici c'est le bandeau de ma page</h1>
</div><!-- Fin de bandeau -->
.... 
.... 
</div><!-- Fin de fond -->
</body>

Observez le résultat dans l'exemple suivant.

Création d'un menu horizontal

Pour créer un menu horizontal, nous déclarons un conteneur #menu qui sera placé sous le bandeau.

Code CSS: 

#menu   	{ width:auto; height:35px; margin:3px auto; 
                  border:1px solid #99afc4;}

En résumé:

Code html: 

<!DOCTYPE html PUBLIC  ...
...
...
<style type="text/css">
html, body   { margin:0; margin-top:2px; padding:0; height:100%; font-size:100%; }
body         { font-family:verdana,arial,sans-serif; background-color:#fff;
               font-weight:normal; }
#fond        { width: 750px; height:auto; margin:0px auto;
               background-image:url(/images/fond/papier.gif); background-repeat:repeat;  
               font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; }              
#fond        { height:600px; }
#bandeau     { width:auto; height:100px; margin:0px; padding:0px;}
#bandeau     { border: 1px solid #000000;}
#bandeau h1  { text-align:center;}	 
#menu        { width:auto; height:35px; margin:3px auto; 
                  border:1px solid #99afc4;}

</style>
</head>

<body>
<div id="fond">
<div id="corps">
<div id="bandeau">
<h1>Ici c'est le bandeau de ma page</h1>
</div><!-- Fin de bandeau -->
<div id="menu">
<p>Ici c'est le menu</p>
</div><!-- Fin de menu -->
.... 
.... 
</div><!-- Fin de corps -->
</div><!-- Fin de fond -->
</body>

Observez le résultat dans l'exemple suivant.

Pour la construction d'un menu, consulter Création d'un menu horizontal simple pas à pas
ou Création d'un menu horizontal complexe pas à pas

Création de deux colonnes

Colonne de gauche

Pour la colonne de gauche, nous allons déclarer un conteneur flottant avec float:left; et que nous nommons #colonne.
Nous définissons une largeur de 166px et nous trichons en mettant une hauteur de 300px car le conteneur est vide et n'apparaîtrait pas.


Code CSS: 

#colonne	{ float:left; width:166px; height:300px; margin:0px; 
                  border: 1px solid #FF8040; }

En résumé:

Code html: 

<!DOCTYPE html PUBLIC  ...
...
...
<style type="text/css">
html, body   { margin:0; margin-top:2px; padding:0; height:100%; font-size:100%; }
body         { font-family:verdana,arial,sans-serif; background-color:#fff;
               font-weight:normal; }
#fond        { width: 750px; height:auto; margin:0px auto;
               background-image:url(/images/fond/papier.gif); background-repeat:repeat;  
               font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; }              
#fond        { height:600px; }
#bandeau     { width:auto; height:100px; margin:0px; padding:0px;}
#bandeau     { border: 1px solid #000000;}
#bandeau h1  { text-align:center;}	 
#menu        { width:auto; height:35px; margin:3px auto; 
                  border:1px solid #99afc4;}
#colonne     { float:left; width:166px; height:300px; margin:0px; 
               border: 1px solid #FF8040; }

</style>
</head>

<body>
<div id="fond">
<div id="bandeau">
<h1>Ici c'est le bandeau de ma page</h1>
</div><!-- Fin de bandeau -->
<div id="menu">
<p>Ici c'est le menu</p>
</div><!-- Fin de menu -->
<div id="colonne">
<p>Ici c'est la colonne de gauche</p>
</div><!-- Fin de colonne -->
.... 
.... 
</div><!-- Fin de fond -->
</body>

Observez le résultat dans l'exemple suivant.

Colonne de droite

Maintenant, il s'agit de définir la colonne de droite que nous nommerons #page et qui sera la page principale.
Le conteneur ne sera pas flottant, mais il sera décalé sur la droite à l'aide d'un margin-left:168px;, pour laisser la place au menu flottant.
Pourquoi 168px? il faut faire un petit calcul simple!
Nous avons ajouté une bordure de 1px autour de #menu, donc 1px à gauche et 1px à droite, ce qui fait que la largeur réelle est 166px+2px=168px
Quant à #page, la largeur sera de 580px, et sa largeur réelle sera pour la même raison de 580px+2px=582px
Comme #menu et #page sont contenu dans #fond qui fait 750px, le compte est bon: 580px+2px+166px+2px=750px
Vous suivez toujours?
Nous mettrons la hauteur de la page automatique avec height:auto, mais nous imposerons une hauteur minimum de cette page avec min-height:500px;
De même, nous remettons #fond { height:auto; }
Code CSS: 

#page	{ width:580px; height:auto; min-height:500px; margin:0px; 
          margin-left:168px; border: 1px solid #00F;}

En résumé:

Code html: 

<!DOCTYPE html PUBLIC  ...
...
...
<style type="text/css">
html, body   { margin:0; margin-top:2px; padding:0; height:100%; font-size:100%; }
body         { font-family:verdana,arial,sans-serif; background-color:#fff;
               font-weight:normal; }
#fond        { width: 750px; height:auto; margin:0px auto;
               background-image:url(/images/fond/papier.gif); background-repeat:repeat;  
               font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; }              
#bandeau     { width:auto; height:100px; margin:0px; padding:0px;}
#bandeau     { border: 1px solid #000000;}
#bandeau h1  { text-align:center;}	 
#menu        { width:auto; height:35px; margin:3px auto; 
                  border:1px solid #99afc4;}
#colonne     { float:left; width:166px; height:300px; margin:0px; 
               border: 1px solid #FF8040; }
#page	     { width:580px; height:auto; min-height:500px; margin:0px; margin-left:168px; 
               border: 1px solid #00F;}
</style>
</head>

<body>
<div id="fond">
<div id="bandeau">
<h1>Ici c'est le bandeau de ma page</h1>
</div><!-- Fin de bandeau -->
<div id="menu">
<p>Ici c'est le menu</p>
</div><!-- Fin de menu -->
<div id="colonne">
<p>Ici c'est la colonne de gauche</p>
</div><!-- Fin de colonne -->
<div id="page">
<p>Ici c'est la page à droite</p>
</div><!-- Fin de page -->
.... 
.... 
</div><!-- Fin de fond -->
</body>

Observez le résultat dans l'exemple suivant.

Création d'un pied de page

Il est intéressant de mettre ce qu'on appelle un pied de page qui contiendra en général le plan du site ou par exemple les informations légales.
Mais comme la hauteur de la page peut varier et n'est donc en général jamais fixe, nous allons utiliser les marges négatives pour placer le pied de page toujours en fin.
Pour cela nous redefinissons le margin-bottom de #page à par exemple 30px, pour laisser de la place au pied de page
Puis nous définissons un conteneur #pied avec clear:both pour se libérer des éventuels flottant gauche et droite (mais dans notre exemple ce n'est pas nécessaire).
Sa hauteur sera de 25px et nous mettons une marge négative en haut margin-top:-25px pour faire remonter ce conteneur dans #corps.
Vous pouvez approfondir avec Les marges négatives

Code CSS: 

#page	 	{ margin-bottom:30px;}
#pied 		{ clear:both; width:auto; height:25px; margin-top:-25px; 
                  border: 1px solid #000000;}

En résumé:

Code html: 

...
...
<style type="text/css">
html, body   { margin:0; margin-top:2px; padding:0; height:100%; font-size:100%; }
body         { font-family:verdana,arial,sans-serif; background-color:#fff;
               font-weight:normal; }
#fond        { width: 750px; height:auto; margin:0px auto;
               background-image:url(/images/fond/papier.gif); background-repeat:repeat;  
               font-family:Georgia, "Times New Roman", Times, serif; text-align:justify; }              
#bandeau     { width:auto; height:100px; margin:0px; padding:0px;}
#bandeau     { border: 1px solid #000000;}
#bandeau h1  { text-align:center;}	 
#menu        { width:auto; height:35px; margin:3px auto; 
                  border:1px solid #99afc4;}
#colonne     { float:left; width:166px; height:300px; margin:0px; 
               border: 1px solid #FF8040; }
#page	     { width:580px; height:auto; min-height:500px; margin:0px; margin-left:168px; 
               border: 1px solid #00F;}
#page        { margin-bottom:30px;}
#pied        { clear:both; width:auto; height:25px; margin-top:-25px; 
               border: 1px solid #000000;}

</style>
</head>

<body>
<div id="fond">
<div id="bandeau">
<h1>Ici c'est le bandeau de ma page</h1>
</div><!-- Fin de bandeau -->
<div id="menu">
<p>Ici c'est le menu</p>
</div><!-- Fin de menu -->
<div id="colonne">
<p>Ici c'est la colonne de gauche</p>
</div><!-- Fin de colonne -->
<div id="page">
<p>Ici c'est la page à droite</p>
</div><!-- Fin de page -->

<div id="pied">
<p>Ici c'est le pied!</p>
</div><!-- Fin de pied -->   
</div><!-- Fin de fond -->
</body>
...

Observez le résultat dans l'exemple suivant.