Problème couleur fond

31 mars 2005, 17:07

Bonjour,

Voila j'ai créé une petite maquette de site pour un projet en cours. Mon problème réside dans le fait que selon le naviguateur : IE et firefox par exemple la couleur de fond que j'ai spécifié n'est pas la même. Pour vous convaincre j'ai fait deux screens, un sous firefox qui est le rendu voulu et un sous IE qui bogue :

http://ouaibou.free.fr/images/firefox.jpg
http://ouaibou.free.fr/images/ie.jpg

Apparemment les couleurs des images ne seraient pas interprétées pareil. Les images sont en png.

Ce bogue est vraiment bizarre étant donné que je n'en ai jamais entendu parler pour le moment.

Je me permet de poster le code css du body et du header afin de peut être pouvoir me corriger si j'ai fait une erreur mais il ne me semble pas :

Code : Tout sélectionner

body {
	background-color: #C8E7FF;
	background-image: url('images/fond.png');
	background-position: top left;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 15px;
	margin: 0;
	padding: 0;
	}

#header {
	background-image: url('images/logo.png');
	left: 15%;
	height: 100px;
	position: absolute;
	top: 78px;
	width: 350px;
	}

En espérant que quelqu'un puisse m'aider, je vous remercie d'avance

Cordialement,
Laurent

31 mars 2005, 17:21

Salut,
la réponse tient ici :

Code : Tout sélectionner

background-color: #C8E7FF;

Les couleurs dites "web-safe" sont au nombre de 256. Si on décompose le code Hexadécimal des couleurs, on a 1/3 pour le rouge, 1/3 pour le vert et le dernier 1/3 pour le bleu. On numérote de 00 à FF; pour composer des couleurs dites "web-safe", on garde les numéros 00, 33, 66, 99, CC et FF pour chacune des trois teintes:
Je te l'accorde, ça limite drolement et là, pour les dégradés, ça la fout mal

Mais le problème est comme tu l'as remarqué toi-même une interprétation variable entre différents navigateurs, ce sera pareil d'une machine à l'autre et d'un système à l'autre (Windows, Mac ou UNIX/Linux). Les variations seront parfois à peine perceptibles, mais tu n'as malheureusement pas le contrôle des paramétrages de machine de tes internautes.

Solution ? je sais pas, il faut trouver une astuce, utiliser des transparences pour les motifs et avoir en dessous une image continue en arrière plan de ta page par exemple de façon à ne pas avoir le découpage du rectangle.

31 mars 2005, 17:23

Je suis curieuse de voir tes images fond.png et logo.png (et leurs propriétés).

Comme je n'ai pas ton code, la hauteur du pb en question ne serait pas de 100 pixels par hasard? N'y aurait-il pas un lien avec ton height: 100px dans ton #header ?

31 mars 2005, 17:26

Je pense que notre Bergerac de Saint Affrique a mis le doigt (ou serait-ce le nez) dessus?...Quel pif?

31 mars 2005, 17:39

Ehe ok merci beaucoup.

Comme solution je vais tester dans photoshop d'ouvrir la palette et de selectionner celle contenant que les couleurs web et essayer de trouver une couleur se rapporchant le plus possible.

Si je n'arrive pas à un résultat je vais essayer avec des images transparentes mais ça risque de poser problème avec firefox.

Bon voila histoire que le sujet servent à d'autres que moi je vous tiens au courant et je mettrais résolu quand j'aurais vérifié les deux techniques.

Encore merci.

@+

31 mars 2005, 19:34

J'ai finalement opté pour mettre une image sur tout le fond

01 avr. 2005, 08:45

Salut,
ce que tu pourrais faire, ce serait la chose suivante:
Trois parties :
- Le dégradé du fond de page, une image de 3 ou 4 pixels de large par toute la hauteur pour garder ton dégradé (avec en style : {background-repeat: repeat-x});
- Le logo et le titre en png ou gif tranparent;
- ton cadre avec les onglets avec en propriété CSS un {background-color: transparent}
Comme ça, tu gardes ton interface actuelle avec les couleurs actuelles.

01 avr. 2005, 16:01

C'est ce que j'ai fais en fait. Merci tout de même d'avoir détaillé

Problème couleur fond

Qui est en ligne