Discussion :

[kervano]

Bonjour,

Je tourne sous oscommerce et j'ai installé une contribution me permettant d'avoir un menu dynamique qui utilise le css.
Pour le moment je n'ai qu'une sous catégorie dans la rubrique "complément" afin de faire un test.

css provenant de ce site :

http://www.htmldog.com/articles/suck...le/bones3.html

Ayant un niveau de css de proche du zéro, je souhaiterai obtenir ce type de résultat :

http://www.htmldog.com/articles/suck...pdowns/example

Par défault vous pouvez constater que le menu devient orange au passage de la souris, et ne possède pas de séparation.

voici mon code 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
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}
 
#nav a {
	display: block;
	width: 10em;
}
 
#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}
 
#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
 
#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: 10px;
}
 
 
/* Menu items with subcategories */	
#nav a.daddy {
 
}
 
/* Selected items with subcategories */	
#nav li.selected {
    background-color: #FFCC00;
}

[Momodedf]

Heu c'est quoi ta question en fait ?

Personne ici ne fera ton css clé en main pret à l'emploi.
Essaye de plonger un peut les main dans le tas, de te documenter sur le net et si aprés avoir cherché dans la FAQ et fait des recherches sur google, reviens nous voir.

[kervano]

de te documenter sur le net et si aprés avoir cherché dans la FAQ et fait des recherches sur google, reviens nous voir.

Justement si je me permet de poster c'est que je n'ai pas trouver de solution, j'ai cherché sur google et lu la FAQ, j'ai aussi fait un copier-coller de la source du code de demo, mais cela ne me donne pas le même résultat... si quelqu'un pouvait au moin me donner un début de piste, cela sera sympa

[Momodedf]

Le probleme c'est que tu as effectivement recopier le code HTML de l'exemple mais pas le CSS (du moins que partielement).

Du coup sans CSS complet ben ta mise en page n'est pas complete.

Voici le CSS de la source que tu as donnée :

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
<style type="text/css">
 
body {
	font: 78%/1.5 arial, helvetica, serif;
	background: white url(bgbaba.gif);
	text-align: center;
	padding: 0;
	margin: 2em;
}
 
#container {
	width: 36em;
	background: #F4ECD9;
	text-align: left;
	border: 1px solid #eda;
	margin: 0 auto;
}
 
p {
	background: url(remorabg.gif) center no-repeat;
	margin: 1em 2em;
}
 
p#smurf {
	background: transparent;
	font-style: italic;
	text-align: center;
	font-weight: bold;
	color: #7C6240;
}
 
#smurf strong {
	font-size: 1.2em;
	color: black;
}
 
h1 {
	height: 108px;
	background: url(perciformes3.gif) bottom center no-repeat;
	text-indent: -999em;
	margin: 1em 0 0 0;
}
 
#nav, #nav ul {
	float: left;
	width: 36em;
	list-style: none;
	line-height: 1;
	background: white;
	font-weight: bold;
	padding: 0;
	border: solid #eda;
	border-width: 1px 0;
	margin: 0 0 1em 0;
}
 
#nav a {
	display: block;
	width: 10em;
	w\idth: 6em;
	color: #7C6240;
	text-decoration: none;
	padding: 0.25em 2em;
}
 
#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}
 
#nav li {
	float: left;
	padding: 0;
	width: 10em;
}
 
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
}
 
#nav li li {
	padding-right: 1em;
	width: 13em
}
 
#nav li ul a {
	width: 13em;
	w\idth: 9em;
}
 
#nav li ul ul {
	margin: -1.75em 0 0 14em;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}
 
#nav li:hover, #nav li.sfhover {
	background: #eda;
}
 
#content {
	clear: left;
}
 
#content a {
	color: #7C6240;
}
 
#content a:hover {
	text-decoration: none;
}
 
#scaffolding {
	height: 70px;
	background: white url(/images/header_bg.gif) no-repeat;
	border: solid #eda;
	border-width: 1px 0 0 0;
	margin: 1em 0 0 0;
}
 
#scaffolding a {
	text-decoration: none;
	text-indent: -999em;
	display: block;
	height: 70px;
	background: url(/images/hdlogo_flip2.gif) no-repeat;
	background-position: 181px 0;
}
 
#scaffolding a:hover {
	background-position: 181px -70px;
}
 
</style>

[kervano]

Pardonne moi mais comment dois je faire pour avoir le code du css en entier?

[Momodedf]

>_<'

Je te l'ai mis dans mon post juste au dessus ....