CSSテクニックコミュの背景画像が表示されない（２種類）

いつもお世話になります。
初心者質問で申し訳ありません、助けてください。
下記のようなサイトを作っています。
http://pencil-jp.net/sample/3/sample.html
（レイアウト用CSSは、このHTML内に埋め込んであります）

ココで背景画像について、２種の動作不良が起こっています。
原因が全く分かりません。

（１）
ドロップシャドー用の背景画像を作っていますが、トップロゴ部／メインメニュー部は反映されてますが、コンテンツ部にうまく反映されません。どうやらコンテンツ部の<div>の高さを与えないと反映されないみたいなんですが、ページによってボリュームが違うので、出来れば可変させたいです。（この状態では便宜上、#contentsに100pxほど高さを与えています）

（２）メインメニュー部のロールオーバーを、background-imageのaとa:hoverの時で代えることによって、画面上ではテキストベースのコンテンツのみに特化してみようと思いましたが、hover時に背景画像が切り替わってくれません。

どうすれば良いのでしょうか？

コメント(7)

最初
全て
最新の40件

[1] mixiユーザー 08月02日 00:14

とりあえず（２）について。

例えば「HOME」ボタンのところですが、

#mainmenu #home {
～～
}
　　↓↓↓
#mainmenu #home a {
display:block;
width:160px;
height:70px;
background:url('images/menu_home.gif') no-repeat;
}

divではなく a に対して背景指定などしてみてください。
これならhover時に背景変わるはず。

GoofyMANIA#23さんのソースでは試してないのですが、
俺はいつもそれで以て対応してます。

[2] mixiユーザー 08月02日 00:23

>ぎんさん江
早速、有り難う御座居ます。
そうですね、そうですよね！
よくよく考えてみれば、そうですよ。
「a」があるから「a:hover」があるんですもんね。
...何焦ってるんやろ＜ヲレ
本当に助かりました。有り難う御座居ました！

というワケで検証して大丈夫でした。サーバに再アップしました。
ついでにcss validatorもかけて、今のところOK貰ってます。

あとはドロップシャドー部の問題ですね。これが一番深刻かも。
他のサイトでは出来てるんやけど、何故かこれでは上手くいってないんです。上記のようなウッカリミスだと思うんですが、こういうのコソ、自分では全くわからんモンやったりしますので、どうかお願いします＞ALL

[4] mixiユーザー 08月02日 00:47

>cxzさん江
早速、有り難う御座居ます。
グハっ...すぐ直せるようなとこを、おざなりにしたらあきませんよね。直しました。大丈夫です。失礼しました。

[5] mixiユーザー 08月02日 01:10

（２）直せたようで何よりです。

で、（１）ですが、↑画像みたいになればいんですかね？
float周りが怪しかったので、
<div id="contents_right">～</div>
<div id="contents_left">～</div>
のあとに
<div style="clear:both;"></div>
を追加したら上図のようになりましたよ。
floatがちゃんとクリアされてないみたいです。
もちろん #contents の height:100px; は消しました。
（ちなみに俺はMacのSafariで見てます。）

※ソース上に余計なモノを付け加えるのはXHTML構造上綺麗じゃないと思ったら↓トピのレス13あたり参考にしてみてください。
http://mixi.jp/view_bbs.pl?id=8054928&comm_id=15544

[6] mixiユーザー 08月02日 01:31

>ぎんさん江
重ね重ね、有り難う御座居ます。
今回のテーマは「出来る限りコンテンツ以外のものはHTMLには置かない」だったので、float使いの魔法の杖の様な「<div style="clear:both;"></div> 」は、極力使いたくなかったんです。
でもcss定義の中でclear:both;なんて使っても、効かないことが往々にしてあるので（特にFireFox/Safariでは！）、やっぱり使わんとアカンのんかいなぁ、って感じです。奥の手でやってみます（実はわかっていながら、まだ試してなかったです）。

ところで、教えて頂いたトピの魔法の呪文、以前に読んだことがあったんですが、どういうときに使うのか理解できなかったんですが・・・なるほど、こ～ゆ～時に使うんですね！目から鱗です。本当に有り難う御座居ました！チャレンジしてみます。

ちなみにウチもPBG4/Safari(main)/FireFox/IE6onVirtualPCです。これやると、Adobe系ソフトが立ち上がらないのが玉にきずです（苦笑）。

[7] mixiユーザー 08月02日 01:32

えー、ぜんぜん関係ない話ですが……
ついでの老婆心ということで。

<div>～</div>の中に<a>～</a>はＯＫですが
<a>～</a>の中に<div>～</div>はＮＧですよ。

ログインすると、みんなのコメントがもっと見れるよ