Bonjour à tous et à toutes

Utilisation des pourcentages pour structurer une page

Tous les logiciels que j'ai pu lire utilisent les pixels pour structurer une page; or, on conseille
souvent d'utiliser les valeurs relatives % et em. J'essaye donc, sans y parvenir, de remplacer les pixels par des pourcentages pour définir la structure d'une page.

http://www.cijoint.fr/cjlink.php?fil...cijyEWHTDE.png

L'image (Objectif(figure-hauteurs en pixels))est celle que l'on obtient avant de remplacer les pixels par des pourcentages et, que je souhaite afficher en utilisant des pourcentages.
La situation actuelle demande à être corrigée, je n'y arrive pas

Je suis parti de l'idée suivante :
Hauteur (bandeau/20%) +( Hauteur (menu/70%) ou Hauteur (contenu/70%)) +Hauteur (pied de page/10%) = 100%


Source
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Styles_Dev_11111.css">
</head>
<body>
<div id="bandeau">
<h1>Apprendre à creer son Site Web avec KompoZer<br>
</h1>
<br>
</div>
<div id="menu">
<div id="menu_haut">Menu haut</div>
<div id="menu_bas">Menu bas</div>
</div>
<div id="contenu">Contenu</div>
<div id="piedpage">Pied_page</div>
<br>
<br>
</body>
</html>
Feuille de styles
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
div {
  text-align: center;
}
div#bandeau {
  position: absolute;
  top: 0;
  left : 0;
  width: 100%;
  height: 20%;
  background-color: #00ccff;
}
div#menu {
  position: absolute;
  Top 20%
  width: 30%;
  height: 70%;
  background-color: #ff6699;
}
div#menu_haut {
  width: 30%;
  height: 35%px;
  background-color: #66cc33;
}
div#menu_bas {
  width: 30%;
  height: 35%px;
  background-color: #cc99cc;
}
div#contenu {
  position: absolute;
  top: 20%;
   width: 70%;
  height: 70%;
  background-color: #ffcc00;
}
div#piedpage {
  position: absolute;
  top : 90%;
  width: 100%;
  height: 10%;
  background-color: #33ff99;
}
h1 {
  color: red;
}
Questions
Utiliser des valeurs absolues pour structurer la page est-ce une bonne idée?
Faut-il utiliser partiellement des valeurs absolues?

Quelles corrections faut-il apporter à la feuille de styles? au source?

Avec mes remerciements
Cordialement
Papy