Accueil > Manip’s > CSS > 5- CSS : Le conteneur DIV et la division Horizontale d’une page
HTML, CSS, Pratique, Style
5- CSS : Le conteneur DIV et la division Horizontale d’une page
DIV, ID
dimanche 1er janvier 2006, par
- => Le conteneur DIV et le partitionnement horizontal
- Le conteneur de conteneur, introduction à la hiérarchie des objets
Pour effectuer cette leçon vous devez créer 2 fichiers
Une page WEB (HTML ou PHP)
div_1.html
Une feuille de style (CSS)
style_div_1.css
CRÉATION DE LA FEUILLE DE STYLE
DIV est un conteneur HTML à tout faire
Div comme divers mais surtout DIV comme DIVISEUR,
La balise DIV permet de diviser une page en plusieurs sections
Elle est donc assimilable à une marque de paragraphe,
- Tout à fait comparable à la Balise
P
[1]
- Elle s’oppose à la balise
SPAN
qui est plus un MARQUEUR DE LIGNE [2], et de ce fait qui la complète [3].
Mise en Oeuvre
La marque de paragraphe étant le Dièse (#) , nous allons définir dans notre page WEB 3 diviseurs de page, c’est à dire 3 paragraphes ou Sections
- L’Entete de page
- Le Corps de Page
- Le Pied de page
Soit en langage CSS
div#entete
div#corps
div#pied
Nous allons définir pour chaque Conteneur
- Une dimension (largeur , hauteur)
- Et une couleur de fond
La liste des paramètres CSS d’un conteneur doit être placé entre les 2 accolades
conteneur { }
SYNTAXE
Attention CSS est un langage qui manque sérieusement de fantaisie
- Le point virgule ( ;) est un séparateur d’argument et ne doit être placé nulle part ailleurs
conteneur {
largeur;
hauteur;
couleur;
}
- La seule marque de commentaire est celle du C d’après guerre,
/* Commentaire CSS */
EN PRATIQUE
Largeur se dit width
Hauteur se dit height
Couleur se dit background-color
Et devinez comment se dit Bleu, blanc, Rouge ???
L’opérateur d’affection est le Double Point ( : semi-colon) et non le signe égal (=)
/* ENTETE DE PAGE */
div#entete {
width : 100%;
height : 10%
background-color : blue;
}
/* CORPS DE PAGE */
div#corps {
width : 100%;
height : 80%
background-color : white;
}
/* PIED DE PAGE */
div#pied {
width : 100%;
height : 10%
background-color : red;
}
[4]
CRÉATION DE LA PAGE WEB
Le principe de création de la page WEB obéit à 2 règles simples
- Lier la page à sa feuille de style (cf. leçon précédente)
- Placer correctement les conteneurs sur la page, en les appelant par les noms (ou Identités ou INDEX =
- Le conteneur DIV d’entête s’appelle "entete"
- Le conteneur DIV de corps de page s’appelle "corps"
- Le conteneur DIV de pied de page s’appelle "pied"
Créer un conteneur DIV sur la page WEB et lui affecter les propriétés de l’une ou de l’autre section se fait de cette manière
<div id="entete">
CONTENU DE L'ENTÊTE
</div>En clair le lien se fait par l’argument de balise ID=
Soit ma première page WEB complète et ses 3 sections Bleue, Blanche et Rouge :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_div_1.css">
</head>
<body>
<div id="entete">ENTETE</div>
<div id="corps">CONTENU</div>
<div id="pied">PIED</div>
</body>
</html>
TELECHARGER / DOWNLOAD
[1] P Comme Paragraphe
[2] Action Horizontale de gauche à droite
[3] DIV a une action verticale de Haut en Bas
[4] Nous utilisons la notation en Pourcent %, 100%, 10% qui permet d’occuper Toute, ou 1 dixième seulement de l’espace disponible, cette notation permet d’avoir toujours un affichage cohérent quelle que soit la dimension de l’écran, mais on peut aussi utiliser une notation absolue en Pixels, soit 600px ou 50px (pas d’espace entre le Nombre et l’unité)