液体 - 固定 - リキッドレイアウト

を、私はこのウェブサイトに取り組んでいます：http://www.justaddsolutions.com/SampleSite/液体 - 固定 - リキッドレイアウト

メインエリアが達成され、中心には常に1024pxワイドとするものです。しかし私のクライアントは、ブラウザのウィンドウが1024pxより広いと、黄色と赤のストリップをブラウザウィンドウの尊重されたエッジ（左側は黄色、右側は赤色）に広げてください。

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

私はliquid-fixed-liquidレイアウトをmathewjamestaylor液体レイアウトのウェブサイトで見つけましたが、ブラウザのウィンドウが小さなサイズにリサイズされるとIE8で壊れます。

私はヘッダーに3列の表を使用し、背景画像とリピートxを使って自分のtd要素をスタイルすることでこれを実現すると考えましたが、ChromeとSafariではうまく機能しないようです。

この問題のお手伝いをしていただければ幸いです。

出典

2011-01-20 hanazair

だけで、HTMLで

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

見てこれをテストし、それが原因で画像にカラープロファイルやものの、今ちょっと安っぽい見える、彼らはより良いカットしなければならないであろうが、このショー何をすべきかの基本

<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-20 22:41:37

うわー...これは素晴らしいです！そんな単純なやり方でやった。どうもありがとうございました。 – hanazair

私はあなたがこれを熟考していると信じています。ヘッダー要素の絶対配置を使用しているので、body要素の背景イメージを使用するだけです（繰り返しはありません）。基本的には、あなたの現在のロゴのようなイメージになりますが、色が両側に広がっています。

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

出典

2011-01-20 22:22:29 ghoppe

これまで同じ手法を使用していましたが、9000ピクセル幅にはしませんでした。しかし、ええ、数千人。 :) –

私が提案する解決策は、最大3072pxの解像度で動作しますが、それは十分であるはずです。

#body_backgroundの背景画像は、幅が3072px、高さが約140pxです。これの主な背景色は白です。次に、左側のセクションに黄色のストリップを作成します。幅は1024pxで、メインセクションの黄色のストリップに合わせて上から86px下がります。次に、黄色のストリップが1024pxで終わる水平ポイントで、右側のエッジに移動する2048pxの赤いストリップを32pxで作成し、メインセクションの赤いストリップに合わせます。基本的には

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

次に、以下のCSSで#body_backgroundに背景画像として、それを追加します：

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

そして、それはそれを行う必要があり、このようになります画像！それが動作するかどうか私に教えてください！

出典

2011-01-20 22:38:56 mVChr

あなたのアイデアを大変ありがとう、mVChr。私は既にJohn Bokerによって以前に投稿されたソリューションを試してみました。それはすごくうまくいくようです。しかし、もう一度ありがとう。 – hanazair

液体 - 固定 - リキッドレイアウト

答えて

関連する問題