dポイントプレゼントキャンペーン実施中！

CSS使用時のDIVにおける背景指定について

解決済

  • 質問者：ishibo_062
  • 質問日時：
  • 回答数：3件

現在ホームページの作成でＣＳＳをメインに練習を行なっております。
テーブル配置を最小限にと思い、ＣＳＳにて制作を試みておりますが、
ヘッダー部分だけがどうしても上手くいかずつまずいてます。

色々なＣＳＳに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな？とも考え始めております。
でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にＣＳＳに対する理解が低いのかとも思いますが、どうかご教授
をお願いいたします。

先ず構想図から…
－－－－－－－－－－－－－－－－－－－－－－
｜　　　　　　DIV id="h-top"　 　　　　　　｜
－－－－－－－－－－－－－－－－－－－－－－
｜　　　　　　DIV id="h-cate"　　　　　　　｜
－－－－－－－－－－－－－－－－－－－－－－
｜　　　　　｜　　　　　　　　　　　　　　 ｜
｜　　　　　｜　　　　　　　　　　　　　　 ｜
｜DIV 　　　｜　　DIV　　　　　 　　　　　 ｜
｜id="index"｜　　　 id="main"　　　　　　 ｜
｜　　　　　｜　　　　　　　　　　　　　　 ｜
｜　　　　　｜　　　　　　　　　　　　　　 ｜
｜　　　　　｜　　　　　　　　　　　　　　 ｜
－－－－－－－－－－－－－－－－－－－－－－
｜　　　　　　DIV id="footer"　　　　　　　｜
－－－－－－－－－－－－－－－－－－－－－－

上記のようなありがちなレイアウトのＨＰを考えています。
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）を６つ配置したいと考えています。
共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく
困っております。
現状での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>

ＣＳＳも書こうと思いましたが、色々とやりくりして今では表示も
配置もおかしくなってしまいましたので、控えさせて頂きました。

また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： abril
  • 回答日時：

backgroundプロパティに画像を指定する場合の記述についてはANo.2の回答者様のご指摘の通りです。


ですが、

> DIV#.h-top {（省略）}

全体の記述の仕方が間違っていますね。
<div id="h-top">に対応させるのであれば、
DIV#h-top {（省略）}　もしくは　#h-top {（省略）}
でなければなりません。backgroundだけでなく、指定したプロパティが全部無効になっていませんか？

・id属性なら、div#h-top（一意セレクタ）
・class属性なら、div.h-top（クラス・セレクタ）

CSS のシンタックスをまず理解することですね。

> テストで見ているブラウザはIE６ですが、ブラウザがいけないのでしょうか？

確かにIE6はCSSの解釈に関しては色々と問題の多いブラウザではありますが、これはブラウザのせいではないですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
DIV#h-top {（省略）}　
↑上記にて訂正したところ希望通りに表示されるようになりました。

CSSに関しては本を何冊か購入し読んではみたのですが、１冊目と２冊目…あるいは３冊目など内容が変わってきたりとどれがあっているのか訳が分からなく、自分自身でも色々と試してみたり行なっています。

意外とCSSを行なう上で、その人思考？みたいなものがあるのか不明ですが、自分でもいつのまにか出来ていたなんて事もあるので、不思議ですね。

特に最近はテーブルに関して興味を持っており「dl」要素に関して、色々なサイトのタグなどを比べては意味深に興味深く掘り下げて研究しております。

何かオススメの勉強法などありましたらまたお願いします。

この度は、本当にありがとうございました。

通報する
お礼日時：2008/03/14 01:49

No.2

background-image: に repeatは書けません。

background-repeat:に
書くか、まとめて書きたければbackground: にしましょう。

この回答への補足

アドバイスありがとうございます。
早速行なってみましたが、

DIV#.h-top {
width:100%;
height:100px;
margin:0;
background-image: url(./header/header-bg.jpg);
background-repeat:repeat-x;
}
でも、
DIV#.h-top {
width:100%;
height:100px;
margin:0;
background:url(./header/header-bg.jpg) repeat-x;
}
でも、背景画像は表示されませんでした。
ひょっとするとテストで見ているブラウザはIE６ですが、
ブラウザがいけないのでしょうか？

補足日時：2008/03/13 23:37
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： abril
  • 回答日時：

実際のCSSを見ないと何がうまくいかないのかわかりませんが、充分実現可能だと思いますが…。



> 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく
> 困っております。

通常で考えれば、div#h-top、div#h-cate、にbackgroundプロパティで背景画像をレンダリングしてやればOKな筈です。
floatを併用している場合、親子関係によっては親要素の背景がレンダリングされないという現象が起こったりしますが（これも解決できますけど）、この構造図を見る限り、ヘッダーの中をfloatしている感じはありませんし。

あくまで判断要素の少ない現状での発言です。

この回答への補足

早々にアドバイスを頂きありがとうございます。
ＣＳＳの記載は、下記の通りです。
※ＣＳＳは別ファイルになってます。

DIV#.header {
width:100%;
height:143px;
margin:0;
}

DIV#.h-top {
width:100%;
height:100px;
margin:0;
background-image: url(./header/header-bg.jpg) repeat-x;
}

DIV#.h-cate {
width:100%;
height:43px;
margin:0;
background-image: url(yyy.jpg) repeat-x;
}

上記では無理でしょうか？

補足日時：2008/03/13 21:58
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報