Avis structure CSS

**FredPont** · 15/12/2009, 11h42

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.

**Fused** · 15/12/2009, 11h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**FredPont** · 16/12/2009, 12h13

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.

Avis structure CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager