<div style="width:100%;">
<div style="background-image:url('../images/navi/top-red.png'); float:left;"></div>
<div style="width:180px; float:left;"><img src="/images/navi/logo.jpg" style="width:178px; height:62px; float:right; border:0;" /></a></div>
<div style="width:800px; float:left; background-image:url('../images/navi/top-black.png');"><ul id="topnav" style="">NAVI LINKS</ul></div>
<div style="background-image:url('../images/navi/top-black.png');float:left;"></div>
</div>
私が達成したいのは... width:180px と width:800px= 980px は常にブラウザーの中央に配置され
、左右にはコンテンツがありません (FLUID 幅の背景グラデーション画像のみ):
--------------------------------- 幅: 100% ブラウザ ------------ -----------------
|top-red.png 流体 | width:180px-LOGO.jpg | width:800px-ナビリンク | top-black.png 流体|
--------------------------------- 幅: 100% ブラウザ ------------ -----------------
ウェブサイトに全幅 100% のトップ ナビ メニューを作成しようとしています。
- センターコンテンツは980px固定
- 中央のコンテンツは、a) ロゴ画像と b) ナビ リンクで構成されます
- 左側のスペースは、背景画像として top-red.png で埋められます
- 右側のスペースは、背景画像として top-black.png で埋められます
3 つと 4 つの DIV (ロゴとナビがそれぞれ 1 DIV の場合は 4 つの div) を使用して構築しようとしましたが、左端の 1 番目の div WIDTH がすべての利用可能なスペースを埋めず、背景画像が少しだけ生成されます。
例えば。DIV に単語の文字列を入力すると、背景画像は単語の文字列の長さまでしか拡張されません。
私はあきらめて、TABLE タグを使用して最終的に成功しました (以下を参照)
。「1 番目の TD」は、「2 番目の TD」に触れるすべてのアベイル WIDTH を自動的に埋め
ます。これを見ることができます:
..しかし、DIVタグを使用してそれを行う方法について誰かが私に教えてくれることを願っています!
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td style="background-image:url('../images/navi/top-red.png'); height:62px;"> </td>
<td style="height:62px; width:180px; padding-right:10px;"><a href="/"><img src="/images/navi/logo.jpg" alt="LOGO IMAGE" style="width:178px; height:62px; border:0;" /></a></td>
<td style="height:62px; width:800px; background-image:url('../images/navi/top-black.png')">NAVI MENU</td>
<td style="background-image:url('../images/navi/top-black.png'); height:62px;"> </td>
</tr>
</table>