Adaptation scrollbar sur navigateurs

Version imprimable

3 pièce(s) jointe(s)

Bonjour à tous,

J'ai encore un petit problème sur mon projet, l'adaptation du CSS pour les navigateurs..

Voilà la partie CSS de ma scrollbar :
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 ul#menu { list-style-type: none; margin: 2em 0 0 0; width: 910px; height: 50px; background-color:#ECCAA3; border: 2px solid; box-shadow: 3px 3px 3px ##ED6700; border-color: #ED6700; border-radius: 10px; } ul#menu li { display:inline-block; margin-top: 8px; padding:0 0.5em; color:#AB6600; } ul#menu li .trait { border-right: 2px solid #BC580B; } ul#menu a { display: block; text-decoration: none; color: #F09A45; padding: 0 1.5em; font-family: Arial; font-size: 22px; font-variant: small-caps; font-weight: bold; } ul#menu a:hover { text-decoration: underline; } ul#menu a:visited { color:#A44700; }
Avec ce code j'obtiens ceci sur Chrome :

Pièce jointe 149600

Et ceci sur Firefox/IE :

Pièce jointe 149601

Si je retire du CSS "padding:0 0.5em;" de ul#menu li j'obtiens la bonne config sur Firefox et IE :

Pièce jointe 149600

Mais plus sur Chrome ... :

Pièce jointe 149602

Avez-vous une idée ?

Je cherchais un moyen d'utiliser des balises tel [if IE] mais ça n'a pas l'air d'exister sur Chrome.

Merci d'avance!

25/06/2014, 08h25
Bisûnûrs

Le mieux est que tu nous montres une page en ligne, là on peut difficilement t'aider, juste faire des suppositions. Si tu n'as pas encore d'hébergeur tu peux alors utiliser CodePen pour nous montrer le résultat en ligne.

Je fais donc une supposition : Essaie de rajouter un padding:0; sur le #menu, les valeurs par défaut sont souvent différentes sur les différents navigateurs.
25/06/2014, 10h30
roro54

voila la page : http://blopz.6te.net/web/site/historia.html

J'ai testé avec le padding que tu m'as demandé d’insérer, ça décale tout sur la gauche, les 2 navigateurs inclus, je l'ai donc retiré.
25/06/2014, 10h37
Bovino

Il est où le doctype ? :whistle:

Bonjour Bovino,

Voila mon nouvel index.html :

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
102
103
104
105
106
107
108
109
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	
 
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>La Comida del Mundo</title>
  <link rel="stylesheet" href="style.css" />
  <script src= "script.js" ></script>
 
</head>
 
<body background="http://fonds.toutimages.com/fo_dessins/dessin_033.jpg">
 
	<div id="container">
		<div id="scrollbar">
 
		<div id="header"> 
			<a href="index.html"> <img src="bande.jpg"/> </a> 
		</div>
 
 
		<div id="nav"> 
			<ul id="menu">
				<li><a class="trait" href="historia.html"> historia </a></li>
				<li><a class="trait" href="américa.html"> américa </a></li>
				<li><a class="trait" href="europa.html"> europa </a></li>
				<li><a class="trait" href="africa.html"> áfrica </a></li>
				<li><a class="trait" href="asia.html"> asia </a></li>
				<li><a href="oceania.html"> oceania </a></li>
			</ul>
		</div>
 
			<div id="video">
				<h1> Algunos vídeos para Descubrir la Comida a traves el Mundo </h1>
			</div>
 
				<div id="photo">
					<a href="https://www.youtube.com/watch?v=0-vjzlWHDNg"> <img src="tajine.jpg" width="450" height="200" alt="Cocina del mundo"/> </a>
					<a href="https://www.youtube.com/watch?v=o1YN_z0Ah18"> <img src="epice.jpg" width="450" height="200" alt="Epices"/> </a>
					<a href="https://www.youtube.com/watch?v=yKl6AB3cmoY"> <img src="curry.jpg" width="450" height="200" alt="Curry"/> </a>
					<a href="https://www.youtube.com/watch?v=x5pg0Ocvyu8"> <img src="anis.jpg" width="450" height="200" alt="Anis"/> </a>
				</div>
 
				<div id="article">
					<h2> Receta de la semana </h2>
					<h3> Golpe de corazón </h3>
					<h4>Spaghetti barilla a la albahaca</h4>
					<ul>
						<li>Lave y cincele la albahaca. Trabaje la mantequilla en pomada con la albahaca cincelada, los dientes de ajo picados, la sal y la pimienta. Reserve para temperatura ambiente.</li>
						<li>Cumbres hervir una gran cantidad de agua salada con aceite. Sumerjas allí espaguetis y cumbres cocer 7 - 8 min para que se queden " al dente " o según su gusto a menudo removiéndolos con un tenedor</li>
						<li>Al mismo tiempo, precaliente un plato de servicio y cumbres calentar la crema en una cacerola.</li>
						<li>Escurra espaguetis se vuelcas en el plato caliente, riegas crema, añades la mantequilla a la albahaca, mezclas y sirves en seguida..</li>
					</ul>
				</div>
 
 
<footer>
			<div class="myfooter">
				<div id="aboutme">
					<h5>¿Quién soy?</h5>
					<p> Me llamo X, soy estudiante en comunicación. Escogí irme a España para seis meses con el fin de enterarse con un nuevo modo de la comunicación pero desde luego para descubrir una nueva cultura. Defecto este sitio quiero compartir una pasión, la de la cocina. Effect, en el momento de cada uno de mis viajes, siempre me más interesé por el alimento local que por la arquitectura o que por los monumentos. Me gusta dejarme viajar a través de los sabores, los aromas o los olores. La cocina representa una forma de arte para el que lo crea y un regalo para el que lo prueba. Lo que encuentro interesante, es poder combinar diferentes culturas en el mismo plato. Esta idea es para mí un concepto que hay que desarrollar, es por eso que hoy, le propongo en primer lugar descubrir recetas venidas de todos los continentes. </p>
				</div>
 
				<div id="contacto">
					<h5> Contacto </h5>
					<p>Fundador: X:</br> <a href="mailto:X@gmail.com">X@gmail.com</a></p>
				</div>
 
 
			<div id="categorias">
				<h5> Categorias </h5>
				<ul class="left">
					<li> <a href="historia.html"> Historia </a> </li>
					<li> <a href="america.html"> América </a> </li>
					<li> <a href="europa.html"> Europa </a> </li>
					<li> <a href="africa.html"> Africa </a> </li>
					<li> <a href="asia.html"> Asia </a> </li>
					<li> <a href="oceania.html"> Oceania </a> </li>
				</ul>
			</div>
 
			<div class="Fb">
				<a href="https://www.facebook.com/CocinaMundo?fref=ts"><img src="fb.jpg" width="40" height="40"/></a>
			</div>
 
			<div class="google">
				<a href="https://plus.google.com"><img src="gplus.png" width="40" height="40" /></a>
			</div>
 
			<div class="twitt">
				<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @twitter</a>
				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
			</div>
 
			</div>
		</footer>
 
		</div>
	</div>	
</body>
 
</html>

et le css complet :

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
body
{
	background-image: url ('http://fonds.toutimages.com/fo_dessins/dessin_033.jpg');
	background-repeat: repeat;
	background-position: center center;
	font-family: Arial, Helvetica, sans-serif;
}
 
#container
{
	background-color: #FADEC6;
	width: 950px;
	border:1px;
	margin:0 auto;
	border-radius:10px;
	padding-right:18px;
	height:1500px;
}
 
::-webkit-scrollbar
{
	width: 15px;
}
 
::-webkit-scrollbar-track 
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb 
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 12px rgba(0,0,0,0.5); 
}
 
a
{
	text-decoration:none;
}
 
#header
{
	background-image: url('bande.jpg');
	background-repeat: repeat;
	width: 950px;
	display:block;
	height: 200px;
	border-width: 10px;
	border-radius: 10px;
	border-color:#E67015;
	border-style: ridge;
}
 
#nav
{
	width:auto;
	height:50px; 
	margin-left:6px;
	margin-top: 40px;
	margin-bottom: 40px;
}
 
ul#menu
{
	list-style-type: none;
	margin: 2em 0 0 0;
	width: 910px;
	height: 50px;
	background-color:#ECCAA3;
	border: 2px solid;
	box-shadow: 3px 3px 3px ##ED6700;
	border-color: #ED6700;
	border-radius: 10px;
}
 
ul#menu li
{
	display:inline-block;
	margin-top: 8px;
 
	color:#AB6600;
}
 
ul#menu li .trait
{
	border-right: 2px solid #BC580B;
}
 
ul#menu a
{
	display: block;
	text-decoration: none;
	color: #F09A45;
	padding: 0 1.5em;
	font-family: Arial;
	font-size: 22px;
	font-variant: small-caps;
	font-weight: bold;
}
 
ul#menu a:hover
{
	text-decoration: underline;
}
 
ul#menu a:visited
{
	color:#A44700;
}
 
#photo
{
	display: inline-block;
	width: 950px;
	height: 400px;
	margin-top:8px;
	float:left;
	margin-left: 32px;
}
 
#photo img
{
	border: 1px;
	border-radius: 10px;
	height: 230px;
}
 
#article
{
	display:block;
	position:relative;
	top: 20px;
	height: 300px;
	margin-left: 18px;
	color: #ECCAA3;
	background-color: #915A07;
	border-radius: 10px;
	margin-top: 520px;
	margin-bottom: 0 auto;
}
 
h2, h3
{
	text-align: center;
	font-variant: small-caps;
	color: #ECCAA3;
 
}
 
h4
{
	text-decoration:underline;
	text-align:center;
}
 
.accueil
{
	width:950px;
	display:block;
	margin-top:5px;
}
 
#present img
{
	margin-left: 45px;
	border: 4px solid;
	border-color:#7B4500;
	border-radius: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}
 
h1
{
	font-family: arial;
	font-size: 30px;
	font-style: oblique;
	font-variant: small-caps;
	text-align: center;
	color: #915A07;
	text-shadow: 2px 2px 2px #CED2D2;
	margin-left: 80px;
}
 
#present p
{
	font-size:15px;
	text-align:justify;
	color:#915A07;
	border: 1 px;
	border-radius: 10px;
	padding: 5px;
	font-weight: bold;
	bottom: 18px;
	text-align:justify;
}
 
#t1
{
	background-color: #915A07;
	border: 1px;
	border-radius:10px;
	width:350px;
	margin-left: 300px;
}
 
#histoire1 img
{
	margin-bottom: 15px;
	border:1px;
	top: 10px;
	border-radius: 10px;
	margin-left: 14px;
}
 
#histoire1 p
{
	font-size: 15px;
	text-align:justify;
	color:#915A07;
	border: 1 px;
	border-radius: 10px;
	font-weight: bold;
	padding: 5px;
	bottom: 18px;
}
 
.recette1
{
	float: left;
}
.methode1
{
	position: relative;
	width: 475px;
	height: 187px;
	float: right;
	top: 1px;
}
 
footer
{
	background-color: #333333;
	position: absolute;
	width: 100%;
	bottom: -980px;
	left:0px;
	right: 0px;
}
.myfooter
{
	position: relative;
        float: left;
        margin-left: 120px;
 
 
 
}
 
h5 
{
	font-family: Calibri, sans-serif;
	font-size: 20px;
	color: #09BFA6;
}
 
p
{
	font-size: 12px;
	color: #CED2D2;
	margin: 5px;
}
 
#aboutme
{
    float: left;
    width: 300px;
}
 
#contacto
{
	position: relative;
    float: left;
	left: 280px;
    width: 150px;
}
 
#categorias
{
	position: relative;
	float: right;
    padding: 5px;
    width: 200px;
}
#categorias a
{
	color: #CED2D2;
	font-variant: small-caps;
}
 
.Fb
{
	position: relative;
	top: 255px;
	float: right;
	left:80px;
}
 
.google
{
	position:relative;
	top: 375px;
        left: 240px;
	float: right;
	padding-left: 150px;
	margin-right: 180px;
	margin-top:-119px;
 
}
 
.twitt
{
	position:relative;
	top: 262px;
	left: 300px;
	float: right;
	margin-right: 80px;
}

25/06/2014, 11h07
Bisûnûrs

Il faut choisir un seul parmi la liste des DOCTYPE, pas en mettre trois. :roll:
25/06/2014, 11h09
roro54

Plouf plouf!

HELP :)
25/06/2014, 11h10
Bisûnûrs

Code:

<!DOCTYPE HTML>

Par exemple.
25/06/2014, 11h11
Bovino

Surtout, il faut choisir celui qui correspond à la version de HTML que tu utilises ! :aie:

ça je m'en doutais, tu aurais aussi pu te douter que je n'en ai aucune idée :]

Voilà mon tout nouveau doctype qui déchire, par contre aucun changement pour Chrome.. (j'ai aussi mis à jour le page index du site hébergé pour vous aider.)

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
<!DOCTYPE HTML>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>La Comida del Mundo</title>
  <link rel="stylesheet" href="style.css" />
  <script src= "script.js" ></script>
 
</head>
 
<body background="http://fonds.toutimages.com/fo_dessins/dessin_033.jpg">
 
	<div id="container">
		<div id="scrollbar">
 
		<div id="header"> 
			<a href="index.html"> <img src="bande.jpg"/> </a> 
		</div>
 
 
		<div id="nav"> 
			<ul id="menu">
				<li><a class="trait" href="historia.html"> historia </a></li>
				<li><a class="trait" href="américa.html"> américa </a></li>
				<li><a class="trait" href="europa.html"> europa </a></li>
				<li><a class="trait" href="africa.html"> áfrica </a></li>
				<li><a class="trait" href="asia.html"> asia </a></li>
				<li><a href="oceania.html"> oceania </a></li>
			</ul>
		</div>
 
			<div id="video">
				<h1> Algunos vídeos para Descubrir la Comida a traves el Mundo </h1>
			</div>
 
				<div id="photo">
					<a href="https://www.youtube.com/watch?v=0-vjzlWHDNg"> <img src="tajine.jpg" width="450" height="200" alt="Cocina del mundo"/> </a>
					<a href="https://www.youtube.com/watch?v=o1YN_z0Ah18"> <img src="epice.jpg" width="450" height="200" alt="Epices"/> </a>
					<a href="https://www.youtube.com/watch?v=yKl6AB3cmoY"> <img src="curry.jpg" width="450" height="200" alt="Curry"/> </a>
					<a href="https://www.youtube.com/watch?v=x5pg0Ocvyu8"> <img src="anis.jpg" width="450" height="200" alt="Anis"/> </a>
				</div>
 
				<div id="article">
					<h2> Receta de la semana </h2>
					<h3> Golpe de corazón </h3>
					<h4>Spaghetti barilla a la albahaca</h4>
					<ul>
						<li>Lave y cincele la albahaca. Trabaje la mantequilla en pomada con la albahaca cincelada, los dientes de ajo picados, la sal y la pimienta. Reserve para temperatura ambiente.</li>
						<li>Cumbres hervir una gran cantidad de agua salada con aceite. Sumerjas allí espaguetis y cumbres cocer 7 - 8 min para que se queden " al dente " o según su gusto a menudo removiéndolos con un tenedor</li>
						<li>Al mismo tiempo, precaliente un plato de servicio y cumbres calentar la crema en una cacerola.</li>
						<li>Escurra espaguetis se vuelcas en el plato caliente, riegas crema, añades la mantequilla a la albahaca, mezclas y sirves en seguida..</li>
					</ul>
				</div>
 
 
<footer>
			<div class="myfooter">
				<div id="aboutme">
					<h5>¿Quién soy?</h5>
					<p> Me llamo X, soy estudiante en comunicación. Escogí irme a España para seis meses con el fin de enterarse con un nuevo modo de la comunicación pero desde luego para descubrir una nueva cultura. Defecto este sitio quiero compartir una pasión, la de la cocina. Effect, en el momento de cada uno de mis viajes, siempre me más interesé por el alimento local que por la arquitectura o que por los monumentos. Me gusta dejarme viajar a través de los sabores, los aromas o los olores. La cocina representa una forma de arte para el que lo crea y un regalo para el que lo prueba. Lo que encuentro interesante, es poder combinar diferentes culturas en el mismo plato. Esta idea es para mí un concepto que hay que desarrollar, es por eso que hoy, le propongo en primer lugar descubrir recetas venidas de todos los continentes. </p>
				</div>
 
				<div id="contacto">
					<h5> Contacto </h5>
					<p>Fundador: X:</br> <a href="mailto:X@gmail.com">X@gmail.com</a></p>
				</div>
 
 
			<div id="categorias">
				<h5> Categorias </h5>
				<ul class="left">
					<li> <a href="historia.html"> Historia </a> </li>
					<li> <a href="america.html"> América </a> </li>
					<li> <a href="europa.html"> Europa </a> </li>
					<li> <a href="africa.html"> Africa </a> </li>
					<li> <a href="asia.html"> Asia </a> </li>
					<li> <a href="oceania.html"> Oceania </a> </li>
				</ul>
			</div>
 
			<div class="Fb">
				<a href="https://www.facebook.com/CocinaMundo?fref=ts"><img src="fb.jpg" width="40" height="40"/></a>
			</div>
 
			<div class="google">
				<a href="https://plus.google.com"><img src="gplus.png" width="40" height="40" /></a>
			</div>
 
			<div class="twitt">
				<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @twitter</a>
				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
			</div>
 
			</div>
		</footer>
 
		</div>
	</div>	
</body>
 
</html>

J'ai aussi remis mon padding: 0 0.5em; tout est ok sur Chrome, mais plus sur les autres navigateurs. Je vous laisser checker cela.

25/06/2014, 11h27
Bovino

Citation:

par contre aucun changement pour Chrome..

Je t'avoue que j'ai un peu du mal à comprendre où se situe ton problème... :koi:
Tu parle de scrollbar, mais je ne vois pas le rapport et dans le site en ligne, je ne vois pas de différence entre Chrome et Firefox...
Tu es sûr d'avoir regardé en vidant le cache du navigateur (CTRL + F5) ?
25/06/2014, 11h41
roro54

1 pièce(s) jointe(s)

Hum, j'ai testé sur 3 pc différents et j'obtiens sur Firefox et IE :

Pièce jointe 149642

Idem en ayant vidé le cache.