Bonjour,

Je souhaite créer une mise en page standard pour mes applications respectant les contraintes suivantes :

- Entête fixe et toujours visible contenant le nom de l'application
- Pied fixe et toujours visible, divisé en trois partie :
- A gauche le nom de l'application.
- Au centre le nom du développeur.
- A droite lien + logo Zend Framework.
- Contenu de l'application entre les deux.

Dans la partie contenu (dimension en pourcentage pour s'adapter à la taille de la fenêtre) :
- A gauche le menu environ 20% de la largeur disponible.
- A droite bloc environ 80% de largeur avec défilement verticale si le contenu est trop long.


Voilà ce que j'ai fait :
Le code HTML :
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<title>Nom Application</title>
		<link href="layout.css" media="screen" rel="stylesheet" type="text/css">  
		<link href="global.css" media="screen" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="entete">
			<b>Nom Application</b>
		</div>
		<div id="contenu">
			<div id="navigation">
				<ul>
				<li>Menu 1</li>
					<ul>
					<li>Sous-Menu 1.1</li>
					<li>Sous-Menu 1.2</li>
					</ul>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
				</ul>
			</div>
			<div id="page">
				Page
			</div>
		</div>
		<div id="pied">
			<div id="pied-gauche"><span>Nom Application</span></div>
			<div id="pied-droite">
				<a href="http://framework.zend.com/"><img src="PoweredBy_ZF_4LightBG.png"></a> 
				<span id="creditsZend">1.9.6</span>
			</div>
			<span>Developpeur</span>
		</div>
	</body>
</html>
Le code CSS :

layout.css :
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/* Positionement des cadres */
 
/* Entête */
#entete {
	padding: 0;
	top:0;
	right:0;
	left:0;	
	position: fixed;
	background-color: #AAAAAA;
	text-align: center;
	height: 1.5em;
}
/* Contenu */
#contenu {
	padding: 0;
	margin: 0;
	top: 1.8em;
	bottom: 2em;
	left: 0.3em;
	right: 0.3em;
	background-color: #FFFFFF;
	position: fixed;
 
}
#pied img {
	margin: 0;
	padding: 0;
	border:0;
	vertical-align:middle;
}
/* Pied de page */
#pied {
	padding: 0;
	margin:0;
	bottom:0;
	right:0;
	left:0;
	height: 1.6em;
	border-top: thin solid #BBBBBB;
	position: fixed;
	background-color: #DDDDDD;
	color: #999999;
	text-align: center;
	font-size: 16px;
	font-family: Georgia,"Times New Roman",Times,serif;
 
}
#pied-droite {
	float: right;
	padding-right: 0.5em;
}
 
#pied-gauche {
	float: left;
	padding-left: 0.5em;
}
#creditsZend {
	color: #57A900;
	font-weight:bold;
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
}
global.css :
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
body
{
    font-family: Arial;
}
 
#navigation {
	padding: 0;
	margin: 0;
	background-color: #DDDDDD;
	height: 100%;
	width: 20%;
	position: relative;
	float: left;
}
 
#page {
	padding: 0;
	margin-left: 20.3%;
	background-color: #EEEEEE;
	height: 100%;
	width: 79.7%;
	position: relative;
	overflow: auto;
}
Le rendu correspond à ce que je souhaite sur Firefox 3, Firefox 3.5 et IE8.

J'aurai voulu avoir votre avis, savoir si je n'ai pas fait d'erreurs ?

Merci.