Menu fixes et Conteneur Dynamique

**brazilia28** · 14/11/2006, 17h16

Bonjour à tous,

Je suis en train de relooké mon site, et je souhaiterais avoir deux barres verticales à droite et à gauche (qui me serviront de menus), et qui resteraient fixes. Mes deux menus sont des images JPG que j'importe via du code CSS (background-image)
Mon conteneur central où sera le contenu du site sera scrollable uniquement verticalement.
Donc pour résumer, j'aimerais toujours voir mes deux menus, même lorsque je descend l'ascenseur de ma page centrale qui contiendra les différentes informations de mon site.

Pouvez-m'aider à faire cela en CSS ?

Je vous remercie

**trotters213** · 14/11/2006, 17h27

position:fixed est ton ami

**brazilia28** · 14/11/2006, 17h35

J'ai essayé mais cela ne fonctionne pas.

Voici mon code CSS :

Code CSS :

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
 
body
{
margin: 0;
padding:0;
position: absolute;
width: 100%;
height: 100%;
}
 
#menu_gauche
{
   background-image: url("menu_gauche.jpg");
   background-repeat: no-repeat;
   position: fixed;
   top: 0;
   left: 0;
   width: 113px;
   height: 600px;
}
 
#menu_droite
{
   background-image: url("menu_droite.jpg");
   background-repeat: no-repeat;
   position: absolute;
   top: 0;
   right: 0;
   width: 113px;
   height: 600px;
}
 
#conteneur
{
   height: 600px;
   width: auto;
}
 
#frame
{
  overflow: auto;
  margin-left: 113px;
  margin-right: 113px;
  width: auto;
  height: auto;
  background-color: red;
}

Et mon code HTML :

Code HTML :

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
 
 
<html>
 
<head>
<title>Sans Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="conteneur">
<div id="menu_gauche"></div>
<div id="frame"><br/><br/><br/><br/></div>
<div id="menu_droite"></div>
</div>
</body>
</html>

Si vous voyez d'où vient le problème ???

Merci

**Bisûnûrs** · 14/11/2006, 18h38

Tu as testé avec IE c'est ça ?

Dans ce cas, as-tu regardé le lien proposé par trotters213 ?

M'est avis que non.

**trotters213** · 15/11/2006, 08h45

Envoyé par Bisûnûrs

Dans ce cas, as-tu regardé le lien proposé par trotters213 ?
M'est avis que non.

+1

**brazilia28** · 15/11/2006, 09h23

Bien sûr que j'ai regardé le lien que m'a donné trotters213, mais cela ne fonstionne toujours pas.
J'arrive bien à obtenir mes deux menus à droite et à gauche avec mon élément 'frame' au milieu, mais lorsque je fais défiler la page vers le bas, les menus défilent également. Et ça, je ne veux pas.

Je vous redonne le code CSS et le code HTML de ma page :

CSS

Code CSS :

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
 
body
{
margin: 0;
padding:0;
position: absolute;
width: 100%;
height: 100%;
}
 
#menu_gauche
{
   background-image: url("menu_gauche.jpg");
   background-repeat: no-repeat;
   position: absolute;
   top: 0;
   left: 0;
   width: 113px;
   height: 600px;
 
}
 
#menu_droite
{
   background-image: url("menu_droite.jpg");
   background-repeat: no-repeat;
   position: absolute;
   top: 0;
   right: 0;
   width: 113px;
   height: 600px;
}
 
#conteneur
{
overflow: auto;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: 100%;
}
 
#frame
{
  overflow: auto;
  margin-left: 113px;
  margin-right: 113px;
  width: auto;
  height: 1500px;
  background-color: red;
}

HTML

Code HTML :

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
 
<html>
 
<head>
<title>Sans Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" type="text/css" rel="stylesheet">
 
</head>
<body>
<div id="conteneur">
<div id="menu_gauche"></div>
<div id="frame"></div>
<div id="menu_droite"></div>
</div>
 
</body>
</html>

Merci

Menu fixes et Conteneur Dynamique

CSS

Vue hybride

Discussions similaires

Partager

Partager