DIV en 'fixed' qui se déplace lors d'un scroll

Version imprimable

10/06/2011, 17h46
PatSan

DIV en 'fixed' qui se déplace lors d'un scroll

J'ai un problème avec la position d'une DIV : elle est déclarée en position 'Fixed'.
A l'affichage de ma page, elle se place exactement où je veux.

Quand je scroll la page (en horizontale ou verticale), le div reste à sa place sur l'écran.
C'est un comportement normal sauf que je veux qu'elle reste à sa place initiale sur ma page !

Comment faire ? Je sais qu'en pur CSS, c'est galère, voire impossible...
Une solution javascript, compatible avec la plupart des navigateur existe-t-elle ?

J'ai déjà essayé avec une position 'relative' par rapport à un conteneur en position 'absolute' mais le positionnement en utilisant la récursivité sur offsetParent ne fonctionne pas très bien car j'ai pas mal d'imbrications de div et de tables...
10/06/2011, 19h34
Netek

Normalement tu peux faire ca sans JS avec l'attribut CSS position: absolute;
10/06/2011, 22h54
PatSan

position absolute ne résoud pas le problème : quand tu rétrécis ou agrandis la fenêtre, la div ne suit pas sa position initiale (relativement à un autre objet), elle reste fixe...
10/06/2011, 23h06
witeman

Pas sûr de bien comprendre ce que tu recherches, mais je tente :
En gros, ce que tu recherches, c'est que ton div garde toujours le même ratio d'espace dans ta page lorsque tu agrandis ou réduis celle ci, et tout en conservant son ancrage dans le visuel (position:fixed) ?

Si c'est ça, il faudra effectivement passer par du JS je crois, avec un appel des dimensions de la fenêtre et tout le touti...

Mais peut-être n'ai-je pas compris ta demande...
10/06/2011, 23h10
PatSan

Witeman, tu as exactement mis le doigt dessus : je cherche à ce que l'ancrage soit conservé par rapport à un autre élément et ce, quelque soit la manipulation de la fenêtre : agrandissement, rétrécissement, déplacement,...
10/06/2011, 23h23
witeman
"déplacement" ? je ne suis pas sûr de bien comprendre cette dernière manip ;)

Autrement, peut être que ce que tu recherches est tout simplement faisable avec des dimensions relatives (pourcentage) ?
As-tu essayé ?

Un truc du genre dans ton css :
Code:

1 2 3 4 5 body { width: 100%; height: 100% }
et
Code:

1 2 3 4 5 6 7 8 #ton_div { position: fixed; top: 100px; left: 100px; width: 30%; height: 40%; }
mais cela nécessite surement de revoir la structure de ta page...
10/06/2011, 23h56
PatSan

Désolé, le déplacement n'induisait pas de problème...
Ta solution ne fonctionne pas.
Si tu veux un exemple du problème, va sur le site www.enetplaza.com et click sur une combo box (celle de country par ex.). Agrandit et rétrécit la fenêtre par la suite, et tu verras le problème apparaître...

Ok ^^
C'est bon, je cerne beaucoup mieux le problème. Un exemple est tellement plus parlant ;)

Essayes simplement de mettre ton div avec des valeurs de ce genre :
Code:

1 2 3 4 5 6 7 #ton_div { position:absolute;  left:50%; margin-left:-200px; top: ?? px;<-- ici tu conserves ta valeur déjà affectée dans ton code, il ne changera pas et pareil pour tes dimensions--> }
Avec ce code, normalement : Tadaaam, magie ! Ton div restera fixé sous ta combo box qu'importe les agrandissements ou réductions de ta page !

Penses ceci dit à bien spécifier la valeur width:100% à ton body !
:ccool:

11/06/2011, 10h22
danielhagnoul

Bonjour

Le problème de positionnement est la conséquence du fait que le sous-menu reste ouvert lorsque le pointeur le quitte.

Bonjour,
il faut que la DIV qui contient ton pseudo SELECT contienne également la DIV qui contient la liste des pays.
exemple :

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#select {
  border : 1px solid black;
  width : 250px;
  margin : auto;
}
#liste {
  display : none;
  border : 1px solid black;
}
</style>
</head>
<body>
<div id="select" onclick="document.getElementById('liste').style.display='block';">
  Titre SELECT
  <div id="liste">
    <ul>
      <li>All</li>
      <li>Canada</li>
      <li>France</li>
    </ul>
  </div>
</div>
</body>
</html>

11/06/2011, 15h43
PatSan

Réponse à danielhagnoul :
-------------------------
Normal, ce n'est pas un menu ou sous-menu, c'est une combobox qui doit rester ouverte lorsque le pointeur la quitte...

Réponse à witeman :
--------------------
Cela ne fonctionne plus lorsque la taille de la fenêtre est inférieure à la taille de la colonne centrale du site --> la div se déplace à ce moment là.

Réponse à NoSmoking :
----------------------
Je vais voir ce que ça donne...
11/06/2011, 16h32
Bovino

Il suffit de repositionner l'élément sur l'événement onresize.
11/06/2011, 16h40
witeman

Il te suffit de préciser un margin-min adéquat et ce sera okay.
14/06/2011, 01h35
PatSan

NoSmoking : ta solution est toute simple et elle fonctionne. J'ai cherché à faire quelque chose de beaucoup trop compliqué.