BlueGEEK Journal

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 bluegyn_spip

  1. Déclaration d’une feuille de style externe
  1. => Le conteneur DIV et le partitionnement horizontal
  1. Le conteneur DIV et le partitionnement vertical
  1. 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

  1. L’Entete de page
  1. Le Corps de Page
  1. Le Pied de page

- Soit en langage CSS

div#entete

div#corps

div#pied

- Nous allons définir pour chaque Conteneur

  1. Une dimension (largeur , hauteur)
  1. 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

  1. Lier la page à sa feuille de style (cf. leçon précédente)
  1. Placer correctement les conteneurs sur la page, en les appelant par les noms (ou Identités ou INDEX =
    1. Le conteneur DIV d’entête s’appelle "entete"
    1. Le conteneur DIV de corps de page s’appelle "corps"
    1. 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>


- Voir l’exemple numéro 1


TELECHARGER / DOWNLOAD

DIV_1.CSS
Feuille de style Numéro 1
DIV_1.HTML
Page WEB numéro 1

[1P Comme Paragraphe

[2Action Horizontale de gauche à droite

[3DIV a une action verticale de Haut en Bas

[4Nous 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é)