0

私はCSSとHTMLにかなり精通していますが、これがどのように正しく機能するかについて頭を悩ませることができます。

コンテナの幅を990ピクセルにしたいのですが、左右に影が追加されているため、幅は約1237ピクセルです。

iveはそれを配置しましたが、990px​​の幅までオーバーフローを非表示にしたいです...

これを実現する方法はありますか？これが私の現在のコードです。

CSS：

body, html {margin:0; padding:0;}
body {background:url(../images/bg-x.jpg) top center repeat-x; background-color:#000;}
#main-wraper { } 
#main-container {margin:0 auto; width:990px; background:url(../images/container-bg.jpg) no-repeat; height:660px;}
#main-left {background:url(../images/bg-left.jpg) left center no-repeat;}
#main-right {background:url(../images/bg-right.jpg) right center no-repeat;}
#shadows {width:1237px; margin:0 auto; overflow-x: hidden}

html：

<body> 
  <div id="shadows">
    <div id="main-left">
      <div id="main-right">
        <div id="main-wraper"> 
          <div id="main-wraper-liner">
            <div id="main-container">
              <div id="main-container-liner">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

ここにリンクがあります

http://hithouse.businesscatalyst.com/index.html

前もって感謝します。

4

1 に答える 1

0

私が正しければ、画面が。よりも小さいときに影が表示されないようにする必要があります990px。私がすることはこれです：

  • 体はそのままにしておきます
  • 高さ1px、幅990px​​ +影（左右）の透明なpngを作成します
  • このはるかに単純なマークアップを使用する
  • あなたは行く準備ができています

HTML

<div class="content">
    <div class="shadow"></div>
    <h1>Normal content goes here</h1>
</div>​

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div.content {
    position: relative;
    width: 400px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid red;
}

div.shadow {
    position: absolute;
    top: 0;
    left: -28px;
    width: 456px;
    height: 100%;
    background: transparent url(https://dl.dropbox.com/u/1336931/_Stackoverflow/example_shadow.png) repeat-y 0 0;
}​

デモ

購入する前に試してください

于 2012-11-14T22:11:25.827 に答える