28173 sujets

CSS et mise en forme, CSS3

IE et "position:fixed;" (argh!)

Bonjour à tous,

Je viens de m'inscrire sur le forum d'Alsacreations, riche en ressources de qualité. Je me suis récemment mis au xhtml + css afin de réaliser le design de mon (futur) blog, tournant sous Dotclear 2 (beta). Pour cela, j'ai acheté 2 bouquins (d'ailleurs classés dans vos incontournables), et je progresse plutôt bien. Seulement, je suis tombé sur un écueil. Il s'appelle Internet Explorer. Je m'explique...

Il s'agit d'un problème d'interprétation des CSS par le navigateur, IE étant incapable d'interpréter correctement les standards. Je suis arrivé au mieux de mes capacités, et je ne suis pas sûr que mes désirs soient pleinement réalisables avec IE6, étant donné que j'ai déjà dû lutter.

Cela concerne le positionnement fixe. Mon objectif est de placer 2 images en background, qui restent fixes lors du défilement du contenu de la page. Pour l'une, j'utilise pleinement le CSS (chargement et positionnement en background), et pour la seconde, j'utilise le xhtml, puis je tente de la placer via les CSS. Alors que sous Firefox, tout fonctionne à merveille, sous IE, c'est une horreur sans nom !


Je voulais attribuer une position fixe aux 2 images, seulement IE est incapable d'interpréter la CSS "position: fixed". J'ai donc chargé et positionné l'image "crayon" en background, via les CSS :

body {
    background: #fec url("img/bck_crayon.jpg") no-repeat right 400px fixed;
    font-family: Verdana, Geneva, Lucida, "Lucida Grande", Helvetica, sans-serif;
    font-size: .8em;
    }


Pas de problème à ce niveau, l'interprétation est impeccable. Seulement, j'ai chargé la seconde image "feuilles" via du xhtml dans le "home.php" :

<body class="dc-home" OnLoad="preload();">
<div id="feuilles"><img src="{{tpl:BlogThemeURL}}/img/bck_feuilles.gif"/></div>
(...)


Puis, aprés quelques essais convaincants sous Firefox, et moults essais infructueux sous IE (erk!), je me suis appuyé sur mon ami google, et j'ai grugé un maximum pour ne pas avoir ma page en vrac (sous l'autre bouse de Microsoft) : 

/* position absolue sur IE, fixe sous un autre navigateur*/
#feuilles {
    text-align: left;
    position: absolute;
    top: 250px;
    left: 0px;
    }
html>body #feuilles {position: fixed;} /*ie pas capable de le lire*/


ça me permet donc d'avoir le résultat escompté sous Firefox, et un résultat provisoire "au mieux" sous IE. Ma question est simple : est-il possible (et en ce cas, comment ?) de fixer le positionnement d'une image sous IE comme sous Firefox, quitte à utiliser du Javascript, ou un autre moyen de rétorsion (si possible brutal) ?

Pour bien visualiser mon objectif, il suffit que vous visitiez ma page sous Firefox, puis sous IE, en scrollant.
Smiley cligne
Autre question - l'image "feuilles" (à gauche) empiète sur la page lorsqu'une petite fenêtre/résolution est utilisée. Je suppose qu'une valeur z-index peut régler le problème, alors j'ai tapé ce petit bout de CSS :

* {z-index: 5;} /*sélecteur universel*/

#feuilles {
	text-align: left;
	position: absolute;
	top: 250px;
	left: 0px;
	z-index: 1;
	}


Je pensais naïvement, et en toute logique, que le navigateur allait me placer tous les éléments sur une profondeur de 5, et ainsi pouvoir placer mon image "feuilles" dessous, en 1. Mais cela ne fonctionne pas...
Bonjour,
la position fixe n'est supportée par Internet Explorer que depuis la version 7.

A moins de bidouiller en javascript, mais c'est moche parce qeu pas aussi fluide et c'est beaucoup de boulot pour pas grand chose, il n'existe pas d'alternatives.

Le z-index ne fonctionne que sur les éléments positionnés (i.e. position relative, fixe ou absolue). Donc ta première règle ne fonctionne pas.

Edit : ton image semble être une image de fond. Tu ne pourrais pas la mettre en fond du <html> ?
Modifié par Lanza (26 Feb 2007 - 17:23)
Si j'avais fait plus court, on m'aurait inévitablement demandé des précisions. Là, c'est trés clair, non ? sinon, je peux faire dans le concis :
2 img, {position:fixed} en fond : firefox 1, ie 0.
Smiley lol

Quant à l'URL de test :
Signature -> icône "www" !
Smiley cligne
Modifié par Nawak (26 Feb 2007 - 17:34)
a écrit :
Edit : ton image semble être une image de fond. Tu ne pourrais pas la mettre en fond du <html> ?


Les 2 sont des images de fond, dans l'idée. Seulement, l'une (crayon) est chargée via le CSS, et l'autre (feuilles) par du Xhtml. Si je charge l'une et l'autre en background, l'une chassera l'autre, non ?
Smiley cligne
Pas si elles sont sur deux éléments différents. Tu pourrais mettre l'image de droite en fond de <body> et l'image de gauche en fond de <html> par exemple. Le fond du <body> doit être transparentedans ce cas, il faut penser à vérifier ce que ça donne dans les plus vieux navigateurs qui supportent mal les style sur l'élément <html>.
Merci pour ton aide,

Je viens d'essayer la manoeuvre de contournement que tu m'as indiqué, en plaçant via les CSS les 2 images, l'une dans <html>, l'autre dans <body>, puis je les ai positionné en "fixe", mais sous IE, pas moyen, c'est l'un ou l'autre, pas les deux. Ce... "navigateur" refuse obstinément d'entendre raison.
Smiley ohwell
Bonjour,

Et si tu prends une image en background incluant tes deux images correctements positionnées avec :
 body {

	background: url(image.jpg);
	background-repeat: no-repeat; 
	background-attachment:fixed;
	background-position: 0% 100%;/* ou autres*/
	}

Il me semble que ça passerait sur ie?
Sujet clos
Aller à