2012-04-14 65 views
1

我在將博文標題和頁面列表定位到博主上時遇到問題。我希望標題和頁面列表之間的距離更大,所以我試圖在標題封裝中添加高度,但徒勞無功。我試圖玩邊際,但我失敗了。請幫忙。下面是代碼:標題和頁面列表博主之間的距離

http://alittlegirlfromparis.blogspot.com/

/* Header 
----------------------------------------------- 
*/ 
#header-wrapper { 
height: 343px; 
    margin: auto; 
    padding: 0; 
    width: 1100px; 
} 
#header-inner { 
float: left; 
    padding-left: 15px; 


} 
#header { 
height:400px; 
width: 1100px; 
text-align: center; 
color:#553b14; 
text-shadow:1px 1px 1px #ccc; 
} 
#header h1 { 
padding:25px 10px 10px 0px; 
line-height:1.2em; 
text-transform:uppercase; 
letter-spacing:0em; 
font: normal normal 30px 'Josefin Sans'; 
display:none; 
} 
#header a { 
color:#553b14; 
text-decoration:none; 
} 
#header a:hover { 
color:#553b14; 
} 
#header .description { 
padding:0px 10px 0px 0px; 
text-transform:normal; 
line-height: 1.4em; 
font: normal 12px 'Josefin Sans'; 
color:#553b14; 
} 
#header img { 
margin-left: auto; 
margin-right: auto; 
} 

/* Nav 
----------------------------------------------- 
*/ 
#garis { 
position: absolute; 
top: 0px; 
width: 1100px; 
} 

#PageList1 { 
position: fixed; 
list-style-type:none; 
float:left; 
width: 1100px; 
font-size:14px; 
background:#fff; 
} 
.PageList li a { 
float: none; 
color:#000; 
text-decoration: none; 
text-align:center; 
font:16px 'Calibri'; 
} 
.PageList li a:hover{ 
color:#b3afaf; 
text-decoration:none; 
} 
.crosscol .PageList li, .footer .PageList li { 
float:left; 
list-style:none outside none; 
} 
.PageList li.selected a { 
color:#000; 
} 

.PageList li.selected a:hover { 
color:#b3afaf; 
} 


/* Outer-Wrapper 
----------------------------------------------- */ 
#outer-wrapper { 
background:#ffffff url(http://i56.tinypic.com/dnygs1.jpg) no-repeat top; 
margin: auto; 
width: 1100px; 
text-align:left; 
font: normal normal 100% Georgia, Serif; 
box-shadow:0 1px 6px #000; 
border-top:30px solid #000; 
} 
#content-wrapper { 
padding-top:10px; 
padding-left:10px; 
padding-right:5px; 
} 
#main-wrapper { 
float:left; 
width: 800px; 
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ 
overflow: hidden;  /* fix for long non-text content breaking IE sidebar float */ 
padding:5px; 
border-right: 1px dashed #CCCCCC; 
} 
#sidebar-wrapper { 
width: 250px; 
float: right; 
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ 
overflow: hidden;  /* fix for long non-text content breaking IE sidebar float */ 
} 
/* Headings 
----------------------------------------------- */ 
h2 { 
margin:1.5em 0 .75em; 
font: 25px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif; 
line-height: 1.4em; 
text-transform:normal; 
letter-spacing:0em; 
color:#999999; 
} 
/* Posts 
----------------------------------------------- 
*/ 
h2.date-header { 
margin:0em 0 .75em; 
font: italic 100% 'Georgia',Trebuchet,Arial,Verdana,Sans-serif; 
line-height: 1.4em; 
text-transform:noone; 
letter-spacing:0em; 
color:#999999; 
} 
.post { 
border-bottom: 1px solid #CCCCCC; 
} 
.post a{ 
color: #666666; 
text-decoration:none; 
} 
.post a:hover{ 
color: #666666; 
text-decoration:none; 
} 
.post h1 { 
padding:20px 0px 0px 5px; 
font-size:20px; 
font-weight:normal; 
line-height:1.4em; 
color:#000000; 
} 
.post h1 a, .post h1 a:visited, .post h1 strong { 
display:block; 
text-decoration:none; 
color:#000000; 
font-weight:normal; 
} 
.post h1 strong, .post h1 a:hover { 
color:#8f8c97; 
} 
.post-body { 
margin:1em 0 1em 0; 
line-height:1.6em; 
} 
.post ul { 
margin: 5px 0px 5px 20px; 
padding: 0px 0px 0px 0px; 
} 
.post ol { 
margin: 5px 0px 5px 20px; 
padding: 0px 0px 0px 0px; 
} 
.post ol li { 
margin: 5px 0px 5px 10px; 
padding: 0px; 
} 
.post-body blockquote { 
line-height:1.3em; 
padding-left:32px; 
padding-right:10px; 
padding-top:5px; 
font-size:18px; 
font-family:Georgia, Serif; 
font-style:italic; 
color:#333; 
} 
.post-footer { 
padding-top:10px; 
margin:0; 
color:#8f8c97; 
text-transform:normal; 
letter-spacing:0em; 
font: italic 100% 'Georgia', Trebuchet, Arial, Verdana, Sans-serif; 
line-height: 1.4em; 
display: block; 
} 
.post-footer a{ 
color: #000; 
text-decoration:none; 
} 
.post-footer a:hover{ 
color: #000; 
text-decoration:underline; 
} 
.atas { border-top: 1px dashed #8f8c97; 
    color: #8f8c97; 
    display: block; 
    font: italic 100%/1.4em 'Georgia',Trebuchet,Arial,Verdana,Sans-serif; 
    letter-spacing: 0; 
    margin: 10px 0 0; 
    padding: 3px; 
} 
.atas a{ 
color: #382e2a; 
text-decoration:none; 
} 
.atas a:hover{ 
color: #382e2a; 
text-decoration:underline; 
} 
.comment-link { 
float: right; 
margin-left:.6em; 
padding-left: 20px; 
background: url(http://2.bp.blogspot.com/-u3jiNrwSNbw/Tg_NI-7myPI/AAAAAAAAA3A/ALpTb3CCdSw/s000/cm.gif) no-repeat; 
margin-left:.6em; 
} 
.post img { 
background:#fff; 
padding:2px; 
border:1px solid #cccccc; 
} 
.post blockquote { 
margin:1em 5px; 
} 
.post blockquote p { 
margin:.75em 0; 
} 

回答

0
  1. 你可以在你的CSS增加#content-wrapperpadding-top。這將使標題圖像下的所有內容在佈局中下移。
  2. 您可以在您的CSS中將padding-top添加到#sidebar-wrapper。這將使右側菜單僅在佈局中向下移動。
1

你能更具體地說明你想改變什麼嗎? #sidebar-wrapper和#main-wrapper是分開的部分,#header-wrapper也是。要重新定位這些所需要的任何一項,都需要在適當的方向(頂部,底部,邊距,填充,高度)上調整元素。要在標題和這兩個元素之間添加空白,向#header-wrapper添加高度就行。要移動側邊菜單,請將margin-top添加到#sidebar-wrapper(或padding-top)。