Bonjour,
J'ai mon site qui est est monté sur la plateforme Wordpress. J'ai un souci avec la largeur de la colonne latérale à droite qui permet de placer des widget et autres extensions. Si j'agrandis la colonne vers la droite , tout se décale sur la gauche. Si je place un widget ou autre dans la colonne , il n'utilise pas toute la largeur disponible. vous pouvez le voir ici site notamment au niveau de la rubrique à droite "Actualités".
je vous joins mon fichier style.css :
Merci pour votre aide.
Olivier
Modifié par wordpressnewbie (23 Jul 2009 - 11:00)
J'ai mon site qui est est monté sur la plateforme Wordpress. J'ai un souci avec la largeur de la colonne latérale à droite qui permet de placer des widget et autres extensions. Si j'agrandis la colonne vers la droite , tout se décale sur la gauche. Si je place un widget ou autre dans la colonne , il n'utilise pas toute la largeur disponible. vous pouvez le voir ici site notamment au niveau de la rubrique à droite "Actualités".
je vous joins mon 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: 70%/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: 10px;
53.
margin: 0;
54.
}
55.
ul, ol {
56.
margin: 5px 20px;
57.
padding: 0 20px;
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: 60px;
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 ul li a {
305.
display: block;
306.
float: left;
307.
width: auto;
308.
margin: 0;
309.
padding: 0 14px;
310.
border-right: 1px solid #f87a09;
311.
border-left: 1px solid #eba310;
312.
border-bottom: none;
313.
color: #FFF;
314.
font: bold 13px/2.8em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
315.
text-transform: uppercase;
316.
text-decoration: none;
317.
letter-spacing: 1px;
318.
}
319.
#nav ul li a:hover,
320.
#nav ul li a:active {
321.
background: url(images/nav-hover.jpg) repeat-x;
322.
}
323.
#nav ul li#current a {
324.
background: url(images/nav-current.jpg) repeat-x;
325.
}
326.
327.
/* Main Column */
328.
#main {
329.
float: left;
330.
width: 67%;
331.
padding: 0; margin: 10px 0 0 10px;
332.
display: inline;
333.
}
334.
#main h1 {
335.
margin-top: 10px;
336.
font: normal 1.6em 'Trebuchet MS', Tahoma, Sans-serif;
337.
color: #f7931e;
338.
padding: 5px 0 5px 5px;
339.
}
340.
#main ul li {
341.
list-style-image: url(bullet.gif);
342.
}
343.
344.
.post-footer {
345.
background: url(images/post.jpg);
346.
padding: 5px;
347.
margin: 20px 10px 0 10px;
348.
font-size: 95%;
349.
color: #666666;
350.
border: 1px solid #E0DBC9;
351.
}
352.
.post-footer .date{
353.
margin: 0 10px 0 5px;
354.
}
355.
.post-footer a.comments {
356.
margin: 0 10px 0 5px;
357.
}
358.
.post-footer a.readmore {
359.
margin: 0 10px 0 5px;
360.
}
361.
362.
/* Sidebar */
363.
#sidebar {
364.
float: right;
365.
width: 26%;
366.
padding: 0 10px 0 0; margin: 10px 0 0 0;
367.
}
368.
#sidebar h1 {
369.
margin-top: 10px;
370.
padding: 5px 5px;
371.
font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
372.
color: #f7931e;
373.
}
374.
#sidebar ul.sidemenu {
375.
text-align: center;
376.
margin: 7px 4px 8px 0; padding: 0;
377.
text-decoration: none;
378.
background: url(images/dots.jpg) repeat-x left top;
379.
}
380.
#sidebar ul.sidemenu li {
381.
list-style: none;
382.
background: url(images/dots.jpg) repeat-x left bottom;
383.
padding: 4px 0 4px 5px;
384.
margin: 0 2px;
385.
}
386.
* html body #sidebar ul.sidemenu li {
387.
height: 1%;
388.
}
389.
#sidebar ul.sidemenu li a {
390.
text-decoration: none;
391.
background-image: none;
392.
color: #666666;
393.
}
394.
#sidebar ul.sidemenu li a:hover {
395.
color: #ef3a69;
396.
}
397.
398.
/* footer */
399.
#footer-wrap {
400.
clear: both;
401.
width: 820px;
402.
font-size: 95%;
403.
text-align: left;
404.
padding: 15px 0;
405.
background: url(images/footer-bottom.jpg) no-repeat center bottom;
406.
}
407.
#footer-wrap a {
408.
text-decoration: none;
409.
color: #666666;
410.
font-weight: bold;
411.
}
412.
#footer-wrap a:hover {
413.
color: #000;
414.
}
415.
#footer-wrap p {
416.
padding:10px 0;
417.
}
418.
#footer-wrap h2 {
419.
color: #666666;
420.
margin: 0;
421.
padding: 0 10px;
422.
}
423.
424.
#footer-columns {
425.
color: #888;
426.
margin: 0 auto;
427.
padding: 0;
428.
width: 760px;
429.
}
430.
#footer-columns ul {
431.
list-style: none;
432.
margin: 10px 0 0 0;
433.
padding: 0;
434.
background: url(images/footer-dots.jpg) repeat-x left top;
435.
}
436.
#footer-columns li {
437.
background: url(images/footer-dots.jpg) repeat-x left bottom;
438.
}
439.
#footer-columns li a {
440.
display: block;
441.
font-weight: normal;
442.
padding: 3px 0 3px 10px;
443.
width: 96%;
444.
}
445.
#footer-columns .col3, .col3-center {
446.
float: left;
447.
width: 32%;
448.
}
449.
#footer-columns .col3-center {
450.
margin: 0 15px;
451.
}
452.
453.
/* bottom */
454.
#footer-bottom {
455.
clear: both;
456.
color: #666;
457.
margin: 0 auto;
458.
width: 820px;
459.
padding: 10px 0;
460.
text-align: center;
461.
}
462.
463.
/* alignment classes */
464.
.float-left { float: left; }
465.
.float-right { float: right; }
466.
.align-left { text-align: left; }
467.
.align-right { text-align: right; }
468.
469.
/* display and additional classes */
470.
.clear { clear: both; }Merci pour votre aide.
Olivier
Modifié par wordpressnewbie (23 Jul 2009 - 11:00)