Utilisation des pourcentages pour structurer une page

Jean Sympa · 15/12/2010, 11h49

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, 18h24

Bonjour,

Citation:

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, 19h36

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, 00h49

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, 08h24

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, 12h04

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.

15/12/2010, 19h36	#3
Jean Sympa Invité régulier Jean Sympa Inscription : novembre 2010 Messages : 29 Détails du profil Informations personnelles : Nom : Jean Sympa Informations forums : Inscription : novembre 2010 Messages : 29 Points : 7 Points : 7	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
	00

20/12/2010, 00h49	#4
e-fitz Membre habitué Inscription : mai 2009 Messages : 115 Détails du profil Informations forums : Inscription : mai 2009 Messages : 115 Points : 145 Points : 145	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
	00

20/12/2010, 08h24	#5
dukej Membre expérimenté Duke Jikel Inscription : mai 2010 Messages : 339 Détails du profil Informations personnelles : Nom : Duke Jikel Informations forums : Inscription : mai 2010 Messages : 339 Points : 546 Points : 546	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
	00

20/12/2010, 12h04	#6
e-fitz Membre habitué Inscription : mai 2009 Messages : 115 Détails du profil Informations forums : Inscription : mai 2009 Messages : 115 Points : 145 Points : 145	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email