Utilisation des pourcentages pour structurer une page
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:
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:
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
