1

スクリーンショットをご覧ください。左（headerLeft）と右（headerRight）のdivを使用して、メインdivのいずれかの側にシャドウを適用できるレイアウトを作成しようとしています。次に、ヘッダーコンテンツを保持するコンテンツdiv（header）があります。これはすべてdiv（headerWrapper）でラップされます。私はこれを行うために4つのdivを使用しています。ヘッダー、ナビゲーションバー、および使用している別のバーで機能しています。これは、スクリーンショットに色分けされたdivで示されています。これが機能する理由は、CSSがピクセル単位で指定された高さを使用しているためです。しかし、私には問題があります。これをメインコンテンツに適用したいのですが、うまくいきません。コンテンツの高さはページごとに変わりますが、これは問題ありませんが、固定ピクセルの高さを指定しない限り、シャドウを含むdivは表示されません。助けてください。

layoutProblem http://www.webquark.co.uk/layoutProblem.jpg

これが私が機能するレイアウトのために持っているCSSです：

    #header{
margin:0 auto; 
height:160px;
width: 76%;
min-width:850px;
font-size: 14pt;
font-family: Calibri, Verdana, Ariel, sans-serif;
color: #ffffff;
background-image: url(headerBG.jpg);
background-repeat: repeat-x; 
}

#headerWrapper{
height:145px;
width:100%;
/**background-color: #202020;**/
}

#headerLeft
{
float: left;
width: 12%;
height:145px;
background-image: url(shadowLeft.png);
background-repeat: repeat-y;
background-position: center right;
/**background-color: #1e1e1e;**/
}

#headerRight
{
float: right;
width: 12%;
height:145px;
background-image: url(shadowRight.png);
background-repeat: repeat-y;
background-position: center left;
/**background-color: #1e1e1e;**/
}

基本的に、左右のdivの高さを100％にする必要はないと思います。高さを100％に設定してみましたが、うまくいきません。身長も100％に設定しています

乾杯、あなたが助けることができることを願っています。

作業用トップバーとヘッダーのHTML：

<div id="topWrapper">
<div id="topRight">
</div>
<div id="topLeft">
</div>
<div id="top">
</div>
</div>


 <div id="headerWrapper">
 <div id="headerRight">
</div>
<div id="headerLeft">
</div>
 <div id="header">
 </div>
 </div>
4

2 に答える 2

0

divを高さに一致させることはCSSでは非常に困難です。それを行うにはいくつかのトリックがありますが、ここにはもっと簡単な解決策があると思います。

赤いパターンをボディの背景画像にして、タイル状にしてみませんか？他のものを表示したい場合は、それを上に表示してください。私があなたのデザインを見ることができることから、それは私にとって最も簡単な解決策のように見えます。

divを高さに一致させたい場合は、絶対列のトリックを使用することをお勧めします。このようなものはうまくいくと思います:(私は実際にそれをテストしていませんが）。

<div id="content">
    <div id="left-shadow"></div>
    <div id="text">
        text goes here
    </div>
    <div id="right-shadow"></div>
</div>

このCSSで：

#content {
    position: absolute;
}
    #left-shadow {
        position: relative;
        left: 0; top: 0; bottom: 0;
        /* width needs to be specified */
    }
    #text {
        /* width needs to be specified */
    }
    #right-shadow {
        position: relative;
        right: 0; top: 0; bottom: 0;
        /* width needs to be specified */
    }

次に、パターンを左/右の影の背景画像として設定します。

于 2009-08-13T14:54:11.377 に答える
0

影には高さ1pxの透明なPNGを使用します。左側に影が含まれ、次にコンテンツ/ヘッダーの幅の空白領域が含まれ、次に右側の影が含まれます。以下の例では、これは1x932ピクセルになります。

コード例：

<style type="text/css">
  #headerBG {
    background: gray url("repeating-background");
  }
  #contentBG {
    background: red url("repeating-background");
  }
  .shadow {
    width: 900px; /* width of inner content */
    margin: 0 auto;
    padding: 0 16px; /* width of shadow bit */
    background: transparent url("new-shadow") repeat-y;
  }
</style>

<div id="headerBG">
  <div class="shadow">
    header content
  </div>
  <div class="shadow">
    navigation
  </div>
</div>

<div id="contentBG">
  <div class="shadow">
    body content
  </div>
</div>

ヘッダー/本文のさまざまな背景色については、影の内側（コンテンツの周囲）にdivを追加するか、中央の空白のビットに正しい背景色が含まれる複数の影の画像を作成する必要があります。ただし、とにかくヘッダーを別の画像で埋める場合は、おそらくボディカラーだけでうまくいく可能性があります-ヘッダーはそれを覆います。

于 2009-08-13T15:20:05.063 に答える