2010-12-15 9 views
0

私はfreecsstemplates.orgのテーマをdrupalテーマに変換して、メインコンテンツエリアのどの辺を見ているかを制限しようとしています。左側のサイドバーには約半分が表示されます。 Ps。あなたはCSSでnoobのであれば、私はFirebugをインストールすることをお勧めカスタムから変換された余分な背景を削除しました変換されたテーマDrupal

/* 
Design by Free CSS Templates 
www.freecsstemplates.org 
Released for free under a Creative Commons Attribution 2.5 License 
*/ 

body { 
margin: 30px 0px 0px 0px; 
padding: 0; 
background: #7E776F url(images/img01.jpg) repeat left top; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #3E3B36; 
} 

h1, h2, h3 { 
margin: 0; 
padding: 0; 
font-weight: normal; 
color: #F0E9E9; 
} 

h1 { 
font-size: 2em; 
} 

h2 { 
font-size: 2.8em; 
} 

h3 { 
font-size: 1.6em; 
} 

p, ul, ol { 
margin-top: 0; 
line-height: 180%; 
} 

ul, ol { 
} 

a { 
text-decoration: none; 
color:#; 
} 

a:hover { 
} 

#wrapper { 
margin: 0 auto; 
padding: 0; 
} 

/* Header */ 

#header-wrapper { 
height: 100px; 
background: #3C3230; 
border-bottom: 10px solid #4F4440; 
} 

#header { 
width: 950px; 
margin: 0 auto; 
padding: 0px 0px 0px 30px; 
} 

/* Logo */ 

#logo { 
width: 250px; 
height: 140px; 
margin: 0; 
padding: 0; 
background: url(images/img07.jpg) no-repeat left top; 
color: #34312C; 
} 

#logo h1, #logo p { 
margin: 0; 
padding: 0; 
letter-spacing: -2px; 
text-align: center; 
text-transform: capitalize; 
font-family: Georgia, "Times New Roman", Times, serif; 
} 

#logo h1 { 
margin: 0px 0px -20px 0px; 
padding: 20px 0px 0px 0px; 
font-size: 37px; 
color: #4D8D99; 
} 

#logo h1 a { 
color: #F0E9E9; 
} 

#logo p { 
margin: 0px; 
padding: 0px; 
font-size: 26px; 
} 

#logo a { 
border: none; 
background: none; 
text-decoration: none; 
color: #34312C; 
} 


/* Menu */ 

#menu { 
width: 250px; 
margin: 20px auto 20px auto; 
padding: 0; 
} 

#menu ul { 
margin: 0; 
padding: 50px 0px 0px 0px; 
list-style: none; 
line-height: normal; 
} 

#menu li { 
border-bottom: 1px dashed #191918; 
} 

#menu a { 
display: block; 
width: 250px; 
height: 27px; 
margin: 4px 0px; 
padding: 8px 0px 0px 20px; 
text-decoration: none; 
text-transform: capitalize; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 14px; 
font-weight: normal; 
color: #FFF; 
} 

#menu a:hover, #menu .current_page_item a { 
background: url(images/img06.jpg) no-repeat left top; 
text-decoration: none; 
} 

#menu .current_page_item a { 
} 

/* Page */ 

#page { 
width: 1000px; 
margin: 0 auto; 
background: url(images/img04.jpg) repeat-y left top; 
} 

#page-bgtop { 
background: url(images/img02.jpg) no-repeat left top; 
} 

#page-bgbtm { 
overflow: hidden; 
width: 920px; 
padding: 20px 40px 20px 40px; 
background: url(images/img03.jpg) no-repeat left bottom; 
} 
/* Content */ 

#primary { 
background:gray; 
} 

#primary a{ 
color:white; 
} 

#content { 
float: right; 
width: 550px; 
padding: 50px 20px 0px 20px; 
} 

/* Sidebar */ 

#sidebar { 
float: left; 
width: 250px; 
margin: 0px; 
padding: 0px 0px 80px 10px; 
color: #787878; 
} 

#sidebar ul { 
margin: 0; 
padding: 0; 
list-style: none; 
} 

#sidebar li { 
margin: 0; 
padding: 0; 
} 

#sidebar li ul { 
margin: 0px 0px 0px 20px; 
padding-bottom: 30px; 
} 

#sidebar li li { 
line-height: 35px; 
border-bottom: 1px dashed #191918; 
border-left: none; 
} 

#sidebar li li span { 
display: block; 
margin-top: -20px; 
padding: 0; 
font-size: 11px; 
font-style: italic; 
} 

#sidebar li li a { 
color: #787878; 
} 

#sidebar li li a:hover { 
color: #F0E9E9; 
} 

#sidebar h2 { 
height: 38px; 
letter-spacing: -.5px; 
font-size: 1.8em; 
} 

#sidebar p { 
margin: 0 0px; 
padding: 0px 20px 20px 20px; 
} 

#sidebar a { 
border: none; 
} 

#sidebar a:hover { 
} 


/* Footer */ 

#footer { 
width: 920px; 
height: 80px; 
margin: 0 auto; 
padding: 0px 0 15px 310px; 
font-family: Arial, Helvetica, sans-serif; 
} 

#footer p { 
margin: 0; 
padding-top: 20px; 
line-height: normal; 
font-size: 9px; 
text-transform: uppercase; 
text-align: center; 
color: #69635E; 
} 

#footer a { 
color: #474440; 
} 

答えて

2

:私はあなたがccg121.it.cx

でのstyle.cssファイルをテーマを見ることができます

CSSについてほとんど何も知りません、そしてそれを非常によく知るようになる。 CSSや他のデバッグの作業には非常に役立ちます。

私は、次の画像を変更せずに、メインコンテンツ領域の辺を制限したり、サイドバーを縮小したりすることはできません。http://ccg121.it.cx/images/img03.jpgあなたの背景に画像でなかった場合、あなたが幅を調整することによって、メインコンテンツ領域を縮小することができ

#page-bgbtm { 
    background:url("images/img03.jpg") no-repeat scroll left bottom transparent; 
    overflow:hidden; 
    padding:20px 40px; 
    width:920px; 
} 

サイドバーは、あなたができる

#sidebar { 
    color:#787878; 
    float:left; 
    margin:0; 
    padding:0 0 80px 10px; 
    width:250px; 
} 

の幅を調整することにより、縮小する可能性があなたが望むCSSの幅を変更しますが、画像が更新されるまで背景がどのように見えるかは変わりません。画像を一括して削除し、CSSの背景色を使用することをお勧めしますが、黒い左側のサイドバーでテクスチャを失います。

関連する問題