[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>

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

Contribuez

Mode arborescent

Discussions similaires

Partager

Partager