Largeur qui dépend du navigateur

Bonsoir,

mon souci est que j'intègre un menu dans mon site, dont la largeur dépend du navigateur : correcte sous IE8 mais bien trop grande sous Firefox ou Google Chrome. Le site est fait en html5 et voici mon code :
Code:

1 2 3 4 5 ... <nav> <?php include("../menu3.php"); ?> </nav> ...
et
Code:

1 2 3 4 5 nav { ... width: 1500px; ... }
avec
Code:

1 2 3 4 <ul id="nav"> <li ><a href="../accueil/accueil.php">Accueil</a></li>  ... <ul>

1500px ...

Et donc ? Quel est le problème ?

Salut,
Je ne jamais faire width: 1500px; utilises plutôt width: 100%; ou alors des media queries.

Citation:

Envoyé par Micmaya

Salut,
Je ne jamais faire width: 1500px; utilises plutôt width: 100%;...

Pourquoi ?

Il faut savoir que si je mets moins que 1500 pixels (par exemple 1400), le menu passe sur 2 lignes et pareil si je mets 100%...

J'ai simplifié le niveau 1 du menu (à l'aide de regroupements), ce qui m'a permis de réduire la largeur (je passe de 1500 à 800). Je me disais que le souci était peut-être lié à cette grande largeur...mais le problème reste...Que puis-je tenter ?
Micmaya a parlé des media queries mais je vois pas ce que ça peut apporter...

Comme dit Bisûnûrs: quel est le problème?

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Menu sans problème</title>
  <style type="text/css">
nav {
  width: 1500px;
  max-width: 100%;
  background: red;
}
ul {
  padding: 0;
}
li {
  display: inline-block;
  margin: 1ex;
  padding: 1ex;
  background: white;
}
  </style>
</head>
<body>
<nav>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>more</li>
  <li>less</li>
</ul>
</nav>
</body>
</html>

Citation:

correcte sous IE8 mais bien trop grande sous Firefox ou Google Chrome

Ça par contre, c'est un problème, mais le peu d'infos donné n'aide pas :/

Le problème, c'est que ton menu a un seul niveau et qu'il m'en faut 3 : http://vercorshandisport.org.
Dans la discussion #1, j'indique comment je l'inclue avec du php, mais c'est vrai que le css et le html sont un peu courts...

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
body {
	font: normal 2em Arial, Helvetica, sans-serif;
	font-size : 1.2em;
	background:#ebebeb;
	margin: 100px auto;
	color: #666;
}
 
a {
	color: #333;
}
 
#nav {
	margin: 0;
	padding: 7px 6px 0;
	background: #7d7d7d;
	line-height: 100%;
	 border-radius: 2em;
}
 
#nav li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}
 
/* Liens menu principal */
#nav a {
	font-weight: bold;
	color: #e7e5e5;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
}
 
/* Menu principal lors du survol */
#nav .current a, #nav li:hover > a {
	background-color: #FFF;
	color: #444;
	border-top: solid 1px #F8F8F8;
}
 
/* Survol des sous-menus */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #666;
}
 
 
/* affichage du sous-menu-DIRECT au survol d'un lien */
#nav li:hover > ul {
	display: block;
}
 
/* style des listes de niveau 2 */
#nav ul {
	display: none;
	margin: 0;
	padding: 0;
	width: 200px;
	position: absolute;
	top: 35px;
	left: 0;
	background: #ddd;
	border: solid 1px #b4b4b4;
}
 
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
 
#nav ul a {
	font-weight: normal;
}
 
/* style des listes niveau 3 */
#nav ul ul  {
	left: 181px;
	top: 0px;
	border: solid 1px #b4b4b4; 
	/*max-height:360px;*/
}
 
#nav ul ul li:nth-child(n+5)
{
	background: #ddd;
	left: 195px;
	top: -160px;
}
 
#leclub ul li:nth-child(n+5)
{
	background: #ddd;
	left: 195px;
	top: -160px;
}
 
 
/* Remise en place du flux CSS */
#nav:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
 
nav {
z-index : 9999;
width:800px;
position:relative;
top:0;
left:0;
margin-left:auto;
margin-right:auto;
text-align:center;
}
 
header {
text-align:center;
}

l'affectation de la largeur du menu est faite ligne 118.

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
 
<ul id="nav">
  <li ><a href="../accueil/accueil.php">Accueil</a></li> <!-- n1 -->
 
<!--<li><a href="#">Photos</a>
	<ul>-->
  <li><a href="#">Photos</a>
	<ul >
        	<li><a href="#">Evénements</a>
			<ul>
				<li><a href="../arcon2012/arcon2012.php">Coupe de France Arçon 2012</a></li>
				<li><a href="../lafeclaz2012/lafeclaz2012.php">Coupe de France La Feclaz 2012</a></li>
				<li><a href="../chamonix2012/chamonix2012.php">Championnat de France Chamonix 2012</a></li>
			</ul>
		</li>
		<li><a href="#">Saison 2013/2014</a>
			<ul>
 
                		<li><a href="../lafeclaz/lafeclaz.php">Coupe de France La Feclaz</a></li>
				<li><a href="../stage2014/stage.php">Stage 2014</a></li>
				<li><a href="../fb/foulee_blanche.php">Foulée blanche</a></li>
				<li><a href="../cpf_autrans/finale_cpf.php">Finale Coupe de France Autrans</a></li>
				<li><a href="../velo_trieves/velo_trieves.php">Week-end de vélo dans le Trièves</a></li>
				<li><a href="../photos_thomas/photos_thomas.php">Thomas Dubois dans le Vercors</a></li>
				<li><a href="../tir/tir.php">Tir carabine laser</a></li>
				<li><a href="../panathlon/panathlon.php">Soirée Panathlon</a></li>
				<li><a href="../3becs/3becs_velorail.php">Week-end rando aux 3 becs et vélorail en Ardèche</a></li>
 
			</ul>
		</li>
		<li><a href="#">Saison 2012/2013</a>
 
			<ul>
				<li><a href="../mucoroue/mucoroue.php">Muco roue 2013</a></li>							
				<li><a href="../ambel/ambel.php">rando à Ambel</a></li>
				<li><a href="../canoe_drome/canoe_drome.php">canoë sur la Drôme</a></li>
				<li><a href="../peisey-nancroix-2013/pn-2013.php">coupe de France à Peisey-Nancroix</a></li>
				<li><a href="../stage-2013/stage-2013.php">stage 2013</a></li>
				<li><a href="../AG2013/AG2013.php">AG 2013</a></li>
				<li><a href="../sortie0501/sortie0501.php">sortie du 05/01</a></li>
				<li><a href="../rando_allieres/rando_allieres.php">Rando aux Allières</a></li>
				<li><a href="../ski_roue/ski_roue.php">Séance de ski-roue</a></li>
				<li><a href="../rando131410/rando131410.php">Rando des 13/14-10</a></li>
				<li><a href="../muco-roue-2012/muco-roue-2012.php">Muco roue 2012</a></li>
				<li><a href="../ja_2012/ja_2012.php">Journée d'accueil 2012</a></li>
			</ul>
		</li>
	</ul>
  </li>
 
  <li><a href="#">Vidéos</a>
	<ul>
		<li><a href="#">Saison 2013/2014</a>
			<ul>
				<li><a href="../video_finale_cpf_2014/video_finale_cpf_2014.php">Finale coupe de France 2014</a></li>
				<li><a href="../thomas/thomas.php">Thomas Dubois dans le Vercors</a></li>
			</ul>	
		</li>
		<li><a href="#">Saison 2012/2013</a>
			<ul>
				<li><a href="../video_tussac/video_tussac.php">Rando à Tussac 2013</a></li>
				<li><a href="../video_mucoroue/video_mucoroue.php">Muco-roue 2013</a></li>
				<li><a href="../video_ambel/video_ambel.php">Rando à Ambel</a></li>
				<li><a href="../video_canoe/video_canoe.php">Canoë la Drôme</a></li>
				<li><a href="../video_stage_2013/video_stage_2013.php">Stage</a></li>
				<li><a href="../video_ski_roue/video_ski_roue.php">Séance de ski-roue</a></li>
				<li><a href="../video_ja_2012/video_ja_2012.php">Journée d'accueil (décembre)</a></li>
 
 
			</ul>
		</li>
	</ul>
  </li>
  <li id="leclub"><a href="#">Le club</a><!-- n1 -->
	<ul>
		<li><a href="../pres/pres.php">Présentation</a></li>
		<li><a href="../vie_du_club/vie_du_club.php">Vie du club</a></li>
		<li><a href="../trombi2/trombi2.php">Trombinoscope</a></li>
		<li><a href="../contacts/contact.php">Bureau</a></li>
		<li><a href="../adhesion/adhesion.php">Adhésion</a></li>
		<li><a href="#">Calendriers</a>
        		<ul>
				<li><a href="../cal/Calendrier.pdf" target="_blank">Club</a></li>
				<li><a href="../cal/2010-2011_saison.xls" target="_blank">National</a></li>
			</ul>
		</li>
		<li><a href="../ecrire/ecrire.php">Nous écrire</a></li>
		<li><a href="../part/partenaires.php">Partenaires</a></li>
	</ul>
  </li>
 
 
 
  <li><a href="../liens/liens.php">Liens</a></li>
</ul>

Bonjour,

Citation:

#nav ul ul li:nth-child(n+5)

tu risques d'avoir des problèmes avec ton IE8.

Sur FireFox ton menu est une véritable "catastrophe", reviens peut être à du CSS plus simple.

PS: sur chrome c'est pas forcément meilleur :aie:

Ne me sentant pas à la hauteur pour faire ce menu tout seul, je me suis inspiré d'un autre menu ; je vais en essayer un autre.