Bonjour,
Voici mon site
Je souhaite afficher un menu déroulant de mes pages et sous pages mais je n'arrive pas à modifier mon fichier css pour que les sous menu s'affichent horizontalement.
Lorsque je modifie le code php dans le Header.php afin d'afficher le sous menu comme ci dessous:
<div id="nav">
<ul>
<li <?php if (is_home()) echo " id='current'"; ?>><a href="<?php bloginfo('home'); ?>">Accueil</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=2&title_li='); ?>
</ul>
je ne sais pas comment modifier mon fichier style.css pour que le sous menu s'affiche verticalement.
Je vous joins le fichier style.css:
Que dois je modifier dans la balise NAV pour que la sous page s'affiche verticalement au passage de la souris?
Merci de votre aide.
Olivier
Modifié par wordpressnewbie (23 Jul 2009 - 11:03)
Voici mon site
Je souhaite afficher un menu déroulant de mes pages et sous pages mais je n'arrive pas à modifier mon fichier css pour que les sous menu s'affichent horizontalement.
Lorsque je modifie le code php dans le Header.php afin d'afficher le sous menu comme ci dessous:
<div id="nav">
<ul>
<li <?php if (is_home()) echo " id='current'"; ?>><a href="<?php bloginfo('home'); ?>">Accueil</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=2&title_li='); ?>
</ul>
je ne sais pas comment modifier mon fichier style.css pour que le sous menu s'affiche verticalement.
Je vous joins le fichier style.css:
[code=css] Code:
1.
/*
2.
Theme Name: Xambox Page Perso
3.
Theme URI: http://www.crmandco.fr
4.
Description: Xambox Page Perso
5.
Author: CRMandCO
6.
Author URI: http://www.crmandco.fr
7.
*/
8.
9.
10.
/* Top Elements */
11.
* { margin: 0; padding: 0; border: 0 }
12.
13.
body {
14.
background: #f9c721;
15.
font: 80%/1.5em Verdana, Tahoma, arial, sans-serif;
16.
color: #666666;
17.
text-align: center;
18.
margin: 15px 0;
19.
}
20.
21.
/* links */
22.
a, a:visited {
23.
color: #ef3a69;
24.
background: inherit;
25.
text-decoration: none;
26.
}
27.
a:hover {
28.
color: #f7931e;
29.
background: inherit;
30.
text-decoration: underline;
31.
}
32.
33.
/* headers */
34.
h1, h2, h3 {
35.
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
36.
font-weight: Bold;
37.
}
38.
h1 {
39.
font-size: 150%;
40.
font-weight: normal;
41.
}
42.
h2 {
43.
font-size: 130%;
44.
text-transform: uppercase;
45.
color: #f7931e;
46.
}
47.
h3 {
48.
font-size: 130%;
49.
}
50.
51.
h1, h2, h3, p {
52.
padding: 1px;
53.
margin: 0;
54.
}
55.
ul, ol {
56.
margin: 5px 0;
57.
padding: 5px 0;
58.
}
59.
60.
/* images */
61.
img {
62.
background: #FAFAFA;
63.
border: 1px solid #DCDCDC;
64.
padding: 5px;
65.
}
66.
img.float-right {
67.
margin: 5px 0px 10px 10px;
68.
}
69.
img.float-left {
70.
margin: 5px 10px 10px 0px;
71.
}
72.
73.
code {
74.
margin: 5px 0;
75.
padding: 10px;
76.
text-align: left;
77.
display: block;
78.
overflow: auto;
79.
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
80.
/* white-space: pre; */
81.
background: url(images/post.jpg);
82.
border: 1px solid #E0DBC9;
83.
}
84.
acronym {
85.
cursor: help;
86.
border-bottom: 1px solid #777;
87.
}
88.
blockquote {
89.
margin: 10px;
90.
padding: 0 0 0 25px;
91.
background: url(images/post.jpg);
92.
border: 1px solid #E0DBC9;
93.
font: bold 1.3em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;
94.
color: #f79f38;
95.
}
96.
97.
98.
/* start - table */
99.
table {
100.
border-collapse: collapse;
101.
margin: 10px;
102.
}
103.
th strong {
104.
color: #fff;
105.
}
106.
th {
107.
background: #93BC0C url(images/nav.jpg) repeat-x;
108.
height: 29px;
109.
padding-left: 12px;
110.
padding-right: 12px;
111.
color: #FFF;
112.
text-align: left;
113.
border-left: 1px solid #B6D59A;
114.
border-bottom: solid 2px #FFF;
115.
}
116.
tr {
117.
height: 30px;
118.
}
119.
td {
120.
padding-left: 11px;
121.
padding-right: 11px;
122.
border-left: 1px solid #E8E8E8;
123.
border-bottom: 1px solid #DFDFDF;
124.
}
125.
td.first,th.first {
126.
border-left: 0px;
127.
}
128.
tr.row-a {
129.
background: #F8F8F8;
130.
}
131.
tr.row-b {
132.
background: #EFEFEF;
133.
}
134.
/* end - table */
135.
136.
/* form elements */
137.
form {
138.
margin:10px; padding: 0 5px;
139.
border: 1px solid #D5D5D5;
140.
background-color: #DADADA;
141.
}
142.
label {
143.
display:block;
144.
font-weight:bold;
145.
margin:5px 0;
146.
}
147.
input {
148.
padding:2px;
149.
border:1px solid #eee;
150.
font: normal 1em Verdana, sans-serif;
151.
color:#777;
152.
}
153.
textarea {
154.
width:400px;
155.
padding:2px;
156.
font: normal 1em Verdana, sans-serif;
157.
border:1px solid #eee;
158.
height:100px;
159.
display:block;
160.
color:#777;
161.
}
162.
input.button {
163.
font: bold 12px Arial, Sans-serif;
164.
height: 24px;
165.
margin: 0;
166.
padding: 2px 3px;
167.
color: #FFF;
168.
background: #8EB50C url(images/nav.jpg) repeat-x 0 0;
169.
border: none;
170.
}
171.
172.
/* search form */
173.
.searchform {
174.
background-color: transparent;
175.
border: none;
176.
margin: 0; padding: 5px 0 15px 0;
177.
width: 190px;
178.
}
179.
.searchform p { margin: 0; padding: 0; }
180.
.searchform input.textbox {
181.
width: 120px;
182.
color: #777;
183.
height: 18px;
184.
padding: 2px;
185.
border: 1px solid #E5E5E5;
186.
vertical-align: top;
187.
}
188.
.searchform input.button {
189.
width: 50px;
190.
height: 24px;
191.
padding: 2px 5px;
192.
vertical-align: top;
193.
}
194.
195.
/********************************************
196.
LAYOUT
197.
********************************************/
198.
#wrap {
199.
position: relative;
200.
width: 820px;
201.
background: #CCC url(images/content.jpg) repeat-y center top;
202.
margin: 0 auto;
203.
text-align: left;
204.
}
205.
#top-bg {
206.
position: absolute;
207.
width: 820px;
208.
height: 19px;
209.
background: #CCC url(images/top-bg.jpg) repeat-y center top;
210.
top: 0; left: 0;
211.
z-index: 2;
212.
}
213.
#content-wrap {
214.
position: relative;
215.
clear: both;
216.
float: left;
217.
width: 790px;
218.
padding: 0;
219.
background: #E8E8E8;
220.
border-top: 5px solid #FFF;
221.
border-bottom: 2px solid #D0D0D0;
222.
margin-left: 15px;
223.
display: inline;
224.
}
225.
#header {
226.
width: 820px;
227.
position: relative;
228.
height: 100px;
229.
background: #CCC url(images/header-bg.jpg) repeat-y center top;
230.
padding: 0;
231.
color: #FFF;
232.
}
233.
#header h1#logo-text a {
234.
position: absolute;
235.
margin: 0; padding: 0;
236.
font: bold 36px 'Trebuchet MS', Arial, Sans-serif;
237.
letter-spacing: -1px;
238.
color: #AEAAAA;
239.
text-transform: none;
240.
text-decoration: none;
241.
242.
/* change the values of top and left to adjust the position of the logo*/
243.
top: 25px; left: 30px;
244.
}
245.
#header h1#logo-text span {
246.
color: #FFFFFF;
247.
}
248.
#header h2#slogan {
249.
position: absolute;
250.
margin: 0;
251.
padding: 0;
252.
font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
253.
text-transform: none;
254.
color: #FFFFFF;
255.
/* change the values of top and left to adjust the position of the slogan*/
256.
top: 67px;
257.
left: 95px;
258.
}
259.
260.
/* header links */
261.
#header #header-links {
262.
position: absolute;
263.
top: 20px;
264.
right: 20px;
265.
color: #FFFFFF;
266.
font-size: 10px;
267.
}
268.
#header #header-links a {
269.
color: #FFFFFF;
270.
text-decoration: none;
271.
}
272.
#header #header-links a:hover {
273.
color: #444;
274.
}
275.
276.
/* header-photo */
277.
#header-photo {
278.
clear: both;
279.
height: 200px;
280.
width: 790px;
281.
margin: 0 auto;
282.
background: #FFF url(images/header-photo.jpg) no-repeat center center;
283.
}
284.
285.
/* Navigation */
286.
#nav {
287.
clear: both;
288.
padding: 0;
289.
}
290.
#nav ul {
291.
float: left;
292.
list-style: none;
293.
background: url(images/nav.jpg) repeat-x;
294.
width: 790px;
295.
text-transform: uppercase;
296.
margin: 0 0 0 15px;
297.
padding: 0;
298.
display: inline;
299.
}
300.
#nav ul li {
301.
display: inline;
302.
margin: 0; padding: 0;
303.
}
304.
#nav li ul {
305.
position: absolute;
306.
left: -999em;
307.
height: auto;
308.
width: 174px;
309.
border-bottom: 1px solid #a9a9a9;
310.
}
311.
#nav ul li a {
312.
display: block;
313.
float: left;
314.
width: auto;
315.
margin: 0;
316.
padding: 0 14px;
317.
border-right: 1px solid #f87a09;
318.
border-left: 1px solid #eba310;
319.
border-bottom: none;
320.
color: #FFF;
321.
font: bold 13px/2.8em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
322.
text-transform: uppercase;
323.
text-decoration: none;
324.
letter-spacing: 1px;
325.
}
326.
#nav ul li a:hover,
327.
#nav ul li a:active {
328.
background: url(images/nav-hover.jpg) repeat-x;
329.
}
330.
#nav ul li#current a {
331.
background: url(images/nav-current.jpg) repeat-x;
332.
}
333.
#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 {
334.
left: auto;
335.
}
336.
/* Main Column */
337.
#main {
338.
float: left;
339.
width: 67%;
340.
padding: 0; margin: 10px 0 0 10px;
341.
display: inline;
342.
}
343.
#main h1 {
344.
margin-top: 10px;
345.
font: normal 1.6em 'Trebuchet MS', Tahoma, Sans-serif;
346.
color: #f7931e;
347.
padding: 5px 0 5px 5px;
348.
}
349.
#main ul li {
350.
list-style-image: url(bullet.gif);
351.
}
352.
353.
.post-footer {
354.
background: url(images/post.jpg);
355.
padding: 5px;
356.
margin: 20px 10px 0 10px;
357.
font-size: 95%;
358.
color: #666666;
359.
border: 1px solid #E0DBC9;
360.
}
361.
.post-footer .date{
362.
margin: 0 10px 0 5px;
363.
}
364.
.post-footer a.comments {
365.
margin: 0 10px 0 5px;
366.
}
367.
.post-footer a.readmore {
368.
margin: 0 10px 0 5px;
369.
}
370.
371.
/* Sidebar */
372.
#sidebar {
373.
float: right;
374.
width: 190px;
375.
padding: 0 10px 0 0; margin: 10px 5px 0 0;
376.
}
377.
#sidebar h1 {
378.
margin-top: 10px;
379.
padding: 5px 0;
380.
font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
381.
color: #f7931e;
382.
}
383.
#sidebar ul.sidemenu {
384.
385.
margin: 1px 4px 8px 0; padding: 0;
386.
text-decoration: none;
387.
background: url(images/dots.jpg) repeat-x left top;
388.
389.
}
390.
#sidebar ul.sidemenu li {
391.
list-style: none;
392.
background: url(images/dots.jpg) repeat-x left bottom;
393.
padding: 4px 0 4px 0;
394.
margin: 0 ;
395.
}
396.
397.
* html body #sidebar ul.sidemenu li {
398.
height: 1%;
399.
}
400.
#sidebar ul.sidemenu li a {
401.
text-decoration: none;
402.
background-image: none;
403.
color: #666666;
404.
}
405.
#sidebar ul.sidemenu li a:hover {
406.
color: #ef3a69;
407.
}
408.
/* footer */
409.
#footer-wrap {
410.
clear: both;
411.
width: 820px;
412.
font-size: 95%;
413.
text-align: left;
414.
padding: 15px 0;
415.
background: url(images/footer-bottom.jpg) no-repeat center bottom;
416.
}
417.
#footer-wrap a {
418.
text-decoration: none;
419.
color: #666666;
420.
font-weight: bold;
421.
}
422.
#footer-wrap a:hover {
423.
color: #000;
424.
}
425.
#footer-wrap p {
426.
padding:10px 0;
427.
}
428.
#footer-wrap h2 {
429.
color: #666666;
430.
margin: 0;
431.
padding: 0 10px;
432.
}
433.
434.
#footer-columns {
435.
color: #888;
436.
margin: 0 auto;
437.
padding: 0;
438.
width: 760px;
439.
}
440.
#footer-columns ul {
441.
list-style: none;
442.
margin: 10px 0 0 0;
443.
padding: 0;
444.
background: url(images/footer-dots.jpg) repeat-x left top;
445.
}
446.
#footer-columns li {
447.
background: url(images/footer-dots.jpg) repeat-x left bottom;
448.
}
449.
#footer-columns li a {
450.
display: block;
451.
font-weight: normal;
452.
padding: 3px 0 3px 10px;
453.
width: 96%;
454.
}
455.
#footer-columns .col3, .col3-center {
456.
float: left;
457.
width: 32%;
458.
}
459.
#footer-columns .col3-center {
460.
margin: 0 15px;
461.
}
462.
463.
/* bottom */
464.
#footer-bottom {
465.
clear: both;
466.
color: #666;
467.
margin: 0 auto;
468.
width: 820px;
469.
padding: 10px 0;
470.
text-align: center;
471.
}
472.
473.
/* alignment classes */
474.
.float-left { float: left; }
475.
.float-right { float: right; }
476.
.align-left { text-align: left; }
477.
.align-right { text-align: right; }
478.
479.
/* display and additional classes */
480.
.clear { clear: both; }Que dois je modifier dans la balise NAV pour que la sous page s'affiche verticalement au passage de la souris?
Merci de votre aide.
Olivier
Modifié par wordpressnewbie (23 Jul 2009 - 11:03)
