Accueil > Manip’s > CSS > 6- CSS : Le conteneur DIV et la division Verticale d’une page

CSS, DIV

6- CSS : Le conteneur DIV et la division Verticale d’une page

FLOAT

dimanche 1er janvier 2006, par bluegyn_spip

Déclaration d’une feuille de style externe
Le conteneur DIV et le partitionnement horizontal
=> Le conteneur DIV et le partitionnement vertical
Le conteneur de conteneur, introduction à la hiérarchie des objets

Le flux d’écriture (STREAM) remplissant une page WEB avec des conteneurs DIV à une tendance naturelle à utiliser un partitionnement horizontal, avec séparation par des Saut de ligne,

CONTENEUR_1

CONTENEUR_2

CONTENEUR_3

CONTENEUR_4

CONTENEUR_5

Chaque nouveau conteneur étant placé implicitement par le flux, en dessous du précédent.

VOIR EXEMPLE

Il n’est donc pas possible de placer de cette manière, 2 conteneurs sur la même ligne,

Il faut utiliser un artifice CSS, permettant d’extraire le conteneur DIV du flux de haut en bas, et de forcer son positionnement au même niveau que son prédécesseur.

C’est le but de cette leçon :

CONTENEUR_1

CONTENEUR_2 + CONTENEUR_3 + CONTENEUR_4

CONTENEUR_5

Son intérêt pratique est de créer une bande latérale à gauche ou à droite de l’écran (ou les 2) permettant d’y placer un menu ou une annotation (ou les 2)

VOIR EXEMPLE

LE CODE EXPLIQUE

Comme vu dans la leçon précédente nous allons déclarer une feuille de style

style_div_2.css

En lui indexant par le truchement de l’opérateur # autant de zones que de divisions de l’écran dans notre projet.

Notre projet comporte 5 Zones de Divisions (soit 5 DIV#Indexés)

L’entête (en haut)

Le Pied (en bas)

Le Contenu (au centre)

Le Menu (à gauche)

Les annotations (à droite)

Entête, Contenu et Pied restent dans le Positionnement Horizontal, leur code ne subit donc aucune modification

Pour forcer le positionnement du MENU à la Gauche du flux j’utilise la directive

div#menu {

float : left ;

}

Qui pourrait être traduit par "Flanquer à gauche"

Pour forcer le positionnement des NOTES à la Droite du flux j’utilise la directive

div#note {

float : right ;

}

Qui pourrait être traduit par "Flanquer à droite"

ENTETE

MENU + CONTENU + NOTE

PIED

Voila le code CSS complet

div#entete {

  /* Présentation */

  width:100%;

  height:15%;

  background-color:blue;

  /* Contenu */

  text-align:center;  

  }



div#contenu {

  /* Présentation */

  width:100%;

  height:75%;

  background-color:aqua;

  }



div#menu {

  /* Présentation */

  float:left;  

  width:10%;

  height:75%;

  background-color:green;

  }



div#note {

  /* Présentation */

  float:right;  

  width:10%;

  height:75%;

  background-color:yellow;

  }

  

div#pied {

  /* Présentation */

  width:100%;

  height:10%;

  background-color:red;

  /* Contenu */

  text-align:center;  

  }

Il nous suffit maintenant de Créer une page HTML

div_2.html

De la lier avec la feuille de style précédente par la balise LINK

<link rel="stylesheet" type="text/css" href="style_div_2.css">

Puis d’appeler l’un après l’autre, et dans l’ordre chacun des conteneurs DIV

<html>



<head>

<link rel="stylesheet" type="text/css" href="style_div_2.css">

</head>



<body>



<div id="entete">ENTETE</div>

<div id="menu">GAUCHE</div>

<div id="note">DROITE</div>

<div id="contenu">CONTENU</div>

<div id="pied">PIED</div>



</body>



</html>

Un autre exemple sur le site (DIV = float : left)

6- CSS : Le conteneur DIV et la division Verticale d’une page

C’est le but de cette leçon :

LE CODE EXPLIQUE

Manip’s

Dans la même rubrique