5

これは私がこのフォーラムに参加するのは初めてで、できるだけ明確にするよう努めていますが、特にヘッダーを使用して、自分用の小さな 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% です。

敬具

4

3 に答える 3

1

どのように見せたいのか完全にはわかりませんが、試してみます。
私がかなり離れている場合は、ある種の回路図を提供していただけませんか?

いずれにせよ、以下の例では特定のコードを使用していませんが、どのように行われたかがわかります。

結果：最初の例

左右のヘッダーは「無限」であり、常にページの幅全体を埋めます。
中央のヘッダーが残りをカバーします。背景画像がある場合はbackground-position、中央のヘッダーの左端と右端に合わせて配置するために使用できます。

コード | JSFiddle の例

HTML

<div class='side_wrapper'>
    <div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
    Content here
</div>

CSS

.header, .side_wrapper, .left_header, .right_header{
    height: 100px;
}

.header, .content{
    width: 400px;
    margin: 0 auto;
}

.side_wrapper{
    width: 100%;
    white-space: nowrap;
}

.left_header, .right_header{
    width: 50%;
    display: inline-block;
}

.left_header{
    background-color: blue;
}

.right_header{
    background-color: lightblue;
}

.header{
    position:absolute;
    top: 0;
    left: 50%;
    margin-left: -200px;
    background-color: red;
}

.content{
    background-color: green;
    text-align: center;
}
于 2012-10-24T14:23:54.350 に答える
0

あなたのdivはfloat：left;を使用します。これは、十分なスペースがある限り、ラッパー内でそれらが互いに隣り合って浮かぶことを意味する必要があります（例：css：）。

#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}

HTML

<div id "divWrapper">
   <div id = "divLeft">content here</div>
   <div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->

cssを操作するために使用する本当に良いツールは、FirefoxのFirebughttps : //getfirebug.com/です。

センターdivが必要な場合は、これを試してください：http: //jsfiddle.net/kzfu2/1/

于 2012-10-24T13:27:44.107 に答える
0

ラッパーから 2 つのヘッダーを取り出し、その横に置きたいですか? 正しい場合は、これを試してください：

<body>

<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!-->
<div id="header_right"></div><!--End header right!-->
</body>

と ：

display: inline; float: left;

各要素（header-left、header-right、wrapper）で、負のマージンから抜け出す

于 2012-10-24T13:14:50.303 に答える