0

初めて質問します:)

ヘッダー DIV の背景が波のように湾曲しています。ヘッダー DIV の下の DIV にサイドバーが右に浮かんでいます。ヘッダーの背景画像は、サイドバーがある場所で右に曲がり、サイドバーがヘッダー div の下部に当たる場所にギャップが残ります (明らかに div は曲がっていないため)。ギャップがないように、サイドバーの背景をヘッダーの下に拡張する必要があります。私は何をすべきか？

HTML:

<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>

CSS:

#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
    background-repeat:no-repeat;
text-align:center;

}

#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;

}

#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;

}

#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
    border-right:thick #558c21 solid;
    border-left:thick #558c21 solid;

}

![現在の様子のスクリーンショットです。サイドバーはコンテンツがないので狭いですが、ヘッダー画像の後ろまで隙間がないように伸ばしたいです。1

4

3 に答える 3

0

何を達成したいのか 100% 確信があるわけではありませんが、サイドバーをヘッダーの後ろに表示して上に伸ばしたい場合は、サイドバー スタイルに追加してみてください。

margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
于 2013-05-03T23:06:14.200 に答える
0

私があなたを正しく理解しているかどうかはよくわかりませんが、追加してみてください：

position: relative;
top: -10px;

ここでわかるように、#side-bar http://jsfiddle.net/NpZJV/

私がアドバイスすることがあれば、幅/高さに % を使用せず、代わりに px を使用してください。

于 2013-05-03T23:02:04.910 に答える
-1

CSS3 を使用して背景サイズを作成できます。問題が解決するかどうかを確認してください。 http://www.w3schools.com/cssref/css3_pr_background-size.asp 使ってみてください

background-size: 600px 2921px;

合わせてもらえるかもしれません

于 2013-05-03T22:54:49.113 に答える