Problème de z-index sous firefox

Bonjour,

J'ai mis sous un texte une image dont le code css est celui-ci :

img.AuDessous
{
	position: absolute;
	top: 9px;
	left: 67px;
	z-index: -1;
	width: 636px;
	height: 311px;
}

Le problème et que l'image s'affiche correctement sous IE 7 mais pas sous Firefox...

Avez-vous une solution ?

Merci

Salut,

Aurais tu une page en ligne ce qui sertait l'idéal, ou au moins l'intégralité du code (html+css) ? Car avec une description aussi mince il risque d'être impossible de t'aider...

http://www.canardelite.fr/lumiere.html

Mais ne marche que sous IE je le rappel

PS : ne faite pas attention a la mise en page c'est juste un teste

Bon j'ai tester plein de ptit truc mais rien ne marche...

L'image ne s'affiche que si je supprime le "position: absolute;"

Mais a ce moment mon texte n'est plus en dessous de l'image mais l'image et au dessus ...

Une solution ?
Modifié par jujusuper54 (18 May 2007 - 23:59)

Bonsoir,

Pour placer une image décorative en fond d'un élément, le plus simple est tout de même d'utiliser une image... de fond. C'est fou, non ?

Pour mémoire, les propriétés CSS permettant de gérer les images de fond :
- background-image ;
- background-repeat ;
- background-position ;
- et la propriété générique background.

salut

c'est vrai que florent a pas une si mauvaise idée

mais sinon j'allais dire ( et je le dirais quand même ) avoir lu qu'il existe un bug sous firefox. si on attribue pas de z-index au conteneur d'un element ayant un z-index négatif et bien celui-ci s'affiche pas.

pascal

Merci,

J'ai déjà une image de fon,

Celle-ci doit ce mettre en dessous du texte et au dessus du fon

Merci CPascal je vais regarder mon code pour y ajouter l'attribue !

jujusuper54 a écrit :
J'ai déjà une image de fon,

Celle-ci doit ce mettre en dessous du texte et au dessus du fon

Faire un deuxième conteneur, et lui attribuer la deuxième image de fond.

[b]HTML :[/b]
<div id="conteneur">
	<div id="conteneur-texte">
		<h1>Titre de mon article</h1>
		<p>Bla bla du texte...</p>
	</div>
</div>

[b]CSS :[/b]
div#conteneur {
	background: white url(imagefond.jpg) repeat-y;
}
div#conteneur-texte {
	background: url(imagefondtexte.jpg) no-repeat center center;
}

Quelque chose de ce genre.

Disons le tout net : utiliser le positionnement absolu pour ce que tu veux faire avec cet image est une erreur. Si tu as du mal avec les images de fond, travaille la problématique des images de fond en CSS.

Merci Florent V.

J'ai un très bon livre "CSS 2 ; Pratique du design web" que je vais feuilleté pour trouver la réponse a mes problèmes.

Je vous remercie tous pour vos réponses aussi pertinente les unes que les autres.

Toujours aussi bien Alsacreations !