Utilisation des pourcentages pour structurer une page

**Jean Sympa** · 15/12/2010, 12h49

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

**polymorphisme** · 15/12/2010, 19h24

Bonjour,

Utiliser des valeurs absolues pour structurer la page est-ce une bonne idée? Faut-il utiliser partiellement des valeurs absolues?

En fait, le choix des unités dépends du type de mise en page que tu souhaite mettre en place : fixe, fluide, ...

**Jean Sympa** · 15/12/2010, 20h36

Merci polymorphisme

Je n'ai pas suffisamment d'expérience pour choisir entre: fixe fluide,... Ces notions me sont encore étrangères. Pour l'instant, j'essaie de comprendre l'intérêt des pourcentages.
Ma question reste posée. Quelle(s) correction(s) peuvent-elles me permettre d'afficher correctement
ma page?

Cordialement
Papy

**e-fitz** · 20/12/2010, 01h49

Bonsoir,

concernant absolute, relatif et % px, dans un premier temps je te conseillerais de faire ton design en relatif % (% car tu tests les %).

Tout simplement car le relatif reste dans le flux et à mes yeux tu apprendras plus de chose.

Pour les corrections le Top 20% me gène c'est plutot : top:20%;

Bonne soirée

**dukej** · 20/12/2010, 09h24

Largeurs en poucentage : OUI
hauteurs en poucentage : NON
pour les hauteurs utilises des px ou em (fonction du font-size)
et privilégie plutôt le min-height que le height qui te fige la hauteur de tes boites et te réservera trop de surprises

**e-fitz** · 20/12/2010, 13h04

Bonjour,

tout à fait d'accord avec dukej pour le % des height.
Par contre attention au problème de compatibilité avec le min-height, même si il existe des hack css c'est pas toujours bien d'utiliser ces méthodes.

Utilisation des pourcentages pour structurer une page

CSS

Discussions similaires

Partager

Partager