Discussion :

[Leeloe]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 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.

[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.

[kaiser59]

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

merci.

[Leeloe]

Voila le screenshot avec les correspondances css.

Merci, Leeloe

[Macmillenium]

Bonjour,

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.

[Leeloe]

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

Merci, Leeloe