Discussion :

[tamiii]

Bonjour,

Je travaille actuellement sur l'intégration d'un site internet basé sur le cms ezpublish. A mon arrivée, le cms était déjà "designé" donc je n'ai eu besoin que de m'occuper du contenu.
Cependant, ce design était compatible IE6 et non Firefox & IE7.
En effet, le menu de gauche, contenant les titre de chaque "noeud" du site (rubrique), contient aussi les noeuds enfants de chaque noeud cliqué (sous rubrique).

Ci-joint à ce post, l'aspect graphique de mon problème (2 screenshots) :
lorsqu'on clique sur une rubrique (appelons la <rubrique 1>) dans le menu, les sous-rubriques associées doivent s'afficher sous la <rubrique 1> cliquée. Sauf que dans mon cas, les sous rubriques s'affichent SUR (se superposent) les rubriques placées en dessous de ma <rubrique 1>.

Voici le code CSS associée à mon menu de gauche :

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
 
a.menu-level-selected:hover,a.menu-level-selected:selected,a.menu-level-selected:visited  { color:#d47010; 	background-repeat:no-repeat; background-image:url(../images/leftmenu/level0-hover.gif); font-weight:normal; ; }
 
.menu-level-0 { }
.menu-level-1 { font-weight:normal;   }
 
div#leftmenu ul, div#rightmenu ul{    list-style-type: none;  margin-bottom:0px; }
 
div#leftmenu ul li, div#rightmenu ul li{  padding:0; height:31px; }
 
div#leftmenu li a, div#rightmenu li a
	{    
	background-repeat:no-repeat; background-image:url(../images/leftmenu/level0.gif);
	display: block;
	height:31px;
	padding:0px 0 0 35px;
	margin:0 -35px -0px 0 ;
	text-decoration:none;
	font-weight:bold;
	}
 
 
div#leftmenu li a:visited, div#rightmenu li a:visited
	{    
	background-repeat:no-repeat; background-image:url(../images/leftmenu/level0.gif);
	display: block;
	height:31px;
	padding:0px 0 0 35px;
	margin:0 -35px -0px 0 ;
	text-decoration:none;
	font-weight:bold;
	}
 
 
 
div#leftmenu li a:hover, div#rightmenu li a:hover 
	{    
	background-repeat:no-repeat; background-image:url(../images/leftmenu/level0-hover.gif);
	display: block;
	height:31px;
	padding:0px 0 0 35px;
	margin:0 -35px -0px 0 ;
	text-decoration:none;
	color:#d47010;
	}	
 
/*div#leftmenu li {    background-repeat: no-repeat;  margin-bottom:0px;display: block; }*/
 
div#leftmenu div#content-tree li a, div#rightmenu div#bookmarks li a, div#rightmenu div#bookmarks li span.disabled, div#leftmenu li.nobullet a{    background-image: none;    padding-left: 0;    display: inline; }
 
div#leftmenu{    float: left; }
 
/*div#leftmenu-design{    margin: 0.5em 0.1em 0 0.5em;}*/
 
div#leftmenu div.box-header, div#rightmenu div.box-header{    background-image: url(../images/menuheader-background.gif);    background-repeat: repeat-y;    background-color: #8a9fb6;    border-bottom: 1px solid #bfbfb7;}
 
div#leftmenu div.box-header h4, div#rightmenu  div.box-header h4{    color: #ffffff;    margin: 0;         white-space: nowrap;}
 
div#leftmenu h5, div#rightmenu h5{    color: #000000;    background-color: #BABAAD;      white-space: nowrap;}
 
div#leftmenu div.box-tc, div#rightmenu div.box-tc, div#maincontent div.box-tc{    background-image: url(../images/box-edge.gif);    background-position: top;    background-repeat: repeat-x;}
 
div#leftmenu div.box-bc, div#rightmenu div.box-bc{    background-image: url(../images/box-bc.gif);    background-position: bottom;    background-repeat: repeat-x;    background-color: #fefefb;    margin-bottom: 0.5em;}
 
div#leftmenu div.box-ml, div#rightmenu div.box-ml{    background-image: url(../images/box-edge.gif);    background-position: left;    background-repeat: repeat-y;}
 
div#leftmenu div.box-mr, div#rightmenu div.box-mr{    background-image: url(../images/box-edge.gif);    background-position: right;    background-repeat: repeat-y;}
 
div#leftmenu div.box-tl, div#rightmenu div.box-tl{    background-image: url(../images/box-tl.gif);    background-position: top left;    background-repeat: no-repeat;
}
 
div#leftmenu div.box-tr, div#rightmenu div.box-tr{    background-image: url(../images/box-tr.gif);    background-position: top right;    background-repeat: no-repeat;}
 
div#leftmenu div.box-bl, div#rightmenu div.box-bl{    background-image: url(../images/box-bl.gif);    background-position: bottom left;    background-repeat: no-repeat;}
 
div#leftmenu div.box-br, div#rightmenu div.box-br{    background-image: url(../images/box-br.gif);    background-position: bottom right;    background-repeat: no-repeat;}
 
div#leftmenu div.translations label{    font-weight: normal;    white-space: normal;}

Les titres des rubriques sont associés à la classe menu-level-0 tandis que les sous-rubriques à menu-level-1.

Toute indication sera grandement appréciée

D'avance merci & bonne journée !

[tamiii]

Il suffisait de décommenter les 2 lignes commentées dans le code que j'ai posté. Aussi, placer "display:inline;" au lieu de "display:block;" dans le premier commentaire.

Bonne journée !