![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?c9bd177)
画像の上にあるプルダウンボタンが反応しません。
プルダウンメニューを作成しており、無事制作できたのですが、メニューの下にタイトル画像を置いたとたん、画像にかかる部分のリンクが押せない状態になってしまいました。
ちなみに、このサイトを参考に作りました。
http://www.ne.jp/asahi/hatakeyama/design/csslayo …
プルダウンメニューに画像が重なるとメニューのリンクが押せなくなってしまいます。どのように回避すればよいかご存知の方いらっしゃれば教えてください。
画像ではなく背景にした場合や何もない場合は普通にリンクを押すことができます。
ただ、画像にメニューがかかることが多いのでなんとか回避したいと思っています。
どうぞよろしくお願いいたします。
windows vista ie7
No.3ベストアンサー
- 回答日時:
OK、謎は全て解けた
システム識別子を省略して書いてないのが全ての原因。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
スタイルシートを使用する場合、ドキュメントタイプ宣言は省略せずにシステム識別子まで記述しないと今回のように謎の現象に苦しめられますよ。
それと Web デザインをするのでしたら、複数のブラウザで表示の確認をするのがオススメ。なにか不都合が起こった際に原因を特定する為の様々なヒントを得る事ができますしね。
例えば今回のケースでいえば、Firefox や Opera では意図した通りの表示&動作だが、IE では上手く動作しない → つまりCSS の記述は間違えてないっぽい → どうやら IE のみ互換モードでレンダリングされてる? → ドキュメントタイプ宣言が怪しい。と推理する事が可能です。
No.2
- 回答日時:
>ソースは参考サイトの通りです。
メニュー箇所の html や CSS はその通りなのでしょうが、その後に続く部分、いわゆるかぶさってしまう部分(画像とか)の記述がわからないから確実な事が言えないんだってば。サンプルにしたってメニューの要素を非表示にする際に visibility を使う場合と display を使う場合の両方が解説してあったりしますので、あなたがどのような方法を取っているかなど他の人には知りようがないのです。解って欲しいなぁ。
>設定の方法がわかりません。
失礼しました。凝った事をやりたがってるので、CSS に関して最低限の基本的な知識がある、もしくは解らなくてもある程度自分で調べて解決できる方だと思い込んでいました。少し言葉足らずだったようですね。
「クリックできない」という事は、なんだかよく解らないけど div.mailmenu よりも前面になにかが存在しているのが原因ではないかと推測いたしました(間違ってるかもしれませんけど、とりあえず可能性は一つ一つ潰していかなければ原因は特定できませんから)
ですのでまずそれを確認する為に CSS を用いて #sample .mainmenu を html 要素内で最前面に持ってきては?という事を提案したわけです。
とりあえず「絶対にこれより大きい値は使ってない」ってくらいの大げさな値("9999" とか)を #sample .mainmenu の z-index に設定してみたら如何でしょう?
#sample .mainmenu {
width:100px;
float:left;
z-index:9999;/* ←こんな風に記述 */
}
お試しください。
追記:IE7 は z-index 属性の解釈が他の『まともな』ブラウザと異なります。IE7で上手く表示できなくても他のブラウザならキチンと表示される場合もありますのでご注意ください。
詳しく教えていただき有難うございました。
すみません、やってみたのですが、やはりうまくいきません・・
ソースはこんな感じです。
http://www.gene-web.com/testtest/100321/Untitled …
教えていただいたz-indexを.menuCと.menuD につけたのですが、うまくいきません。
テーブルページと混在してると駄目だとかあるんでしょうか??
色々調べているのですが、何をやってもうまくいかず頼りにさせていただいてしまいました。
よろしければ、もう一度ご確認いただければ幸いです。
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- LINE スマホを替えてから、LINEの画像が表示されなくなりました 1 2022/10/04 13:41
- Facebook AndroidのFacebookモバイルブラウザ(Facebookアプリで外部リンクにアクセスするF 2 2023/01/26 18:23
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Android 最近のAndroidって思い通りに操れないのでしょうか?? Facebookのアプリから画像のURL 2 2022/09/18 16:23
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- 日本語 収蔵作品の画像貸出・取材 2 2023/04/04 15:53
- その他(OS) windowsフォトビューワー 1 2023/06/03 21:38
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
webデザインの勉強で、HTML/CSS...
-
htmlの文字が縦書きになる
-
私、Paiza Cloudやっているのだ...
-
WEBサイトの作成で、imgタグに...
-
CSSファイルの日本語コメントが...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
HTMLの CSSのファイルというの...
-
すいませんHTMLです cssです教...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
先日ウェブデザイン技能検定三...
-
X の仕様変更? 埋め込みフレー...
-
指定した演算を実施の結果を表...
-
指定した演算を実施の結果を表...
-
htmlソース編集で、各タグを何...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?↑
-
Duolingo のソースコードの名前...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デスクトップにある画像のパス...
-
VBのPictureBoxで画像をドラッ...
-
HTMLの画像自動更新について
-
.htaccess アクセス制限がエラ...
-
画像の上にあるプルダウンボタ...
-
ApacheのBasic認証のログの取り方
-
JANコードを検索出来るサイト
-
google.co.jpはホスト名ですか?
-
ikeyとは何ですか?
-
外部の別ホストからのPOST送信...
-
ブロードキャストストームの確...
-
グーグルで検索順位が上がると...
-
VBAのコード隠蔽について
-
Google アラートみたいなサイト...
-
ブログやホームページを毎日更...
-
HTTPのBasic認証に自動ログイン...
-
MRTGのグラフ表示について
-
掲示板集を探しています。
-
Basic認証のパスワードをユーザ...
-
在宅チャットレディーについて
おすすめ情報