Discussion :

[fly_in_the_sky]

Bonjour,
Je développe un site web avec un menu déroulant horizontal.
J'ai voulut mettre une image pour donner une forme au boutons du menu. Le menu s'affiche correctement sur toute les pages principales de mon site. Jusque là tout va bien.
Le problème c'est que lorsque je suis sur une sous page de mon site (ex: /société/qui-sommes-nous) et bien le menu n'affiche plus l'image sélectionner pour le menu et le menu devient tout blanc sans prendre la couleur de fond de secour.




Voici le code que css que j'ai rajouter dans la zone "rajout rapide de css de mon thème"

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
#main-navigation-wrapper {
    background: none repeat scroll 0 0 #438FC6;
    background: url(../wp-admin/images/bg_light_blue.png) repeat-x 100% 0;
    border-bottom: 1px solid #D60606;
    border-top: 1px solid #D60606;
    margin-left: -30px;
    position: relative;
    width: 990px;
    z-index: 9999;
}
#nav li a {
    color: #ECF0C0;
    display: block;
    float: left;
    font-size: 11px;
    font-weight: 700;
    margin-top: -1px;
    padding: 8px 26px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s linear 0s;
}
#nav li.sfHover a {
    background-color: #A99EE6;
}
#header-separator {
    background: none repeat scroll 0 0 #644BF2;
    border-top: 1px solid #644BF2;
    height: 5px;
    margin-bottom: 0;
    margin-top: 0;
}

J'ai déjà éssayé de mettre le code dans #nav li a {
Mais alors j'ai le problème que l'image se répète à l'interieur de menu déroulant. et quand je suis dans une page secondaire, les image ne s'affiche pas non plus, mais par contre elles prennent la couleur de secour.


Que puis je faire ?

Merci d'avance

[NoSmoking]

Bonjour,

Que puis je faire ?

vérifie que tu n'as pas un problème de chemin d’accès à ton image à partir du fichier actif.

[fly_in_the_sky]

J'ai coller tout le code car avec mon peux de connaissance, je ne trouve d'où vient l'erreur : c'est le code qui s'affiche quand je sélection

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#main-navigation-wrapper

avec firebug

le premier code c'est quand tout va bien et le deuxième code quand je perd l'image du menu.

Voici mon code quand tout va bien.

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
.clearfix:after, .clearfix:before {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}
.clearfix:after {
    clear: both;
}
.clearfix:after, .clearfix:before {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}
#main-navigation-wrapper {
    background: url("../wp-admin/images/bg_light_blue.png") repeat-x scroll 100% 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid #D60606;
    border-top: 1px solid #D60606;
    margin-left: -30px;
    position: relative;
    width: 990px;
    z-index: 9999;
}
#main-navigation-wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
    margin-left: -30px;
    position: relative;
    width: 990px;
    z-index: 9999;
}
.clearfix {
}
body, body *, html, p {
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
body, input, textarea {
    color: #656565;
    font: 12px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
}
body, html {
    line-height: 1;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
body, html {
    line-height: 1;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}

Et mon code quand je suis sur une sous page et que le menu a perdu son image de fond.
Et pourtant dans la balise main-navigation-wrapper , il n'a pas l'aire d'avoir perdu l'image.

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

.clearfix:after, .clearfix:before {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}
.clearfix:after {
    clear: both;
}
.clearfix:after, .clearfix:before {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}
#main-navigation-wrapper {
    background: url("../wp-admin/images/bg_light_blue.png") repeat-x scroll 100% 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid #D60606;
    border-top: 1px solid #D60606;
    margin-left: -30px;
    position: relative;
    width: 990px;
    z-index: 9999;
}
#main-navigation-wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
    margin-left: -30px;
    position: relative;
    width: 990px;
    z-index: 9999;
}
.clearfix {
}
body, body *, html, p {
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
body, input, textarea {
    color: #FFFF00;
    font: 12px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
}
body, html {
    line-height: 1;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}
body, html {
    line-height: 1;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    font-size: 100%;
}

[fly_in_the_sky]

C'est bon , j'ai remplacé l'adresse du boutton par un lien http:// ... bouton et du coup cela fonctionne.
merci