Mes rubriques du menu n'apparaissent pas

**Msysteme** · 12/12/2014, 13h37

Bonjour, j'ai pris le code de source d'une page internet et je voulais suivre le meme design du menu(a l'aide de son code source), mais il y a une erreurs qui m'�chappe :

menu :

Code html :

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
<div class="menu-top">
    <div class="menu-rubrique cb">
        <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="javascript:;">Accueil 1</a>
                <ul>
	            <li><a href="javascript:;" class="MenuBarItemSubmenu">ac 1</a>
                        <ul>
                            <li><a href="#">ac11</a></li>
                            <li><a href="#">ac12</a></li>      
                        </ul>
                    </li>
                    <li><a href="#">ac2</a></li>
                </ul>
            </li>
            <li class="sepmenutop"><a href="javascript:;"><img border=0 src="Images/separ_menu-central.gif" alt=""  /></a> </li>
            <li><a href="javascript:;">Accueil 2</a>
                <ul>
                    <li><a href="#">Acc2</a></li>
                    <li><a href="#">Acc2</a></li>
                </ul>
            </li>
            <li class="sepmenutop"><a href="javascript:;"><img border=0 src="Images/separ_menu-central.gif" alt=""  /></a> </li>
            <li><a  href="javascript:;">Stations de services</a>
                <ul>
                    <li><a href="#">ss1</a></li>
                    <li><a href="#">ss2</a></li>
                </ul>
            </li>
            <li class="sepmenutop"><a href="javascript:;"><img border=0 src="Images/separ_menu-central.gif" alt=""  /></a> </li>
            <li><a href="javascript:;">Carri�res</a>
                <ul>
	            <li><a href="#">c1</a></li>
                    <li><a href="#">c2</a></li>
                    <li><a href="#">c3</a></li>
                </ul>
            </li>
            <li class="sepmenutop"><a href="javascript:;"><img border=0 src="Images/separ_menu-central.gif" alt =""  /></a> </li>
            <li><a href="javascript:;">Terrains</a>
                <ul>
	            <li><a href="#">t1</a></li>
                    <li><a href="#">t2</a></li>
                    <li><a href="#">t3</a></li>
                </ul>
            </li>
            <li class="sepmenutop"><a href="javascript:;"><img border=0 src="Images/separ_menu-central.gif"  alt="" /></a> </li>
            <li><a href="javascript:;">Occupations divers</a>
                <ul>
	            <li><a href="#">o1</a></li>
                    <li><a href="#">o2</a></li>
                    <li><a href="#">o3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

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
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
.sepmenutop a
{
	background:none !important;
}
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 11px;
	cursor: default;
	width: 632px;
	vertical-align: text-top;
	padding-top:6px;
	margin-left:20px;
 
 
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;	
	list-style-type: none;
	font-size: 11px;
	position: relative;
	text-align: left;
	cursor: pointer;	
	float: left;
	line-height:32px;
	margin-top:-9px;
	margin-right:37px;
}
 
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding-left: 4px;
	padding-top: 8px;
	padding-bottom:4px;
	list-style-type: none;
	font-size: 11px;
	z-index: 1020;
	cursor: default;
	width: 160px;
	position: absolute;
	left: -1000em;
	text-align:left;
 
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li 
{
	width: 220px;
	margin-bottom:1px;
    background-image:url('/PublishingImages/bg_menuh1.gif');
	padding-bottom:0px;	
	line-height:27px;
	border:1px solid #e3e3e3;
    color:#8b8b8b;
}
ul.MenuBarHorizontal ul li ul li
{
	width: 340px;
	margin-bottom:1px;
    background-image:url('/PublishingImages/bg_menuh1.gif');
	padding-bottom:0px;	
	line-height:27px;
	border:1px solid #e3e3e3;
    color:#8b8b8b;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: 0% 0 0 214px;
	}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}
 
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	/*border: 1px solid #859215;*/
	border-radius:10px;
 
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	color:#4c75a7;
	height:28px;
	font-family:arial;
	font-size:11px;
	padding-top:4px;
	font-weight:bolder;	
	padding-bottom:4px;
	padding-left:4px;
}
/* hover links */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
 
	color:#3b3b3b;
	font-weight:bold !important;
 
}
/* HOVER LIENS UL LI */
 ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{	
	color: #11abc6;
	font-weight:bold !important;
 
 
}
 
ul.MenuBarHorizontal a.MenuBarItemHover
{
		 background-image:url('/PublishingImages/bg_menuh2.gif');
	font-weight:bolder !important;
		line-height:27px;
}
/**sous menu links *****/
ul.MenuBarHorizontal ul li a
{
 
 
	color: #8b8b8b;
	font-weight:bolder !important;
	text-transform: capitalize;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
 
 
 
 
}
 
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	/*background-image: url(SpryMenuBarDown.gif);*/
	background-repeat: no-repeat;
	background-position: 95% 50%;
 
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	/*background-image: url(SpryMenuBarRight.gif);*/
	background-repeat: no-repeat;
	background-position: 95% 50%;
 
 
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
 
}
 
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		color:#FFF;
		padding:0px;
 
	}
}

Mes sous rubriquen'apparaissent pas, j'ai uniquement la premiere lignes (accueil 1, accueil 2.....)

veuillez m'aider

**NoSmoking** · 12/12/2014, 14h37

Bonjour,
normal c'est ce qui est demandé dans le CSS, left: -1000em;, et comment fais tu pour les faire apparaître, il n'y à rien dans le CSS !?!

**Msysteme** · 12/12/2014, 18h30

Nom : menu.jpg
Affichages : 89
Taille : 23,1 Ko

j ai essayé de modifier j ai reussi de s approcher de ce que je veux sauf que j ai des espace que je je n ai pas reussi a supprimer(pj).

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
body 
{
    background-image: url('../Images/noise7.jpg');
    font: 12px Arial, sans-serif;
	color: #666;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
/*******************fin body***********************/
/*******************début container***********************/
#Container
{
    margin-left : auto;
    margin-right : auto;
    width : 960px;
    margin-top : 20px;
    box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    background: #fff;
}
/*******************fin container***********************/
/*******************début supheader***********************/
#SupHeader
{
    width : 960px;
    height : 30px;
    background: #345173;
}
 
/*******************fin subheader***********************/
/*******************début header***********************/
#Header
{
    width : 960px;
    height : 123px;
    background: #fff;
    background-image : url('../Images/entete.jpg');
} 
/*******************fin header***********************/
/*******************début menu***********************/
/* partie positionnement et déco */  
#Menu
{
    width : 960px;
    margin-top : 0px;
} 
 
#menu a {   
    display:block;   
    color: #fff;   
    text-decoration:none;  
    color: #6487b2;
    font-family:arial;
    font-size : 11px;
    }  
#menu > li,  
#menu > li li {  
    position: relative;  
    display:inline-block;  
    width:112px;  /*110px*/
    padding: 6px 15px;  
    background-color: #f0f0f0;  
}  
#menu > li li { background: transparent none; }  
#menu > li li a { color: #6487b2; }  
#menu > li li:hover { background:#ddd; }  
#menu > li:first-child {  
    border-right: 1px solid #e3e3e3;  
}  
#menu > li + li {  
    border-left: 1px solid #e3e3e3;  
    border-right :1px solid #e3e3e3;  
}  
#menu > li:last-child {  
    border-right:1px solid #e3e3e3;  
    border-left: 1px solid #e3e3e3;    
}  
#menu > li:hover {  
    background-color: #3399CC;  
    background-image: linear-gradient(#3399CC,#fff);
}  
/* (presque) fin de la partie positionnement/déco */  
/* dans cette déclaration, on fixe le max-height */  
#menu ul {  
    position: absolute;  
    top: 2em; left:0;  
    max-height:0em;   
    margin:0; padding:0;  
    background-color:#33CCFF;  
    background-image: linear-gradient(#fff,#ddd);  
    overflow:hidden;  
    transition: 1s max-height 0.3s;  
 
}  
/* ici on change la valeur de max-height au :hover */  
#menu > li:hover ul {  
    /* need an adaptation, lower is better, but see it large    */  
    max-height:13em;  
} 
 
 
/*******************fin menu***********************/
/*******************début contenent***********************/
#Contenent
{
    width : 960px;
    height : 500px;
    float : left;
    background: #fff;
    margin-top : 0;
}
/*******************fin contenent***********************/
 /*******************début footer**************/
#Footer
{
    clear:both;
    width : 960px;
    height : 100px;
    float : left;
    background-color :  #345173;
}

Code html :

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
125
126
127
128
129
130
131
<body>
    <form id="f_master" runat="server">
    <div id = "Container"><!--Début container -->
        <div id ="SupHeader"></div><!--fin sup header-->
        <div id ="Header"></div><!--fin header-->
        <div id ="Menu"><!--Début menu -->
                <ul id="menu">  
                    <li><a href="#"><b>Accueil 1</b></a>  
                        <ul>  
                            <li><a href="#">Level 1.1</a></li>  
                            <li><a href="#">Level 1.2</a></li>  
                        </ul>  
                    </li>
                    <li><a href="#"><b>Accueil 2</b></a>  
                        <ul>  
                            <li><a href="#">Level 2.1</a></li>  
                            <li><a href="#">Level 2.2</a></li>  
                            <li><a href="#">Level 2.3</a></li>  
                            <li><a href="#">Level 2.4</a></li>  
                        </ul>  
                    </li>
                    <li><a href="#"><b>Stations de services </b></a>  
                        <ul>  
                            <li><a href="#">Level 3.1</a></li>  
                            <li><a href="#">Level 3.2</a></li>  
                            <li><a href="#">Level 3.3</a></li>  
                        </ul>  
                    </li> 
                    <li><a href="#"><b>Carrières </b></a>  
                        <ul>  
                            <li><a href="#">Level 3.1</a></li>  
                            <li><a href="#">Level 3.2</a></li>  
                            <li><a href="#">Level 3.3</a></li>  
                        </ul>  
                    </li> 
                    <li><a href="#"><b>Terrains </b></a>  
                        <ul>  
                            <li><a href="#">Level 3.1</a></li>  
                            <li><a href="#">Level 3.2</a></li>  
                            <li><a href="#">Level 3.3</a></li>  
                        </ul>  
                    </li> 
                    <li><a href="#"><b>Occupations Divers </b></a>  
                        <ul>  
                            <li><a href="#">Level 3.1</a></li>  
                            <li><a href="#">Level 3.2</a></li>  
                            <li><a href="#">Level 3.3</a></li>  
                        </ul>  
                    </li> 
 
                </ul> 
        </div>
<!--fin menu-->
        <div id = "Contenent">
        <asp:ContentPlaceHolder id="ContentHolder" runat="server"></asp:ContentPlaceHolder>
    </div> <!-- fin Contenet -->
		<div class="met-footer"><!-- Debut footer -->
              <!-- Lien plan site -->
              <a href="" onclick="shows(R);"><div class="link-plan-site"></div></a>
 
               <!-- Contenu du footer -->
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="cont-footer">
  	    <div class="cont-footer">
                <!-- Top footer -->
                <div class="top940"></div>
 
	            <!-- Centre footer -->
                 <div class="center940">
    	            <div class="footer-blocks">
        	            <div class="newsletters">
            	            <ul>
                	            <li class="newsletter-title">NEWSLETTER</li>
                                <li class="newsletter-desc">Nouveautés !</li>
                            </ul>
                        </div>
                        <div class="profil">
            	            <ul>
                	            <li class="profil-title">PROFIL</li>
                                <li class="profil-link"><span>Société civile</span></li>
                                <li class="profil-link"><span>Professionnel</span></li>
                                <li class="profil-link"><span>Les élus</span></li>
                            </ul>
                        </div>
                        <div class="reseau-social">
            	            <ul>
                	            <li class="rs-title">Suivez nous sur :</li>
                                <li><a href=""><img border="0" src="Images/btn_facebook-pp.png" width="29" height="29"/></a></li>
                                <li><a href="javascript:;"><img border="0" src="Images/btn_twitter-pp.png" width="29" height="29"></a></li>
                                <li><a href="javascript:;"><img border="0" src="Images/btn_youtube-pp.png" width="29" height="29"></a></li>
                            </ul>
                        </div>
 
                        <div class="profil">
            	            <ul>
                	            <li class="profil-title">INFORMATIONS UTILES</li>
                                <li class="profil-link"><span>Infomrtaion 1</span></li>
                                <li class="profil-link"><span>Infomrtaion 2</span></li>
                                <li class="profil-link"><span>Infomrtaion 3</span></li>
                            </ul>
                        </div>
 
 
                       <div class="tableauplan"></div> 
                    </div>
                </div>     
                <!-- Bottom footer -->
                <div class="bottom940">
                    <div class="footer-links">
                        <ul>
            	            <li><a href="/">Accueil</a></li>
                            <li><a href="/">FAQ</a></li>
                            <li><a href="/">Recherche</a></li>
                            <li><a href="/">Plan du site</a></li>
                            <li class="last-footer-links"><a>Contacter nous</a></li>
                        </ul>	
                    </div>
                </div>
         </div>
 
              <!-- Copyright footer -->
              <div class="footer-copyright">
  		            <span>© 2013 Tous droits réservés.</span>
              </div>
        </div>
<!-- Fin footer -->
 
</div>
    </div><!-- fin container -->
 
    </form>
</body>

**NoSmoking** · 13/12/2014, 14h33

Au lieu d'avoir un display:inline-block; sur tes LI affecte leur un float:left;.

**Msysteme** · 15/12/2014, 11h19

bonjour, merci pour la reponse mais ca n'a pas resolu mon probleme completement

L'espace en bas est supprimé quand j'ai ajouté le float : left mais a gauche et a droite et en haut n'a pas été supprimé

**Msysteme** · 15/12/2014, 12h30

J'ai réussi à supprimer l'espace en bas, mais celui a gauche et a droite non mon menu ne prend pas la largeur voulu 960px, je ne sais pas pourquoi ???

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
#Menu
{
    width : 960px;
    margin-top : 0px;background: #fff;
}
#menu a {   
    display:block;   
    color: #fff;   
    text-decoration:none;  
    color: #6487b2;
    font-family:Times New Roman;
    font-size : 13px;
    /*float: left;*/
    } 
#menu > li,  
#menu > li li {  
    position: relative;  
    display:inline;  
    float:left;
    width:120px;  /*110px*/
    padding: 7px 15px;  
    background-color: #f0f0f0;  
}
#menu > li li { background: transparent none; }  
#menu > li li a { color: #6487b2; }  
#menu > li li:hover { background:#ddd; }  
#menu > li:first-child {  
    border-right: 1px solid white;  
}  
#menu > li + li {  
    border-left: 1px solid white;  
    border-right :1px solid white;  
}  
#menu > li:last-child {  
    border-right:1px ;  
    border-left: 1px solid white;    
}  
#menu > li:hover {  
    background-color: #3399CC;  
    background-image: linear-gradient(#3399CC,#fff);
}  
/* (presque) fin de la partie positionnement/déco */  
/* dans cette déclaration, on fixe le max-height  */  
#menu ul {  
    position: absolute;  
    top: 2em; left:0;  
    max-height:0em;   
    padding:0;  
    background-color:#33CCFF;  
    background-image: linear-gradient(#fff,#ddd);  
    overflow:hidden;  
    transition: 1s max-height 0.3s;  
    margin-left:0px;margin-right:0px;
    margin:0;	
	width:auto;
}  
 
/* ici on change la valeur de max-height au :hover */  
#menu > li:hover ul {  
    /* need an adaptation, lower is better, but see it large    */  
    max-height:13em;  
}

Mes rubriques du menu n'apparaissent pas

CSS

Vue hybride

Discussions similaires

Partager

Partager