div qui suit le scroll sans depasser hauteur div

Version imprimable

18/02/2011, 12h32
ju0123456789

div qui suit le scroll sans depasser hauteur div
Bonjour,

J'ai un menu, à gauche, qui est dans un TD assez haut, muni de rowspan.
J'aimerais que mon menu rewte toujours en milieu de page, jusque là, pas de problemes.
Mais quand je remonte tout en haut de page le menu me suit toujours, et se place parmi tous les elements du haut du menu.
Je voudrais que le div se déplace donc en fonction de mon scrolling, mais s'arrete en haut du TD dans lequel il s'est placé.

J'ai fait ceci en feuille de style :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <style type="text/css"> .Test { position: fixed; top: 50%; width: 150px; height: 200px; margin-top: -100px; border: 1px solid #333; background-color: #eee; } </style>
mon TD ce présente comme ceci :
Code:

1 2 3 4 5 <td rowspan='".$NbLignes."' width='150'> <div class='Global'> <div class='Test'>MENU</div> </div> </td>
Merci beaucoup
19/02/2011, 14h54
NoSmoking

Bonjour,
pas sûr qu'en pur CSS cela soit jouable, il te faudra une pincé de javascript pour tester lors du scroll de la page, la position du menu et de la retoucher le cas échéant.
21/02/2011, 09h53
ju0123456789

Bah effectivement en CSS ça ne amrche pas, ça dépasse du TD quand meme. Tu sais comment je pourrais faire ça en JS ?

en pur CSS il y aurait un truc du style

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>[...]</title>
<style type="text/css">
html, body {
  margin : 0;
  paddding : 0;
  height : 1000px;
}
#central {
  margin-left : 150px;
  margin-right : 150px;
  height : 100%;
  border : 1px solid #e0e0e0;
  background-color : #f0f0f0;
  min-width : 600px;
}
#menu {
  position : fixed;
  left : 0px;
  top : 50%;
  bottom : 50%;
  margin-top : -75px;
  height : 150px;
  width : 150px;
  border : 1px solid #8080fe;
  background-color : #e0e0ff;
}
</style>
</head>
<body>
<div id="central"></div>
<div id="menu"></div>
</body>
</html>

mais je ne sais si cela répond réellement à ton besoin.

Nota : la table pour faire de la mise en page c'est dommage.

22/02/2011, 09h38
ju0123456789

Bonjour et merci de ta réponse.
Non ce n'est pas ça.
Car selon la taille de l'écran, le positionnement du DIV change. et sur certains ecrans le div, en haut de page, est beaucoup trop haut et dépasse donc le fameux <TD>. (ça empiète sur le reste de la page :/)
Effectivement je pense qu'il faut une petit touche de JS.
J'ai essayé en relevant les coordonnées haut/gauche du div, pour ne pas qu'elles dépassent celles du <TD>. Mais ça marche pas je galère lol
23/02/2011, 09h15
NoSmoking

Citation:

J'ai essayé en relevant les coordonnées haut/gauche du div, pour ne pas qu'elles dépassent celles du <TD>. Mais ça marche pas je galère lol

il nous faudrait un bout de code avec la structure HTML pour voir ou cela coince, ou mieux une page ne ligne