Avis structure CSS

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:

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:

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:

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.

A vue d'oeil, c'est une bonne structure.

Par expérience, je te conseille d'ajouter un div global autour de tout ton contenu pour placer facilement ton contenu dans l'écran.
Code:

1 2 3 4 5 6 7 8 9 <div id="global"> <div id="entete"> ....... <div id="pied"> .... </div> </div>
Avec style par exemple :
Code:

1 2 3 4 5 6 7 8 #global { min-height: 95%; width: 780px; margin: 0 auto; position: relative; background: url(images/fond.png) repeat-y; }
Ca te simplifie le placement. Et si tu en fais un modèle général, tu peux spécifier une taille fixe pour tout le site.

Sache aussi que c'est toujours un pari un peu risqué de vouloir s'adapter à la taille de l'écran de l'utilisateur, il vaut mieux partir sur uniquement des dimensions fixes.

Merci d'avoir répondu.

Comme il s'agit d'un modèle pour des applications intranet l'environnement est connue (navigateur et résolution identique) je ne devrait donc pas avoir trop de souci.

Par contre pour un site web je suis d'accord il vaut mieux des tailles fixe.