Discussion :

[jinjha]

Bonjour!

Voilà, je suis professeur de musique et tiens un blog en lien avec la pédagogie musicale http://www.bouillondefm.com/
Pour faciliter la navigation sur mon blog j'ai décidé d'insérer un menu déroulant.
Pour se faire je l'ai créé sur "CSS Menu Maker". J'en ai choisi un avec 2 sous-menus.
Mon menu s'affiche sur 2 lignes... cela me convient car sans ça il serait beaucoup plus long que ma fenêtre principale. Mais les sous-menus ne s'ouvrent pas en 1er plan et sont donc illisibles.
Je sais bien que cela concerne la ligne
position : absolute ou relative
et la ligne
z-index qui ordonne tout ça.

J'ai essayé un grand nombre de changements, mais cette valeur se retrouve très souvent dans le code et je ne m'en sors pas.
Quelqu'un pourrait-il me donner un coup de main svp?

Voici le code html de mon 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
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
<p>&nbsp;</p>
<center>
    <img src="http://idata.over-blog.com/5/69/31/33/images-articles-2/banniereblog.gif" width="1300" height="120" alt="banniereblog.gif" />
  </center>
<p>&nbsp;</p>
<div id="cssmenu">
 
<ul>
<li>
        <a href="index.html"><span>Accueil</span></a>
      </li>
<li class="has-sub">
        <a href="#"><span>Contact et Infos</span></a>
 
<ul>
<li>
            <a href="#"><span>Infos diverses</span></a>
          </li>
<li class="has-sub">
            <a href="#"><span>Projets de l'&eacute;cole</span></a>
 
<ul>
<li>
                <a href="#"><span>Le fil de l'eau</span></a>
              </li>
<li class="last">
                <a href="#"><span>Sub Item</span></a>
              </li>
</ul>
</li>
</ul>
</li>
<li class="has-sub">
        <a href="#"><span>Les orchestres</span></a>
 
<ul>
<li>
            <a href="#"><span>Orchestre A</span></a>
          </li>
<li>
            <a href="#"><span>Orchestre B</span></a>
          </li>
<li>
            <a href="#"><span>Orchestre C</span></a>
          </li>
<li>
            <a href="#"><span>Orchestre D</span></a>
          </li>
<li>
            <a href="#"><span>Orchestre Adultes</span></a>
          </li>
<li class="last">
            <a href="#"><span>Atelier cr&eacute;ation</span></a>
          </li>
</ul>
</li>
<li class="has-sub">
        <a href="#"><span>Les instruments</span></a>
 
<ul>
<li>
            <a href="#"><span>Les claviers</span></a>
          </li>
<li>
            <a href="#"><span>Les cordes frott&eacute;es</span></a>
          </li>
<li>
            <a href="#"><span>Les cordes pinc&eacute;es</span></a>
          </li>
<li>
            <a href="#"><span>Les vents : Les bois</span></a>
          </li>
<li>
            <a href="#"><span>Les vents : les cuivres</span></a>
          </li>
<li class="last">
            <a href="#"><span>Les percussions</span></a>
          </li>
</ul>
</li>
<li class="has-sub">
        <a href="#"><span>Pour se d&eacute;tendre</span></a>
 
<ul>
<li>
            <a href="#"><span>Jeux</span></a>
          </li>
<li class="last">
            <a href="#"><span>Les curiosit&eacute;s du web</span></a>
          </li>
</ul>
</li>
<li>
        <a href="#"><span>Un peu de th&eacute;orie</span></a>
      </li>
<li class="has-sub">
        <a href="#"><span>Un peu de musique</span></a>
 
<ul>
<li>
            <a href="#"><span>La bo&icirc;te &agrave; artistes</span></a>
          </li>
<li>
            <a href="#"><span>Musique en Images</span></a>
          </li>
<li class="last">
            <a href="#"><span>Les grands classiques</span></a>
          </li>
</ul>
</li>
<li class="last">
        <a href="#"><span>Un peu d'histoire</span></a>
      </li>
</ul>
</div>

et le code CSS de ce même menu :

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
/* Starter CSS for Flyout Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 1;
  float: left;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  line-height: 1em;
  vertical-align: left;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 3;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 1px;
  left: 99%;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  top: 1px;
  left: 99%;
}
#cssmenu ul li {
  float: none;
}
#cssmenu ul ul {
  margin-top: 1px;
}
#cssmenu ul ul li {
  font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  color: #333333;
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  padding: 0 20px;
  text-align: center;
  text-decoration: none;
}
#cssmenu a:hover {
  background: #f6f6f6;
  border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  top: 0;
}
#cssmenu ul {
  background: #e5e5e5;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  list-style: none;
}
#cssmenu > ul {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWN4+vQpEwMDAxMDAwPT////4exBIgYA2loa5nAttNYAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #e5e5e5 0%, #dddddd 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e5e5), color-stop(100%, #dddddd));
  background: -webkit-linear-gradient(top, #e5e5e5 0%, #dddddd 100%);
  background: -o-linear-gradient(top, #e5e5e5 0%, #dddddd 100%);
  background: -ms-linear-gradient(top, #e5e5e5 0%, #dddddd 100%);
  background: linear-gradient(#e5e5e5 0%, #dddddd 100%);
  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
  padding-top: 5px;
  width: 100%;
}
#cssmenu > ul > li {
  float: left;
  padding: 0 10px;
  position: relative;
}
#cssmenu > ul > li:hover > a {
  background: #f6f6f6;
  border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}
#cssmenu > ul > li a {
  line-height: 35px;
}
#cssmenu > ul > li a:hover {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
#cssmenu .has-sub:hover ul {
  display: block;
}
#cssmenu .has-sub a {
  display: block;
  position: relative;
}
#cssmenu .has-sub > a:after {
  content: '';
  display: block;
  width: 10px;
  height: 9px;
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -5px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQjdBNUNENDkzMTExRTI4NENBRkFDOUM5MUY0QzI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRCQjdBNUNFNDkzMTExRTI4NENBRkFDOUM5MUY0QzI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEJCN0E1Q0I0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEJCN0E1Q0M0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4qSqkdAAAAtUlEQVR42nyOPQ6DMAyF3bSIKXeplGP0IL1EpU5dkZiQeoDegBt0ZO4BOjORABL5oX4RZCniDZbl99nPh6ZpjkR0pn19TlxclmW7lHOOANZSykue55uQtZbatiXBfdV1Hc3zvAnCY12FUqrm02Xf93/QOI40TdOLmadYZoUxhkIICUKC1hpthRJB3viy8ViMKCR470v23glcdB+GIT7PACEBSauZQN70eBrP4zIn3JC0+j8BBgCxDV02ZQEC4wAAAABJRU5ErkJggg==);
  -webkit-transform: rotate(360deg);
}
#cssmenu .has-sub ul {
  background: #f6f6f6;
  border: 1px solid #dddddd;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: none;
  padding: 10px 0;
  position: absolute;
  left: 50%;
  top: 34px;
  margin-left: -70px;
  width: 140px;
  z-index: 1;
}
#cssmenu .has-sub ul li:hover > a {
  background: #dddddd;
  color: #ae0001;
  border-color: #e5e5e5 transparent transparent transparent;
}
#cssmenu .has-sub ul a {
  line-height: 160%;
  padding: 8px 0;
}
#cssmenu .has-sub .has-sub a:after {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRkJGQzk4NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRkJGQzk5NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGQkZDOTY0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGQkZDOTc0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6DuTwoAAAAtUlEQVR42nyOsQ3CMBBFj4CVyktkAvZgEJZAoqKNoMoEjMAGzEDnhtKyGztxYzvmznIsIUX5kq2T/rv7fyeE2APAEbb1OeAXGGObVAgBCHxxzk9t265C3ntQSkGD82CMgZTSKkge6pwB7HmXUibn3N/TWif0nsQ0ZbEfxxHmea6XyLTW0jjQl8Gu675o3IqRNU0TxBgf6L0rWHTFuFweAaAESlrMCuJmpNJUni5jwoWSFv8nwAA0tXChxwneNwAAAABJRU5ErkJggg==);
  -webkit-transform: rotate(360deg);
}
#cssmenu .has-sub .has-sub ul {
  background: #dddddd;
  left: 100%;
  top: 0;
  margin-left: 0;
}
#cssmenu .has-sub .has-sub ul a {
  background: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
#cssmenu .has-sub .has-sub ul a:after {
  background-image: none;
}
#cssmenu .has-sub .has-sub ul a:hover {
  background: #bfbfbf;
}

Un grand merci d'avance!

[rodolphebrd]

Bonjour et bienvenue,

Avez-vous, à tout hasard, consulté la galerie CSS du forum ?

Difficile d'y voir clair dans votre code pas vraiment propre
Avec un clic droit non permis c'est peu avenant...

Le validateur le confirme d'ailleurs.

Il serait intéressant de placer votre balise de style CSS dans le HEAD.

Je regarde de plus près mais c'est une jungle qu'il faut traverser.

[jinjha]

Je comprends bien et suis consciente du "grand n'importe quoi" de mon code... je m'en excuse. Ca n'a pas été simple d'intégrer du css dans un blog "overblog".

[Invité]

Bonjour,
http://fdata.over-blog.net/99/00/00/...s.css?2.5.1.14

.cl {
overflow: hidden; /* A SUPPRIMER */
}

[rodolphebrd]

Bien vu jreaux62 j'étais en train d'envoyer la même réponse.

[jinjha]

moui...je veux pas faire ma blonde mais je trouve pas cette ligne dans les codes que je vous ai envoyé... Je la trouve ailleurs surement...

[Invité]

<link type="text/css" href="http://fdata.over-blog.net/99/00/00/01/csscombos/common,socialShare,ob-related,ob-blog-services.css?2.5.1.14" rel="stylesheet" />

Fichier ob-blog-services.css

[jinjha]

Je pense sincèrement et après avoir longuement cherché, ne pas avoir accès aux lignes de commande que vous me citez à partir de ma plateforme overblog (qui laisse peu de liberté de changement).
Je n'ai vraiment accès qu'aux codes que je vous ai copié précédemment concernant le menu déroulant et à celui-là concernant le design du blog en général :

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
#global {width: 1000px; background-color: transparent; margin: auto; margin-bottom: 15px;}
 
#cl_0_0 {margin: 0; padding: 0; width: 100%;}
#cl_1_0 {float: left; width: 600px;  margin: 0; padding: 25px 10px 0 10px; margin-left: 5px;}
#cl_1_1 {float: left; width: 300px; padding: 0; padding-top: 25px; margin: 0 5px;}
#cl_1_1 ul, #cl_1_1 ol {padding-left: 25px; margin-left: 0;}
 
 
.GcheTexte{float:left; margin:3px;}
.DrteTexte{float:right; margin:3px;}
.CtreTexte{margin:3px auto; display:block;}
.hitcitation {font-style:italic;text-align:justify;padding:5px 20px;background-color:#eee;}
.hitencart {border:1px solid black;text-align:justify;font-weight:bold;margin:5px 0px;padding:5px 5px;}
.hitimportant {font-weight:bold;color:red;font-weight:bold;font-size:120%;}
.hitperso1 {font-style:italic;}
.hitperso2 {font-weight:bold;}
 
#header {min-height: 120px; margin-bottom: 0;}
/*----------------------------------------------------------------------------*/
/* Variation                                                                  */
/*----------------------------------------------------------------------------*/
body {margin:0px; padding:0px; background-color: #F1EAE2; font-family: 'Trebuchet MS', 'Arial', Verdana, Helvetica; font-size: 12px; color:#4A3A2D; line-height: 18px;}
h1 {color: #CCCCCC; font-size: 20px;}
h2 {color: #CCCCCC; font-size: 15px;}
h3 {color: #CCCCCC; font-size: 12px;}
a {text-decoration: none; color:#713417; font-size:100%;}
a:hover {text-decoration: underline; color:#3E2312;}
legend {color:#CCCCCC; padding-left:5px; padding-right:5px;}
img {border:0px none;}
.button {background-color: #2a4345; height: 100%; border: 0; color: #fff;}
 
#ln_1 {/height: 1%; background-color: #bda28d; border: 8px solid #d3c9c0; border-bottom: 0;}
#cl_2_0 {border: 8px solid #d3c9c0; border-top: 0; background-color: #bda28d; height: 100px; /line-height: 15px;}
 
/* ------------------entete ---------------------*/
#top {padding:0px; color:#713417; font-size: 12px; background-color:transparent; text-align: left; padding-top: 50px; padding-left: 0px; font-style: normal; line-height: 23px; /line-height: 25px;}
#top h1 {padding:0px; margin:0px; color:#713417;}
.topLien {text-decoration:none; color:#713417;}
.topLien:hover {text-decoration:underline; color:#713417;}
#top a {color: #713417; font-size: 10px; text-decoration: none; font-weight: bold; font-style: normal;}
#top img {margin: auto; padding: 0px;}
 
/*-------------------module--------------------------*/
 
.box {margin:0px; padding: 0px; margin-bottom: 25px;}
.box a {color: #713417; text-decoration: none;}
.box a:hover {text-decoration: underline; color: #3E2312;}
.box h2 {font-size: 18px; background-color: #D3C9C0; margin: 5px; margin-bottom: 10px; padding: 8px; text-transform: capitalize; color:#3E2312; font-weight: normal; line-height: 20px;}
.box-titre { padding:0px;}
.box-footer {display:none;}
.box-content {overflow:auto; padding:2px 5px; color:#4A3A2D;}
.box-content p {margin:5px 0px 5px 0px; padding:0px; color:#4A3A2D;}
.box-content ul {margin:5px 0px 5px 0px; padding:0px; color:#4A3A2D;}
.box-content li {list-style: none; color:#4A3A2D; margin:5px 0; padding:0px;}
.listAll{display:block; text-align:right;}
.text li, .lien li,   .articlerecent li, .micropayment li, .micropayment li, .commentrecent li, .categorie li {min-height: 20px; padding: 3px 0 2px 0px; line-height: 14px; /line-height: 15px;}
.commentrecent li {min-height: 35px;}
.imgAndText li {width: 150px; float: left; height: 100px;}
.recherche .box-content, .newsletter .box-content {text-align: center;}
.pub h2 {display: none;}
.pub .box-content {margin: 0 0 0 0px;}
.pub {border: 0; background-color: transparent;}
.article_navigation {line-height: 14px;}
 
 
/*------------------- Articles ----------------------------------*/
 
.article, .page {margin-top:0px; color:#4A3A2D; text-align: justify; font-size: 12px; margin-bottom: 25px;}
.article p, .page p {margin:0px;}
.contenuArticle, .pageContent {padding: 10px;}
.afterArticle, .afterPage {color:#3E2312; margin-top: 15px; font-weight: normal; text-transform: uppercase;}
.plusExtrait a, .afterArticle a {font-size: 11px; text-decoration: underline; color:#3E2312; padding: 0 3px; font-weight: bold; font-style: normal; text-transform: uppercase;}
.plusExtrait a:hover, .afterArticle a:hover {text-decoration: none; color: #3E2312;}
.afterArticle .separator, .plusExtrait .separator {display: none;}
.plusExtrait br, .afterArticle br {clear: both; line-height: 10px; margin: 0; padding: 0;}
 
.before_articles {display: none;}
.beforeArticle, .beforePage {padding:0px; margin: 0px; margin-top: 10px; width:100%; color:#3E2312; text-align: left; display: block; font-size: 11px; text-transform: uppercase; line-height: 15px;}
.beforePage {padding: 0;}
.beforeArticle .date span, .beforeArticle .separator {display: none;}
.beforeArticle .date span.text {display: inline;}
.beforeArticle a {text-decoration: underline; color:#3E2312;}
.linkTopic {text-transform:lowercase;}
.linkTopic:hover {text-transform:lowercase;}
.titreArticle, .divPageTitle h2 {color: #713417; font-size: 20px; font-weight: normal; margin: 0; display: block;}
.titreArticle:hover, .divPageTitle h2:hover  {text-decoration:none; color:#633017;}
.article h2, .divPageTitle h2 {min-height: 30px; margin: 0; margin-top: 5px; line-height: 24px;  padding-bottom: 10px;}
.topicTitle {text-decoration:none; color:#3E2312; font-size: 14px; font-weight: normal; line-height: 15px; margin-left: 10px; margin-bottom: 30px;}
 
.afterReactions {text-align:left; display:block; height: 100px;}
.afterReactions .linkAddComment {font-size:100%;}
.afterReactions a {padding: 3px 5px; font-size: 12px; text-decoration: underline; color:#3E2312; font-weight: bold;}
.afterReactions a:hover {text-decoration: none; color: #3E2312;}
/*--------------------Liste des articles-------------------------*/
 
.listArticles {margin-top:0px; margin-bottom:20px; border:0px none; color:#4A3A2D; font-size: 12px;}
.resumeArticle {color:#4A3A2D; text-align: justify; font-size: 12px; padding: 0 5px; margin-top: 10px;}
.listArticles a {color: #713417; font-size: 20px; font-weight: normal; margin: 0;}
.listArticles .categorieArticle a, .resumeArticle a {font-size: 11px; text-decoration: underline; color:#713417; }
.listArticles a:hover {text-decoration: none; color: #633017;}
.listCommentedArticle {background-color: #FFF; color: #4A3A2D; padding: 10px;}
 
/*--------------------Mode resume-------------------------*/
.titreExtrait {color: #713417; font-size: 20px; font-weight: normal; margin: 0; display: block;}
.titreExtrait:hover {text-decoration:none; color:#633017;}
.hrExtrait {border: 0px; display: none;}
.extraitArticle {margin-top:0px; color:#4A3A2D; text-align: justify; font-size: 12px; margin-bottom: 25px;}
.extrait {color:#4A3A2D; text-align: justify; font-size: 12px; padding: 10px;}
.extrait img {border: 1px solid #4A3A2D; padding: 4px; margin-right: 10px;}
.infoExtrait {min-height: 30px; margin: 0; margin-top: 5px; line-height: 24px;  padding-bottom: 10px;}
.dateExtrait {padding:0px; margin: 0px; margin-top: 10px; width:100%; color:#3E2312; text-align: left; display: block; font-size: 11px; text-transform: uppercase; line-height: 15px;}
.dateExtrait .separator {display: none;}
.dateExtrait .date span {display: none;}
.dateExtrait .date span.text {display: inline;}
.dateExtrait a {text-decoration: underline; color:#3E2312;}
.extrait a {text-decoration: none;}
.extrait a:hover {text-decoration: underline;}
.plusExtrait {color:#3E2312; margin-top: 15px; font-weight: normal; text-transform: uppercase;}
 
/*--------------------Commentaires---------------------------- */
.h2commentMessage {color: #713417; font-size: 20px; font-weight: normal; margin-left: 10px; margin-bottom: 25px;}
.comment {}
.comment hr {}
.commentMessage {padding: 5px; padding-bottom: 0; margin: 0; color:#4A3A2D; text-align: justify; border-bottom: 0;}
.commentOption {color: #3E2312; padding: 2px 2px 3px 5px; margin: 0 0 25px 0; font-size: 10px; text-transform: uppercase;}
.responseMessage {text-align:right; background-color: #D3C9C0; color: #3E2312; padding: 5px 10px 5px 0;}
.responseOption {text-align: right; color: #3E2312;}
.afterReactions .linkAddComment {font-size:130%;}
.commentMessage  {min-height: 20px;}
 
 
/*-----------------Newsletter-----------------------------------*/
#divNewsletter {background-color: #bda28d; color: #4A3A2D; border:10px dashed #D3C9C0; font-size: 12px;}
#divNewsletter h2 {text-align:center; font-size:12px; color #4A3A2D;}
#divNewsletter input {border:solid 1px #dedede; font-size:100%; background-color:#FFF; color:#000000; height: 18px;}
#divNewsletter .button {background-color: #FFF; color: #000; border: 0px;}
#divNewsletter .newsletter {}
#divNewsletter {}
 
/* ---------------------Calendrier--------------------------------- */
.calendarTop1 {font-size: 13px; text-transform: uppercase; font-style: normal; color:#4A3A2D; font-weight: bold;}
.calendarToday1 {font-size: 11px; font-weight: bold; color:#4A3A2D;}
.calendarToday1 a {font-size: 11px; font-weight: bold; color:#4A3A2D;}
.calendarDays1 {width:50px; height:15px;font-size: 11px; font-style: normal; color:#4A3A2D; text-align:center;}
.calendarHeader1 {font-size: 11px; color:#FFF; background-color: #4A3A2D;}
.calendarTable1 {width: 280px; float: center; padding: 5px; line-height: 12px; margin: auto;}
 
/*-----------------------Pagination-------------------------*/
.pagination {color:#404040; margin:10px auto}
/*----------------erreurs etc------------------------------*/
.error {color : #464646;}
 
/*----Newsletters-----*/
.newsletter li {list-style-type: none;}
 
/*----- accueil / menu -------*/
#menuob {height: 20px; width: 800px;
background-color: transparent;
margin-bottom: 0;
border: 0px;
padding: 0;
margin-top: 0;
}
 
 
#menuob a {
font-size: 13px;
font-weight: normal;
color: #3E2312;
text-decoration: none;
padding: 5px 28px;
text-transform: capitalize;
line-height: 20px;
text-align: center;
font-weight: bold;
border-right: 1px solid #3E2312;
}
 
#menuob a:hover {
color: #D3C9C0;
background-color: #3E2312;
text-decoration: underline;
}
/*----------------------------------------------------------------------------*/
/* Personnalisation                                                           */
/*----------------------------------------------------------------------------*/
body {
	background-color: #F1EAE2 ! important;
background-image: url("http://idata.over-blog.com/5/69/31/33/papier-marron-glac--marbr-.jpg") ! important;
}
#top h1,
#top h1 a {
	color: #713417;
	font-family: "arial";
	font-size: 10px;
}
.contenuArticle, .pageContent, .extraitArticle, .extrait { background-color: transparent ! important;
 color: #060505 ! important;
 font-family: "arial";
 font-size: 10px;
}
.divTitreArticle h2, .divPageTitle h2,
.divTitreArticle h2 a, .divPageTitle h2 a,
.titreExtrait {
	color: #633017 ! important;
	font-family: "Trebuchet MS" ! important;
	font-size: 20px ! important;
}
.box-titre h2 {
	color: #3E2312 ! important;
	font-family: "Trebuchet MS" ! important;
	font-size: 18px ! important;
}
.commentMessage {
	color: #4A3A2D ! important;
	font-family: "Trebuchet MS" ! important;
	font-size: 12px ! important;
}
.responseMessage {
	color: #3E2312 ! important;
	font-family: "Trebuchet MS" ! important;
	font-size: 12px ! important;
}

[Invité]

Dans ce cas, essaie de mettre à la fin du ton fichier :

Code css :

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

1
2
3
.cl {
overflow: visible;
}