/ Accueil / HTML/CSS / Partie 2 : CSS
< Mise en page en deux colonnes />
// Ecrit le 15/01/2009 à 18:36:32 par Arthezius
Dans cette partie, nous allons voir comment réaliser simplement une mise en page en deux colonnes avec un entête, un menu, le contenu et un pied.
La structure
Voici le code que nous allons utiliser:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="entete"></div>
<div id="menu"><a href="#">Lien</a></div>
<div id="contenu">Contenu de la page</div>
<div id="pied"></div>
</div>
</body>
</html>
Il s'agit d'un code XHTML simple.
Les div étant de bloc et le sélecteur id="" permettant de lui attribuer des règles de style particulière.
Nous allons donc lui attribuer des règles CSS dans le fichier test.css
Feuille de style CSS
Voici la décomposition du fichier CSS que nous allons utiliser:
body{
background:#94d0c8; /*Couleur de fond*/
}
div#container{
width:750px; /*Largeur du container*/
margin:10px auto 0px auto; /*Positionnement centré avec 10px en haut*/
}
div#entete{
background:#11d724; /*Couleur de fond*/
height:100px; /*Hauteur de l'entête*/
border:1px solid #000; /*Bordure de l'entete à 1px d'épaisseur*/
margin-bottom:10px; /*marge de 10px sous l'entete*/
}
div#contenu{
margin:0px 0px 0px 160px; /*Marge gauche de 160px pour le menu*/
width:580px; /*Largeur de 580px*/
padding:5px; /*Marge de 5px autour du texte*/
background:#d7cb11;
}
div#menu{
float:left; /*positionnement du menu à gauche*/
width:140px; /*Largeur de 140px*/
background:#1198d7;
padding:5px; /*Marge de 5px autour du texte*/
}
div#pied{
height:20px; /*Hauteur de 20px*/
background:#ff0000;
margin-top:10px; /*Marge de 10px en haut du pied*/
}
Tester le script: cliquer ici
Télécharger le script: 
Retour / HTML/CSS - Haut de page
Site créé par Arthezius © 2008-2012