これは私がこのフォーラムに参加するのは初めてで、できるだけ明確にするよう努めていますが、特にヘッダーを使用して、自分用の小さな Web サイトを作成する際に問題があります。中央が 1024px のラッパー (マージン: 0 auto;) を持つページを作成しようとしています。別の画像を背景として使用できるこのラッパーの両側に 2 つの div が必要です。私の現在のcssは次のようになります:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
私のhtmlは次のようになります:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
私が達成しようとしているのは、左右の両方に続くヘッダーを持つことです (両方のヘッダーは異なる背景を使用します)。ラッパーのちょうど半分 (-512px)、これは機能しますが、右側に負のマージン (margin-right: -512px) を使用しようとすると、右側のページが 512px 余分に拡張されます。私の意図ではありません。
私は一日中グーグル検索を行ってきましたが、質問に対する答えが見つからないようです。また、 float: left で 3 つの div を作成しようとしましたが、幅 1024px の中央に 1 つを作成し、残りを作成する方法がわかりませんでした。幅は 100% です。
敬具