28173 sujets

CSS et mise en forme, CSS3

[Ouvert mais Résolu] Incompatibilité inter-navigateurs: barre dégradée

Bonsoir.

J'ai eu du mal à expliciter le problème dans le titre donc je vais être plus clair:
sous IE, le code fonctionne, et j'ai ça (ce que je veux):
upload/12109-blemdegrad.JPG
(Il s'agit de l'angle en haut a gauche de la page naturellement....)

Ce qui m'intéresse, c'est le petit dégradé qui fait bien en dessus du menu.
Pour faire ça, j'ai fait un div...

<body>
	<div id="motif_top"></div>
[...]
</body>


auquel j'ai associé du css...

	#motif_top {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 30px;
		z-index: -1;
		background-image: url("/img/deg_menu.png");
		background-repeat: repeat-x;
	}


Sous IE ça passe, et non sous firefox (carrément aucun motif apparent avec ce dernier).

A mon avis il y a assez de pécisions, vous pouvez toujours aller sur le site lui-même (en construction >.<): le site.

Merci de votre aide !
Modifié par blint (30 Apr 2007 - 15:02)
Si je supprimes le z-index, le bloc apparait sur Firefox.

Mais pourquoi avoir utilisé un bloc, plutôt que simplement une image de fond sur body, par exemple ? Smiley confuse
Modifié par Florent V. (30 Apr 2007 - 00:35)
Hé bien le body avait déjà une propriété de couleur attribuée au background...
Je pensait pas qu'on pouvait cumuler les arriere plans >.<
Et pour ta solution, en fait la barre apparait sans le z-index, en effet... L'ennui c'est que la barre passe SUR le menu de gauche, ce qui est assez moche Smiley langue .

Le z-index fonctionne bien sous IE, je comprends pas pourquoi ca passe pas sous FF...

Quoi qu'il en soit le "double background" fonctionne très bien alors merci pour cette solution toute bête mais qui fonctionne au mieux Smiley smile .

Gros merci, bonne nuit et à très bientôt! ^^
Modifié par blint (30 Apr 2007 - 00:53)
Il n'y a pas de « double background » en CSS 2.1, pour un unique élément. Il y a, par contre, la possibilité de donner à la fois une couleur de fond et une image de fond.
body {
	background-color: black;
	background-image: url(degrade-sombre.png);
}

Ce qui peut aussi s'exprimer ainsi :
body {
	background: black url(degrade-sombre.png);
}
Pas mal, merci de l'astuce je m'en souviendrai la prochaine fois ^^".

Par contre si vous avez une explication pour le problème du div sous Firefox je prends, ça peut toujours servir dans d'autres cas Smiley langue

Encore merci à bientôt ^^
Hé bien 100%, c'était sensé correspondre à 100% du body...
Les 100% en width fonctionnent, le problème c'est qu'avec le position absolute je pensais pouvoir coller le bloc en large au dessous des autres...
Quand j'ai vu qu'il passait dessus, j'y ai collé un z-index négatif pour le mettre dessous.
Malheureusement, Firefox semble interpréter différemment le z-index, et fait totalement disparaitre le bloc...

(idée! ==> Peut être que le bloc est passé sous le body. Je teste et édite)

EDIT: rien à faire, le bloc s'impose aux autres; pas de superposition, les autres blocs sont écalés...
Il faut surement des valeurs left ou top positives pour faire une superposition... Smiley confus

Je sais pas s'il est nécessaire de clore le topic, en tout cas, il peut toujours être utile si l'on rencontre le problème à nouveau !
Modifié par blint (30 Apr 2007 - 13:38)
Les sujets ne sont pas fermés sur Alsacréations, sauf si c'est nécessaire pour des raisons de modération (non-respect des règles, discussions trop houleuses...). Par contre, si ton problèmes est résolu, tu peux indiquer [Résolu] dans le titre de ton sujet. Pour cela, il faut éditer le premier message du sujet.
Sujet clos
Aller à