2011-06-28 16 views
0

内部のみ1背景画像のdivを示すことは、私が持っている問題である。IEここでdivの

私は絵のようにレイアウトを作成しようとしている:もちろん

http://i53.tinypic.com/szack0.jpg

私は考えdivのみのバージョンが好きですが、これまでの私の目標は無駄になりました。 私はFirefoxで動作させるためにテーブルとdivの組み合わせを考え出しましたが、IE8(おそらく他のIEバージョン)では背景画像2と4は表示されません。

これを行う方法に関するアイデアIEでも同様に動作しますか?

PS:CSS3を待つ時間がなく、私はquirksモードを試して、背景が表示されていますが、他にも多くの問題があります。私は「過渡期」モードを維持することを好むだろう。

HTML:

<table id="middletable" class="bg"> 
<tr><td class="left" width="*"> 
    <table class="bg"> 
     <tr><td id="leftimg">&nbsp;</td></tr> 
    </table> 
</td> 
<td width="84"> 
    <div class="middle"> 
     CONTENT 
    </div> 
</td> 
<td class="right" width="*"> 
    <table class="bg"> 
     <tr><td id="rightimg">&nbsp;</td></tr> 
    </table> 
</td></tr> 
</table> 

CSS:私が正しく理解していれば、あなたがメインのテキストとその近くに2枚の画像をしたい

table.bg { 
width: 100%; 
height: 100%; 
border-collapse:collapse; 
} 

#middletable { 
background: #fff; 
} 

#middletable td.left { 
background: url('http://www.budowastrony.pl/fantom/images/site/middle-bg-left-rx.jpg') repeat-x top #ff0000; 
text-align: right; 
vertical-align: top; 
} 

#middletable td.right { 
background: url('http://www.budowastrony.pl/fantom/images/site/middle-bg-right-rx.jpg') repeat-x top #ff0; 
text-align: left; 
vertical-align: top; 
} 

#leftimg { 
height: 100%; width: 100%; 
background: url('http://www.budowastrony.pl/fantom/images/site/bg-middle-left-nr.jpg') no-repeat top right #ccc; 
} 
#rightimg { 
height: 100%; width: 100%; 
background: url('http://www.budowastrony.pl/fantom/images/site/bg-middle-right-nr.jpg') no-repeat top left #000; 
} 
+0

これを確認してください:http://jsfiddle.net/CndUR/(他のユーザーが解決策を見つけるのを助ける画像を絶対リンクすることができれば、画像は色で置き換えられます)。これはレイアウトが表示されている方法ですか?このリンクがあなたの問題を表している/再現している場合。あなたの質問に投稿してください。その後、他のSOユーザーがより迅速にあなたを助けることができるでしょう=) – Dan

+1

こんにちはダン、助けてくれてありがとう、私は実際の画像で画像を更新しました.jsfiddleと同じです:http://jsfiddle.net/CndUR/5/issueはIEで引き続き発生します。任意の助けが大いに感謝されるありがとう – Czakalli

+0

あなたは以下のいずれかのソリューションを試しましたか? – Dan

答えて

0

は、一定の幅を持っているし、2つの勾配が必要残りを記入してください。よりこれが参考になっかもしれません:http://jsfiddle.net/zxRf3/5/

+0

こんにちは@ララダ、これはおかげで、それは動作しますが、問題は、サイトが任意の画面で正しく表示する必要があるように#leftと#right列の幅を50pxまたはsmthに強制したくないということです。1000px +幅では、メインコンテンツの幅は990px​​に設定され、左右の画像は〜300px – Czakalli

0

td.lefttd.rightの内側に座って、ネストされたtable.bgは、実際の高さを持っていないので、左右の画像が表示されない理由があるかのように見えます。高さを100%に設定したことはわかっていますが、実際のコンテンツがなければ、ネストした表は展開する理由がありません。

height:100%#middletable td.left#middletable td.rightを割り当てることで、ネストした表の高さを100%に設定できるようになりました。このjsfiddle:http://jsfiddle.net/CndUR/7/の画像が表示されています。

表示しているものが表形式のデータではない(またはそう思わない)ので、CSSを使用してレイアウトを作成することをお勧めします。

マルチカラム液体レイアウト用の偉大な記事(古くはまだ非常に良いですが)はhttp://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts by Matthew Taylorです。