2

私はこの Web サイトに取り組んでいます: http://www.justaddsolutions.com/SampleSite/

メイン領域は 1024 ピクセルの幅で、常に中央に配置されます。これは実現されています。ただし、私のクライアントは、ブラウザー ウィンドウが 1024px よりも広い場合、黄色と赤のストリップをブラウザー ウィンドウの尊重されたエッジ (左に黄色、右に赤) まで拡張したいと考えています。

CSSベースのLiquid-Fixed-Liquid Layoutで解決しようと考えました。これは、中央部分が中央にあり、側面部分が液体の幅が等しいというものです。しかし、私は自分でそれを理解することはできず、それを行う方法をどこにも見つけることができませんでした.

mathewjamestaylor Liquid Layouts Web サイトで Liquid-Fixed-Liquid Layout を見つけましたが、ブラウザーのウィンドウのサイズが小さいサイズに縮小されると、IE8 で機能しなくなります。

次に、ヘッダーに 3 列のテーブルを使用してこれを達成し、background-image と repeat-x を使用して td 要素のスタイルを設定することを考えましたが、Chrome と Safari ではうまく機能しないようです。

この問題に関するヘルプをいただければ幸いです。

4

3 に答える 3

1

あなたはこれを考えすぎていると思います。ヘッダー要素に絶対位置を使用しているので、body要素に背景画像を使用します（繰り返しではありません）。基本的には、現在のロゴのような画像になりますが、色が両側に広がります。

単色なので、ほぼすべてのブラウザサイズに合わせて任意の幅（たとえば9000ピクセル）にし、画像は比較的小さくなります。

于 2011-01-20T22:22:29.257 に答える
1

これをテストしたところ、

http://www.antiyes.com/test/4753259/

html を見てください。カラー プロファイルや画像のせいで、今はちょっとお粗末に見えます。もっとうまくカットする必要がありますが、これは何をすべきかの基本を示しています。

<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{ 
 width:100%;
 height: 145px;
 position:relative;
 overflow:hidden;
 text-align:center;
}

#logo
{
 margin:auto;
 position:relative;
 z-index:5;
 width:1024px;
 height:99px;
 background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}

#red_stripe,#yellow_stripe
{ 
 position:absolute;
    left:0px;
 right:0px;
 z-index:4;
}

#red_stripe
{
 left:50%;
 height:31px;
 top:6px;
 background:transparent url(red_strip.png) repeat-x top left;
 width:50%;
}

#yellow_stripe
{
 height:32px;
 top:60px;
 width:50%;
 background:transparent url(yellow_strip.png) repeat-x top left;
}

</style>
</head>
<body>
 <div id="header">
 <div id="red_stripe"></div>
 <div id="yellow_stripe"></div>
 <div id="logo"></div>
 </div>
</body>
</html>
于 2011-01-20T22:41:37.923 に答える
0

私が提案するソリューションは、幅 3072px までの解像度で機能します。これで十分です。

#body_background幅 3072 ピクセル、高さ約 140 ピクセルの背景画像を作成する必要があります。これの主な背景色は明らかに白です。次に、メイン セクションの黄色のストリップに合わせて、上部から 86 ピクセル下に開始する幅 1024 ピクセルの黄色のストリップを左側のセクションに作成します。次に、黄色のストリップが 1024 ピクセルで終了する水平ポイントで、2048 ピクセルの赤いストリップを作成します。これは、メイン セクションの赤いストリップと整列するために、32 ピクセル下の右端に移動します...したがって、基本的には次のようになります。次のようなイメージ:

[ - - - - -1024px- - - - - - ]___________________________________________________
______________________________[- - - - - - - - - - -2048px- - - - - - - - - - - ]

次に#body_background、次の CSS を使用して背景画像として追加します。

#body_background { 
    background:url('../path/to/image/bg_strips.gif') left top no-repeat #fff; 
}

そして、それはそれを行う必要があります! それがうまくいくかどうか教えてください！

于 2011-01-20T22:38:56.207 に答える