Probleme CSS et résolution

Version imprimable

Bonjour,
J'ai un problème de taille: ma feuille css s'applique correctement sous IE6 résolution 1280x1024.
Mais quand je vais sous firefox, ou que je change ma résolution en 1280x768, tout est décalé...
Voila mon CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
div#bandeau_haut {
	width:100%;
	height:2.45%;
	background-image: url("images/01.jpg");
	float:top;
	margin: 0;
	}
 
div#marge_gauche {
	width:15.08%;
	height:92.89%;
	background-image: url("images/02.jpg");
	float:left;
	margin: 0;
	}
 
 
div#bandeau_poste {
	width:69.84%;
	height:12.94%;
	background-image: url("images/03.jpg");
	background-repeat:no-repeat;
	background-position:100% 100%;
	float:left;
	margin: 0;
	font-family:trebuchet ms;
	font-weight:bold;
	color:#000099;
	}
 
div#onglet {
	width:69.76%;
	height:4.31%;
	background-image: url("images/06.jpg");
	float:left;
	margin: 0;
	font-family:trebuchet ms;
	font-size:11;
	text-align: center;
	vertical-align: bottom;
	}
 
 
div#contenu_gauche {
	width:15.32%;
	height:75.64%;
	background-image: url("images/07.jpg");
	float:left;
	margin: 0;
	}
 
 
div#contenu_droite {
	width:18.09%;
	height:75.64%;
	background-image: url("images/09.jpg");
	float:left;
	}
 
div#contenu {
	overflow: auto; 
	width:36.35%;
	height:75.64%;
	background-image: url("images/08.jpg");
	float:left;
	margin: 0;
	}
 
div#bigcontenu {
	overflow: auto; 
	width:54.44%;
	height:75.64%;
	background-color: white;
	float:left;
	margin: 0;
	}
 
div#bigleftcontenu {
	overflow: auto; 
	width:51.67%;
	height:75.64%;
	background-color: white;
	float:left;
	margin: 0;
	}
 
div#marge_droite {
	width:15.08%;
	height:92.89%;
	background-image: url("images/04.jpg");
	float:right;
	margin: 0;
	}
 
div#piedpage {
	width:100%;
	height:4.66%;
	background-image: url("images/10.jpg");
	float:left;
	margin: 0;
	}

Comment faire pour que ça n'arrive pas? Je pensais que le problème serait résolu avec des pourcentages mais ce n'est pas le cas...

Merci, Leeloe

04/02/2009, 13h22
kaiser59

Salut,

L'erreur est pourtant compréhensible. Tu utilises des valeurs en %, donc un width/height de 20% pour du 1280 ne donne pas la même taille que sur du 1024 logique. Ainsi, si tu t'amuses à modifier la taille de ta fenêtre ton contenu bougera tjrs pour essayer de s'adapter à ton %.

De plus, les virgules sont complètement inutiles dans tes valeurs as-tu déjà vue des demi pixels :D Utilise des valeurs fixes.

Par ailleurs, je ne pense pas me tromper en disant que la valeur "top" n'existe pas pour du float. Soit left, right ou none.
04/02/2009, 13h58
Leeloe

Je suis débutante en CSS...
Mais si j'utilise des valeurs fixes à la place des pourcentages le résultat est bien pire.
Les virgules sont dues au fait que je suis passée de pixel à pourcentage.
Le float:top; ne change rien.

Comment faire alors? Les images de fond d'écran ont des tailles bien propre à elles....

Merci, Leeloe.
06/02/2009, 13h13
kaiser59

ok, j'aimerais bien par contre voir ce que cela donne, la page en question, un petit screenshot se serait bien ;-)

merci.
10/02/2009, 10h59
Leeloe

1 pièce(s) jointe(s)

Voila le screenshot avec les correspondances css.

Merci, Leeloe
10/02/2009, 12h05
Macmillenium

Bonjour,

Citation:

Envoyé par kaiser59

De plus, les virgules sont complètement inutiles dans tes valeurs

En % et em, si ;)
Après sa dépend des navigateurs : y en a qui ignorent ce qu'il y a après la virgule (opéra), y en a qui arrondissent pour la valeur la plus proche (IE) et y en a qui interprètent a peu prêt correctement (FF)

Leeloe, essaye de tout englober dans une bloc et limiter la fluidité avec un min-width et max-width.
Ensuite applique un height:100% sur ce bloc conteneur sans oublier un height:100% également sur le html et le body.
10/02/2009, 14h26
Leeloe

Je comprends pas, comment ça dans une bloc? Elle prendrait tous mes div? Ca me fait changer tout mon CSS?

Merci, Leeloe