2012-04-14 3 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

あなたは何を変更しようとしているのですか? #サイドバーラッパーと#メインラッパーは、#header-wrapperと同様に別々のセクションです。これらのいずれかを再配置するには、要素を適切な方向(上、下、余白、パディング、高さ)に調整する必要があります。ヘッダーと両方の要素の間に空白を追加するには、#header-wrapperに高さを追加することができます。サイドメニューを下に移動するには、#サイドバーラッパー(またはパディングトップ)にmargin-topを追加します。

関連する問題