Accueil > Manip’s > CSS > 7- CSS : Div de Div & la Division Horizontale d’une partition (...)

7- CSS : Div de Div & la Division Horizontale d’une partition Verticale

dimanche 1er janvier 2006, par bluegyn_spip

Une introduction bien pompeuse

pour un concept fort simple

Nous reprenons la page de la leçon précédente

CONTENEUR_1

CONTENEUR_2 + CONTENEUR_3 + CONTENEUR_4

CONTENEUR_5

VOIR EXEMPLE

Et nous voulons obtenir ça :

CONTENEUR_1

CONTENEUR_2 + CONTENEUR_3 + CONTENEUR_4

CONTENEUR_2a
CONTENEUR_2b

CONTENEUR_5

VOIR EXEMPLE

En clair, on y voit que le bandeau gauche dit des "Menus", est SOUS-DIVISE en 2 nouvelles zones superposées

Style_div_3.css

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:20%;

  height:75%;

  background-color:green;

  }



div#menu-haut {

  /* Présentation */

  width:100%;

  height:45%;

  background-color:silver;

  }

div#menu-bas {

  /* Présentation */

  width:100%;

  height:45%;

  background-color:gold;

  }



div#note {

  /* Présentation */

  float:right;  

  width:20%;

  height:75%;

  background-color:yellow;

  }

  

div#pied {

  /* Présentation */

  width:100%;

  height:10%;

  background-color:red;

  /* Contenu */

  text-align:center;  



  }

DIV_3.HTML

Il suffit d’imbriquer les Balises DIV, l’empilement vertical implicite des conteneurs ne nécessite ici, aucune directive FLOAT particulière.

MENU

menu-haut
menu-bas

/MENU

APPLICATION

<html>



<head>

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

</head>



<body>



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



<div id="menu">Menu

  <div id="menu-haut">Haut</div>

  <div id="menu-bas">Bas</div>

</div>



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

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

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



</body>



</html>

***( :-

Quel suspens ?

7- CSS : Div de Div & la Division Horizontale d’une partition Verticale

Style_div_3.css

DIV_3.HTML

APPLICATION

Manip’s

Dans la même rubrique