Discussion :

[jeremdu54]

Bonjour a tous,
Je suis actuellement sur un site de belote en ligne et après plusieurs "plainte" concernant le style de mise en page j'ai décider de le refaire.En effet des gens ce sont plein des espacement et mise en forme selon leur navigateur.
J'ai donc effectué ceci:

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
body
{
	background-color: #8106A9;
	margin-left: -20px;
	max-width:1200px;
	font-family: verdana, serif;
	font-size:12px;
}
 
a, a:visited {
	color:white;
	text-decoration:none;
}
 
a:hover, a:focus {
	color:#9F0004;
}
#colonne_gauche {
    position: absolute;
	text-align:center;
	background-color:#6B6B5F;
	width:17%;
	margin-top: 20px;
	margin-bottom: 20px;
	padding:0;
	border: 2px solid #003300;
	float: left;
	min-height:400px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	font-size:15px;
}
#colonne_gauche2{
    position: absolute;
	text-align:center;
	background-color:#6B6B5F;
	width:17%;
	margin-bottom: 10px;
	margin-top:38%;
	padding:0;
	border: 2px solid #003300;
	float: left;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	position:absolute;
	font-size:15px;
}
#design_colonnegauche2{
padding-bottom : 30px;
    border-bottom : 2px solid #9EA0A1;
	border-bottom-color:Red;
}
#colonne_droite{
	position: absolute;
	text-align:center;
	background-color:#6B6B5F ;
	width:17%;
	margin-top:20px;
	margin-left:72%;
	margin-bottom:10px;
	margin-right:0;
	padding:20;
	border: 2px solid #003300;
	float: right;
	min-height:200px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	font-size:15px;
}
#colonne_droite2{
	position: absolute;
	text-align:center;
	background-color:#6B6B5F ;
	width:17%;
	margin-top:23.5%;
	margin-left: 72%;
	margin-bottom:40px;
	margin-right:0;
	padding:50;
	border: 2px solid #003300;
	float: right;
	min-height:200px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	font-size:15px;
}
#colonne_droite3{
	position: absolute;
    text-align:center;
	background-color:#6B6B5F ;
	width:17%;
	margin-top:41.5%;
	margin-bottom:20px;
	margin-right:0px;
	margin-left:72%;
	padding:50;
	border: 2px solid #003300;
	float: right;
	min-height:100px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	font-size:15px;
} 
 
#map {
	background-color:#6B6B5F;
	margin-left:23%;
	margin-bottom:10px;
	margin-right:0;
	margin-top:20px;
	padding:5px;
	width:660px;
	border: 2px solid #003300;
	min-height:50px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	font-size:15px;	
}

Cependant deux problèmes se posent:
-la couleur de fond n'est plus celle voulu (je voulais du violet pour le body, il me met du blanc
- Sur firefox le resultat obtenu est bon mais sur google chrome le resultat obtenu est loin du compte

Si vous desirez voir par vous-meme: www.team-belote.com

Pour de plus ample informations n'hesitez pas. Je vous remercie par avance.
Cordialement Jeremy

[thelvin]

- la couleur de fond n'est plus celle voulu (je voulais du violet pour le body, il me met du blanc

Ce genre de choses se trouvent facilement avec Firebug, extension de Firefox pour développeurs.

Sur ton site, il y a deux règles pour l'élément body, et c'est toujours la dernière qui prime.

- Sur firefox le resultat obtenu est bon mais sur google chrome le resultat obtenu est loin du compte

Les goûts et les couleurs... Il y a quoi, par exemple ?

[jeremdu54]

pour le problème de couleur c'est réglé cependant pour le problème suivant je parle des menus.
Exemple le menu de droite: les trois sont mis en cascade sur google chrome alors que sur firefox mes menus sont placer comme je le désire. J'ai entendu dire qu'il fallait adapter un style CSS pour chaque navigateur. N'y a t'il pas plus simple? ou plus rapide?

[Candygirl]

Bonjour,

J'ai entendu dire qu'il fallait adapter un style CSS pour chaque navigateur.

Je ne sais pas où tu entendu cela mais c'est bien la dernière chose à faire. Avec un code bien pensé, on ne recourt à un css spécifique que dans de rares cas comme le support de vieux navigateurs.

N'y a t'il pas plus simple? ou plus rapide?

Le plus simple est de produire un code propre et valide, en utilisant les divers positionnements de manière réfléchie en fonction des comportements souhaités au gré des différentes résolutions.

Tu devrais lire quelques tutoriels sur les différents positionnements (absolut, float,...) afin de placer tes éléments de manière plus efficace. A première vue, dans ton cas, pas besoin de position absolue.

[jeremdu54]

Je te remercie pour ta réponse.Il est vrai que j'ai quelques soucis avec le CSS même si dans l'ensemble je m'en sors plutôt bien.Cependant je n'arrive pas a voir en quoi un code propre réglera le souci des navigateur.j'ai regarder tes tutoriels et rien n'explique comment adapter un code qui face la même chose dans chaque navigateur.