CSS使用時のDIVにおける背景指定について
現在ホームページの作成でCSSをメインに練習を行なっております。
テーブル配置を最小限にと思い、CSSにて制作を試みておりますが、
ヘッダー部分だけがどうしても上手くいかずつまずいてます。
色々なCSSに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな?とも考え始めております。
でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にCSSに対する理解が低いのかとも思いますが、どうかご教授
をお願いいたします。
先ず構想図から…
----------------------
| DIV id="h-top" |
----------------------
| DIV id="h-cate" |
----------------------
| | |
| | |
|DIV | DIV |
|id="index"| id="main" |
| | |
| | |
| | |
----------------------
| DIV id="footer" |
----------------------
上記のようなありがちなレイアウトのHPを考えています。
DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。
質問は、上記のDIV内容の記述についてなのですが、
●DIV id="h-top"は、
横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、
縦100PXのメイン画像画像を入れたいと思っております。
●DIV id="h-cate"には、
横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には
横740PXに合わせたナビボタン(w123*h40)を6つ配置したいと考えています。
共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく
困っております。
現状でのHTML文では以下の通りとなっております。
<body>
<DIV id="header">
<DIV id="h-top">
<img src="hoge" width"740" height"100" alt"">
</DIV>
<DIV id="h-cate">
<ul class="h-navi">
<li class="h-navi01">
<A href="index.html">
<span class="span1">トップページ
</span></A>
</li>
<li class="h-navi02">
<A href="web/index.html">
<span class="span1">取扱商品一覧
</span></A>
</li>
・
・
・
</ul>
</DIV>
</DIV>
</body>
CSSも書こうと思いましたが、色々とやりくりして今では表示も
配置もおかしくなってしまいましたので、控えさせて頂きました。
また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。