div en position fixed

**dream_of_australia** · 09/07/2007, 14h04

Coucou tout le monde,

J'ai un petit souci avec un div que je voudrais voir en position fixed, c'est-à-dire qui apparaisse tout le temps au même endroit dans la page (c'est un menu). Mais il ne veut pas

. Sous Firefox il est tout en-dessous du reste du reste du contenu, et sous IE il est tout en haut.

Voilà le code de ma page :

Code :

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

1
2
3
<body>
  <div id="divmenu">Element1<br />Element2...</div>
  <div id="divpage">...Contenu...</div>

</body>[/CODE]

Mon code css :

Code :

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
body {
	margin:0; 
	padding:0;
	background-color:#0780d5;
	text-align:center
}
 
#divpage {
	position:relative;
	background-image:url(images/fondproduits2.jpg);
	background-repeat:repeat-y;
	margin-top:0;
	margin-right:auto;
	margin-bottom:0; 
	margin-left:auto; 
	padding:0;
	width:1024px; 
	text-align:left
}
 
#divmenu {
	color:#CCFFFF;
	top:40%;
	right:auto;
	bottom:auto;
	left:10%;
	padding:10px;
	border-style:outset;
	border-width:thin;
	border-color:#0066CC;
	width:120px;
	position:fixed;
	margin:0
}

Quelqu'un saurait-il pourquoi ?
Il y a plein de choses dans la divpage, ça pourrait être à cause des éléments enfants ou il y a déjà une erreur dans le code que j'ai montré ?

**BnA** · 09/07/2007, 14h13

Je sais pas si j'ai bien compris ton problème...

Ton div MENU, il est en haut de la page ou bien il se superpose avec l'autre div??

S'il se superpose, rajoute un:

Code :

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

1
2
 
z-index:5;

à #menu.

**E.Bzz** · 09/07/2007, 14h17

Bonjour,
si ce n'est pas à cause du z-index, c'est peut-être parce que tu définis sa position en % :

Code :

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

top:40%;

Pour un "vrai fixed" (pour qu'il apparaisse toujours au même endroit à l'écran qqsoit la taille de la page) il faut le définir en dur (en "px") ...

... et position:fixed n'est pas interprété par IE

A+

**dream_of_australia** · 09/07/2007, 14h25

@BnA : les deux divs sont supposés être superposés, le div menu étant au-dessus. Je vais essayer ce que tu m'as proposé. J'avais pas pensé aux z-index...

@E.Bzz : est-ce qu'il y a un moyen de simuler une position fixed sous IE s'il ne les prend pas en compte ?

**dream_of_australia** · 09/07/2007, 14h27

En tout cas avec le z-index ça fonctionne sous FF ! Merci !
Par contre sous IE...

**dream_of_australia** · 09/07/2007, 14h33

La solution (trouvée sur Internet) :

Code :

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
#divmenu {
	position:fixed;
	_position:absolute;
	top:300px;
	_top:expression(eval(document.body.scrollTop+300));
	right:auto;
	bottom:auto;
	left:100px;
	padding:10px;
	border-style:outset;
	border-width:thin;
	border-color:#0066CC;
	width:120px;
	color:#CCFFFF;
	z-index:5;
	margin:0
}

qui marche sous IE et FF !! Merci en tout cas pour votre aide !

div en position fixed

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager