Discussion :

[PatSan]

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

[Netek]

Normalement tu peux faire ca sans JS avec l'attribut CSS position: absolute;

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

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

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#ton_div
{
position: fixed;
top: 100px;
left: 100px;
width: 30%;<!-- valeurs au pif, à toi de voir-->
height: 40%;<!-- valeurs au pif, à toi de voir-->
}

mais cela nécessite surement de revoir la structure de ta page...

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

[witeman]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#ton_div
{
position:absolute; <!--dans ton cas ce n'est pas du fixed qu'il te faut car ton div doit rester accrocher a ta page qui elle même peut être scrollée-->
left:50%;<!--avec ça tu fais de ton div un élément centré comme ta colonne centrale contenant ton site-->
margin-left:-200px;<!--cette valeur est à chercher par toi même de manière à ce que le div s'ajuste parfaitement avec ta combo box-->
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 !

[danielhagnoul]

Bonjour

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

[NoSmoking]

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

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

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

[Bovino]

Il suffit de repositionner l'élément sur l'événement onresize.

[witeman]

Il te suffit de préciser un margin-min adéquat et ce sera okay.

[PatSan]

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