[SRC] div pour imiter frame (header/menu FIXES + contenu scrollable)

Invité · 05/04/2009, 11h17

div pour imiter le comportement des frame avec :
HEADER FIXE - MENU FIXE - CONTENU qui défile (scroll auto)
ou :
"comment garder un bandeau et un menu FIXES à l'écran,
tout en pouvant scroller sur le contenu de la page ?"

L'un des intérêts (?) des frames était de pouvoir faire défiler le contenu des pages, tout en gardant un HEADER (bandeau) et/ou un MENU (sommaire) FIXES sur l'écran.

On peut imiter ce comportement avec les div.

Oubliez le reste du post, et allez directement ICI :
http://j-willette.developpez.com/tut...on-fixed/#LIII
le sujet y est traité !

L'astuce :
+ les div "HEADER" et "MENU" en position: fixed;
+ le div "CONTENU" en overflow: auto; position: absolute;
+ declarer le div HEADER APRES le div contenu
+ donner une couleur de fond au HEADER
(car le contenu, en defilant, va passer SOUS le HEADER !)

Important : la div "HEADER" est declaree APRES le "CONTENU" (dans le code de la page), car le contenu "glisse" sous cette div quand il défile.

Un exemple de site qui fonctionne sur ce principe : http://www.garagebrice.com
Ca ressemble à des frames, mais ce ne sont pas des frames !

Ex. :
- HEADER fixe en haut (largeur 100% - hauteur 125px)
- Menu fixe à gauche (largeur 180px - hauteur libre)
- Contenu des pages à droite du menu, sous le HEADER

Fichier CSS (FRAME-style.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
/* -------------------------------------- */
#HEADER {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 125px;
  background-color: #FFFFFF; /* couleur du fond */
}
#MENU {
   position: fixed;
   left: 0px;
   top: 125px;
   width: 180px;
   height: auto;
}
#CONTENU {
   overflow: auto;
   position: absolute;
   left: 180px;
   top: 125px;
   width: auto;
   height: auto;
}
/* -------------------------------------- */

Les pages : MAPAGE(.htm/.asp/.php, ...)

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
<html>
...
<link rel="stylesheet" type="text/css" href="FRAME-style.css" />
...
</body>
<div id="MENU">
   <!--  ... le menu, ou la page MENU(.htm/.asp/.php, ...) en include -->
</div>      
<div id="CONTENU">
   <!--  ... contenu de la page ... -->
</div>      
<div id="HEADER">
   <!--  ... le HEADER, ou la page HEADER(.htm/.asp/.php, ...) en include  -->
</div>
</body>
</html>

**le_chomeur** · 05/04/2009, 14h08

pas tout a fait daccord ... :-)

Les frames servent également a passer des paramètres , ou effectuer des action que l'on ne peut faire que par traitement serveur ...
donc il faut indiquer dans ton exemple que ceci n'est qu'une émulation et que si l'on veut envoyer des donnée dans ta pages on devra utiliser de l'ajax ;-)

Coordialement

Invité · 05/04/2009, 14h24

Envoyé par le_chomeur

pas tout a fait daccord ... :-)

Les frames servent également a passer des paramètres , ou effectuer des action que l'on ne peut faire que par traitement serveur ...
donc il faut indiquer dans ton exemple que ceci n'est qu'une émulation et que si l'on veut envoyer des donnée dans ta pages on devra utiliser de l'ajax ;-)

Coordialement

Merci d'avoir réagi.

D'accord avec toi :
Mon titre n'est pas tout à fait juste. J'aurais dû écrire :
div pour imiter le comportement des frame avec HEADER FIXE - MENU FIXE - CONTENU qui défile (scroll auto)
Mais c'était trop long dans le titre du post !! (je l'ai donc mis en sous-titre dans le post)

C'est là le seul point commun entre le comportement des frame et mon bout de code.

Et .... pas d'accord avec toi (!) :
on peut très facilement et "normalement" passer des paramètres d'une page à une autre sans avoir besoin d'Ajax ! (ni Ariel, ni canard WC ... )
Ca fonctionne comme toutes les autres pages !

**le_chomeur** · 05/04/2009, 14h31

ou tout simplement : "comment rendre une div scrollable" :-)
Fixer une largeur et/ou hauteur et forcer l'affichage des scroll par la propriété css overflow:scroll :p

Invité · 05/04/2009, 14h38

Envoyé par le_chomeur

ou tout simplement : "comment rendre une div scrollable"

NON, ce n'est pas ca, mais plutot le contraire :
"comment garder un bandeau et un menu FIXES, tout en pouvant scroller sur le contenu de la page"
(je le rajoute à mon post)

Je mets l'accent sur position: fixed; du bandeau (header) et du menu.

**le_chomeur** · 05/04/2009, 18h19

celle ci ne change rien ...

exemple :

Code :

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

1
2
3
4
 
<div id="header" style="width:100%;height:100px;">header</div>
<div id="menu" style="width:150px;">menu</div>
<div id="content" style="position:absolute;top:100px;left:150px;right:0px;bottom:0px;overflow:auto;">contenu</div>

remplit le content de texte ou autre ;-)

**Macmillenium** · 05/04/2009, 19h52

Bonjour jreaux62,

Envoyé par jreaux62

on peut très facilement et "normalement" passer des paramètres d'une page à une autre sans avoir besoin d'Ajax ! (ni Ariel, ni canard WC ... )
Ca fonctionne comme toutes les autres pages !

Sauf que Ajax nous évite de recharger l'intégralité de la page à chaque appel.

Envoyé par jreaux62

"comment garder un bandeau et un menu FIXES, tout en pouvant scroller sur le contenu de la page"
(je le rajoute à mon post)

Je mets l'accent sur position: fixed; du bandeau (header) et du menu.

Intéressant mais quelques précisions concernant le code :

- Inutile de préciser un width/height:auto sur un élément retiré du flux normal positionné en absolute, fixed, en float:left, right et en display:table étant donné que dans ces cas, le conteneur s'adapte à la taille de son contenu.

- Inutile de positionner #contenu en absolute => indiqué un margin-top = hauteur du header et un margin-left = largeur du menu suffit largement, il est toutefois recommandé de garder le maximum d'éléments dans le flux normal.

- Garder les éléments dans l'ordre logique, c'est à dire, header - menu - contenu afin d'éviter les risques d'inaccessibilité visuel, notamment : Petits écrans, lecteurs d'écran, navigateurs textuels.

- Je pense que tu as oublié, jreaux62, de proposer un correctif pour IE6- qui ne supporte pas le positionnement fixed, un correctif basé par les expressions CSS.

En conclusion :

Code xhtml :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Document sans nom</title>
 
		<style type="text/css">
                        html, body {
                                padding:0;
                                margin:0;
                        }
                
                        #header {
                           position: fixed;
                           left: 0px;
                           top: 0px;
                           width: 100%;
                           height: 125px;
                           background-color: red; /* couleur du fond */
                        }
                        #menu {
                           position: fixed;
                           left: 0px;
                           top: 125px;
                           width: 180px;
                           /* height: auto; */
                           background:green;
                        }
                        #contenu {
                           /* overflow: auto; */
                           /* position: absolute; */
                           margin:125px 0 0 180px;
                           /* left: 180px; */
                           /* top: 125px; */
                           /* width: auto; */
                           /* height: auto; */
                        }
 
                </style>
		<!--[if lte IE 6]>	
			<style type="text/css">
			#header {
				position : absolute;
				top : expression( ignore1 = document.documentElement.scrollTop + "px" );
			}
			#menu  {
				position : absolute;
				top : expression( ignore2 = document.documentElement.scrollTop + "px");
				margin-top:125px;
			}	
			</style>
		<![endif]-->
</head>
 
<body>
 
<div id="header">
  bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
<div id="menu">
  bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
<div id="contenu">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>      
 
</body>
 
</html>

Pour infos, Bisûnûrs nous propose également un tuto complet sur le position:fixed

Invité · 05/04/2009, 21h01

Merci a vous 2 pour ces remarques est precisions.
Je me suis laissé emporté par l'enthousiasme, et j'ai sans doute négligé certaines vérifications.
(pour IE6 entre autre ... depuis que j'ai, betement telechargé IE8 ...

)
Je vais revoir ma copie, grace a votre contribution !

Envoyé par Macmillenium

Bisûnûrs nous propose également un tuto complet sur le position:fixed

En effet !! : http://j-willette.developpez.com/tut...osition-fixed/
le sujet y est traité !
(je ne l'avais pas vu !)

"Si j'oré su, j'oré pô v'nu !"

**le_chomeur** · 05/04/2009, 21h27

Aucun soucis , nous somme la pour ça ;-)

**Macmillenium** · 05/04/2009, 22h57

Un petit détail au passage

Envoyé par jreaux62

Important : la div "HEADER" est declaree APRES le "CONTENU" (dans le code de la page), car le contenu "glisse" sous cette div quand il défile.

Tu peux aussi avoir le même comportement (si tu tiens à positionner #contenu en absolute) en mettant les éléments dans l'ordre (header, menu, contenu) => il suffit donner un z-index supérieur à #header

Invité · 06/04/2009, 00h28

Envoyé par Macmillenium

Un petit détail au passage
Tu peux aussi avoir le même comportement (si tu tiens à positionner #contenu en absolute) en mettant les éléments dans l'ordre (header, menu, contenu) => il suffit donner un z-index supérieur à #header

Merci. J'ai encore beaucoup à apprendre sur les CSS !!

[SRC] div pour imiter frame (header/menu FIXES + contenu scrollable)

Contribuez

Discussions similaires

Partager

Partager