La révolution CSS 2 !

Accueil :: Contact :: Liens
Menu Accueil
::: Introduction ::: Syntaxe ::: Flux ::: Propriétés ::: Menu déroulant ::: Exemples ::: Divers
Créer des mises en pages avec le css

Pour aborder le thème du flux, nous allons prendre l'exemple d'une mise en page sur trois colonnes, redimensionnables en fonction du navigateur.

Pour réaliser 3 colonnes (qui sont en faites des blocs), le contenu de la page est distribué en trois colonnes, chacune dans un bloc indépendant. Ces blocs sont placés côte à côte grâce aux styles. Pour préserver cette disposition qu'elle que soit la taille de la fenêtre du navigateur, toutes les largeurs et les marges internes seront définies en pourcentage.

Voir l'exemple.

Télécharger le fichier css

    <head>
    <style type="text/css">
    #Gauche {
    	width:28%;
    	float:left;
    	background:powderblue;
    	padding-bottom:10px;
    	padding-top:10px;
    	padding-left:1%;
    	padding-right:1%;
    }

/*Ce premier style s'applique à la balise div nommée Gauche. Sa largeur est égale à 28% plus la largeur des marges internes (padding-left, padding-right) qui font chacune 1% : Total de 30 %. Le bloc flotte : il est isolé du flux normal de la page et calé sur le bord gauche (float:left) de la fenêtre. Toute autre élement, s'il n'est pas flottant se positionnera autour de ce bloc. Alors que les blocs flottants se mettront automatiquement à droite de celui-ci.*/

    #Centre {
    	width:48%;
    	float:left;
    	background:blanchedalmond;
    	padding-bottom:10px;
    	padding-top:10px;
    	padding-left:1%;
    	padding-right:1%;
    }

/* Le bloc central est flottant également. Il se colle au precedent bloc. Les marges internes supérieur padding-top et inférieure padding-bottom laisse un peu d'espace en haut et en bas du bloc pour aérer le texte. */

    #Droite {
    	width:18%;
    	float:left;
    	background:palegreen;
    	padding-bottom:10px;
    	padding-top:10px;
    	padding-left:1%;
    	padding-right:1%;
    }

/* Le troisième bloc se place à droite des deux premiers. Chaque bloc à sa propre couleur de fond pour bien les diférencier. */

    #Bas {
    	background:oldlace;
    	border-top:1px solid black;
    	border-bottom:1px solid black;
    	text-align:center;
    	padding-bottom:10px;
    	padding-top:10px;
    	width:100%;
    	clear:both;
    }
    </style>
    </head>

/* Le bloc du page de la page s'étend sur toute la largeur width:100%. La propriété clear interdit l'apparition d'élements flottants à sa gauche ou à sa droite. Ce bloc est ainsi poussé vers le bas. On a ajouté des bordures supérieur et inférieur épaisse de 1px. */

    <body>
    <div id="Gauche">
    <h4>Colonne gauche :</h4>
    <p>Texte texte texte...</p>
    </div>
    <div id="Centre">
    <h4>Colonne centrale :</h4>
    <p>Texte texte texte...</p>
    </div>
    <div id="Droite">
    <h4>Colonne droite :</h4>
    <p>Texte texte texte...</p>
    </div>
    <div id="Bas">Bas de page - Copyrigth 2005</div>
    </body>

/* Les blocs se succèdent de gauche à droite dans la page en fonction de leurs positions dans le code css. */