"position : fixed" sous IE [Résolu]

pseudodejautilis · 28/01/2011, 16h16

Bonjour,
je débute en CSS et j'ai un problème sous IE avec la mise en page car j'utilise des <div> et je veux que l'entête reste fixe, d'où l'utilisation de "position:fixed" : ça marche bien sur Firefox mais l'entête scroll avec le reste sur IE. Il semblerait que les versions antérieures à IE7 ne gèrent pas cette propriété mais ça ne marche pas même sur IE8 ! Peut-être qu'IE passe en mode Quirks mais j'ai essayé différents docType sans plus de réussite et j'ai fait valider mon code par le W3C...
Pour info, l'entête n'apparait même pas si je déclare un docType HTML4.1 Strict ou XHTML 1.0 Transitional ni si j'ajoute "http://www.w3.org/TR/html4/loose.dtd" au docType que j'utilise (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">).
En attendant, j'utilise la rustine de Iubito et Bisûnûrs (cf. "Comment simuler le style CSS "position : fixed" sous Internet Explorer ?" de la FAQ). Merci à eux, mais c'est ça devrait fonctionner sans ça sous IE7 et suivants, et j'avoue ne plus rien y comprendre, d'où ce post. J'espère que vous y verrez plus clair que moi !

NoSmoking · 28/01/2011, 18h21

Bonjour,
la position:fixed fonctionne bien sous IExplorer > 6, seulement avec IE il faut un DOCTYPE Strict, par exemple

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

pseudodejautilis · 28/01/2011, 19h49

j'ai aussi essayé avec ce docType mais l'entête n'apparait même pas !

NoSmoking · 28/01/2011, 20h25

Citation:

Envoyé par pseudodejautilis

j'ai aussi essayé avec ce docType mais l'entête n'apparait même pas !

peut être masqué par un autre élément, un float non compatible... ?

As tu une page pour voir les imbrications de tes éléments.?

pseudodejautilis · 28/01/2011, 20h48

voici mon CSS (j'espère que tu t'y retrouveras ; j'aurais voulu avoir le "content" fixe aussi mais j'y arrive pas...) :

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
35
36
body {margin:0;padding:0;min-width:800px;color:#FFFFFF;}
 
#header,#margeG,#menu,#content,#margeDr {
overflow:hidden;
display:inline-block;
}
 
#header {
position:fixed;z-index:10;
width:100%;height:125px;background-color:#000000;	
	color : #FFFFFF;
	text-align : left;
	font-family : Carolus, "Book antiqua", "Comic Sans MS";
}
 
#borg,#bord {
width:10%;height:125px;background-color:#000000;font-family:Arial,Georgia,Verdana,sans-serif;font-size:15px;
}
 
#milieu {width:80%;}
 
#borg,#milieu,#bord {float:left;}
 
#margeG,#menu,#content,#margeD {float:left;}
 
#margeG,#margeD {width:10%;height:900px;background-color:#000000;}
 
#menu {
width:10%;padding:120px 0px;height:900px;background-color:#9996AB;text-align:center;font-family:Arial,Georgia,Verdana,sans-serif;font-size:12px;color:#000000;
}
 
#content {
width:70%;padding:120px 0px;height:900px;background-color:#151515;
}
 
#borg,#footer,#bord {float:left;text-align:center;}

NoSmoking · 28/01/2011, 22h27

rien d'anormal, mais ajoutes le left et le top, pour ton #header, à 0px

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#header {
  position:fixed;
  left : 0;
  top : 0;
  z-index:10;
  width:100%;
  height:125px;
  background-color:#000000;
  color : #FFFFFF;
  text-align : left;
  font-family : Carolus, "Book antiqua", "Comic Sans MS";
}

pseudodejautilis · 29/01/2011, 17h21

mais c'est bien sûr !! ça marche impeccable comme ça, merci NoSmoking !!
Je vais marquer ce post comme Résolu... et en ouvrir un autre car j'ai un souci de mise en page avec mes tailles en % (c'est pas terrible suivant l'écran sur lequel on voit ma page).

28/01/2011, 18h21	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	Bonjour, la position:fixed fonctionne bien sous IExplorer > 6, seulement avec IE il faut un DOCTYPE Strict, par exemple Code : Sélectionner tout - Visualiser dans une fenêtre à part <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
	01

28/01/2011, 16h16	#1
pseudodejautilis Invité régulier Inscription : mars 2005 Messages : 32 Détails du profil Informations forums : Inscription : mars 2005 Messages : 32 Points : 8 Points : 8	"position : fixed" sous IE Bonjour, je débute en CSS et j'ai un problème sous IE avec la mise en page car j'utilise des <div> et je veux que l'entête reste fixe, d'où l'utilisation de "position:fixed" : ça marche bien sur Firefox mais l'entête scroll avec le reste sur IE. Il semblerait que les versions antérieures à IE7 ne gèrent pas cette propriété mais ça ne marche pas même sur IE8 ! Peut-être qu'IE passe en mode Quirks mais j'ai essayé différents docType sans plus de réussite et j'ai fait valider mon code par le W3C... Pour info, l'entête n'apparait même pas si je déclare un docType HTML4.1 Strict ou XHTML 1.0 Transitional ni si j'ajoute "http://www.w3.org/TR/html4/loose.dtd" au docType que j'utilise (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">). En attendant, j'utilise la rustine de Iubito et Bisûnûrs (cf. "Comment simuler le style CSS "position : fixed" sous Internet Explorer ?" de la FAQ). Merci à eux, mais c'est ça devrait fonctionner sans ça sous IE7 et suivants, et j'avoue ne plus rien y comprendre, d'où ce post. J'espère que vous y verrez plus clair que moi !
	00

28/01/2011, 19h49	#3
pseudodejautilis Invité régulier Inscription : mars 2005 Messages : 32 Détails du profil Informations forums : Inscription : mars 2005 Messages : 32 Points : 8 Points : 8	j'ai aussi essayé avec ce docType mais l'entête n'apparait même pas !
	00

29/01/2011, 17h21	#7
pseudodejautilis Invité régulier Inscription : mars 2005 Messages : 32 Détails du profil Informations forums : Inscription : mars 2005 Messages : 32 Points : 8 Points : 8	mais c'est bien sûr !! ça marche impeccable comme ça, merci NoSmoking !! Je vais marquer ce post comme Résolu... et en ouvrir un autre car j'ai un souci de mise en page avec mes tailles en % (c'est pas terrible suivant l'écran sur lequel on voit ma page).
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email