Menu toujours visible

Version imprimable

bonjour

j'ai une structure en 3 parties
haut - gauche - droite (3 div)
dans gauche, j'ai 2 autre div que je voudrais "scrolable"

le 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
 
#gauche {
position:relative;
float:left;
background-color:#9fc90f;
width:209px;
min-height:578px;
}
#menu_gauche {
background-image:url(../images/cadre_gauche.jpg);
background-repeat:no-repeat;
margin-left:10px;
margin-right:10px;
width:189px;
height:253px;
}
#txt_scroll {
background-image:url(../images/cadre_gauche.jpg);
background-repeat:no-repeat;
margin-top:20px;
margin-left:10px;
margin-right:10px;
width:189px;
height:253px;
}

le html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
	<div id="centre">
          <div id="gauche">
                <div id="menu_gauche">
                <ul>
                <li><img src="images/fleche.jpg">&nbsp;<a href="le_salon.htm">LE SALON</a></li>
                <li><img src="images/fleche.jpg">&nbsp;<a href="exposer.htm">EXPOSER</a></li>
                <li><img src="images/fleche.jpg">&nbsp;<a href="visiter.htm">VISITER</a></li>
                <li><img src="images/fleche.jpg">&nbsp;<a href="animation.htm">ANIMATION</a></li>
                <li><img src="images/fleche.jpg">&nbsp;<a href="photos_et_videos.htm">PHOTOS ET VIDEOS</a></li>
                <li><img src="images/fleche.jpg">&nbsp;<a href="partenaires.htm">PARTENAIRES</a></li>
                <li><img src="images/fleche.jpg">&nbsp;<a href="questions_et_commentaires.htm">QUESTIONS ET <BR>COMMENTAIRES</a></li>
                </ul>
                </div>
                <div id="txt_scroll"></div>
          </div>
          <div id="droite">&nbsp;</div>
	</div>

tous les script que j'ai trouvé et essayé ne prennenet pas en compte le fait que ce que je veux "scroller" est dans une div à l'intérieur d'autre div

Merci de votre aide

Rien à voir avec javascript, c'est du css... Il faut utiliser la règle overflow (dans ton cas scroll ou auto) :
Code:

1 2 3 4 5 6 7 8 9 10 #txt_scroll { background-image:url(../images/cadre_gauche.jpg); background-repeat:no-repeat; margin-top:20px; margin-left:10px; margin-right:10px; width:189px; height:253px; overflow:auto; }

21/10/2008, 06h47
nicerico

je veux que tout le bloc concerné descende si on scoll avec la souris
comme le font certains menus qui s'affiche dans le coin haut gauche de la page et qui descendent si on scroll la page

Comme le dit Beef c'est que du css
inspire toi de ça :

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
<html>
<head>
<title>Mon bouton mouvant</title>
<style type="text/css">
body{overflow:hidden;margin:0px;}
#fixed 	{position:absolute;
			 top:0px;
			 left:0px;
			 width:100px;
			 height:200px;
			 border : solid 1px red;
			 text-align:center;
			 z-index:2;
			 ;}
</style>
</head>
 
<body onselectstart="return false;">
 
<div id="fixed">
ici ton menu
</div>
 
<div id="cont" style="width:100%; height:100%; overflow:auto;">
 
<div style="height:1200px;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mon beau Site</h1>
<p>Amusez vous à défiler la page.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mon beau Site</h1>
<p>Amusez vous à défiler la page.</p>
 
</div>
 
</div>
 
</body>
</html>

21/10/2008, 09h33
nicerico

Merci

ça m'a permis de resoudre (en bidouillant) mon probleme