28220 sujets

CSS et mise en forme, CSS3

[Contourné] Z-index et float sous Opéra ?

Bonjour,

Je m'intéresse au code html depuis que j'ai découvert l'alternative div/css, il y a peu. Et avant de vous faire part de mon petit problème je tiens à féliciter et à remercier toutes les personnes qui contribuent à faire progresser la conception de sites web en ce sens.

J'ai un souci avec Opera et peut-être que certains se sont déjà frotté au problème. Je développe une page assez riche graphiquement et j'ai besoin de placer deux divs en float (côte à côte donc) au dessus d'un div placé en absolu en bas à droite du conteneur principal.

J'ai isolé mon problème dans une page de test que voici.

css :

* {padding:0; margin:0;}

p{
	padding:10px;
}

#bloc1{
	float:left;
	z-index:2;
	position:relative;
	height:300px;
	width:300px;
	background-color:#CCFF00;
}

#bloc2{
	float:left;
	z-index:2;
	position:relative;
	height:300px;
	width:300px;
	background-color:#6699FF;
}

#bloc3{
	z-index:1;
	position:absolute;
	top:150px;
	left:150px;
	height:300px;
	width:300px;
	background-color:#009900;
}


html :

<body>
<div id="bloc1"></div>
<div id="bloc2"></div>
<div id="bloc3"></div>
</body>


Sous toutes les dernières versions de Firefox, Netscape et I.e. pas de problème.

Sous Opera, le div placé en absolu z-index:1 passe par dessus les divs placées en relatif z-index:2...
Le z-index:1 ne se met dessous le z-index:2 que lorsque je supprime les déclarations float...

Comme je débute j'ai peut-être mal fait... qui a raison Opera ou les autres ?

Je peux contourner le problème en mettant mes float dans un conteneur. Mais c'est lourd.

Merci.
Modifié par Patwik (26 Sep 2005 - 13:09)
Bonjour,

Ce n'est pas facile de se faire une idée sans un exemple concret de ton problème (lien vers la page)

Je ne suis pas sur que la propriéte z-index s'applique au élement positionnés en float.

Mais si ton premier élément est placé en position absolute pourquoi ne pas placer également les 2 blocs te posant problème en position absolute, dans ce premier élément.
J'ai mis mon test ici Smiley smile

http://subpeople.free.fr/test/test.htm

Si vous testez sur Firefox, Netscape, I.e. dernières versions ça marche.

Sous Opera non...

Il est effectivement possible que les éléments float n'aime pas la propriété z-index...

Si je mets tout en absolu je suis sûr que ça marchera mais je me sers du flux pour composer ma page car le contenu de mes divs pouvant varier un peu il faut que mes divs puissent se pousser.

Donc je fais tout en float avec des hr clear:both, sauf pour les images de fond se trouvant dans les coins que je place en absolu et le problème est né de là avec une image qui doit être en bas à doite (j'en ai déjà une en haut à gauche que j'ai placé dans le fond du conteneur).

Mais je ne voulais pas m'étendre sur la mise en page générale de ma page c'est pourquoi j'ai fais ce petit exemple simple pour isoler le problème à la racine qu'il est au demeurant facile de contourner.

Je me demandais juste si c'était un bug d'Opéra ou des autres navigateurs. Il faudrait que je me plonge dans les définitions du W3c mais là ouch je suis fatigué...
bonsoir,

Dans un bouquin intitulé ,CSS2 Pratique du design web , on peut lire que z-index fonctionne partiellement sous Opéra. Donc visiblement, le "partiellement" se transforme en " ne fonctionne pas".

Va falloir changer de stratégie si tu souhaite que ton site fonctionne sous tous les navigateurs.

amicalement,
Merci Philippe de cette précision.

J'ai justement envisagé dans mon budget l'achat d'un livre qui s'appel CSS2 Pratique du design web. Je pense que je vais passer à l'acte, de plus son auteur le mérite amplement.

Pour contourner le problème j'ai placé mes div en float dans un conteneur qui contient une image de fond collée en bas à droite par dessus laquelle mes div flottes.

Ca m'a obligé à crée un conteneur dans le conteneur principal (qui contenait déjà une image de fond en haut à gauche) , alors que si je n'avais pas eu ce problème sous Opéra mon code aurait pu être une parfaite succession de div.

Si personne n'a d'autres suggestions je mettrai un [Contourné] dans mon titre.
Sujet clos
Aller à