<a>の上にimgを置きたいです。
以下の様に書きました。IE以外は赤のBOXの上でもimgの上でも
リンクが生きてます。
でもIEはimgの上ではリンクが機能しません。
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta http-equiv='Content-Style-Type' content='text/css'>
<style>
a {
display: block;
background-color: red;
width: 300;
}
</style>
</head>
<body>
<a href='javascript:alert(0);'>
<div style="position: relative; height: 300">
<img src="hoge.jpg" style="position: absolute; top: 50; left: 50"'>
</div>
</a>
</body>
</html>
どうしたらIEでも期待した結果を得られますでしょうか?
以上、ご指導の程、宜しくお願いいたします。
No.4ベストアンサー
- 回答日時:
><a>の要素の中に<div>を入れたらダメって事なんですよね。
。。<span>も?いえ、spanはOKです。
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
は、
<!要素 A
-- 開始タグ必須 終了タグ必須
(%inline;)* (インライン要素)ゼロ個以上
-(A) Aは出現してはならない。
--意味はアンカー -->
と読みます。
→3.3.3 要素宣言 ( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )
仕様書を読んで見ましょう。
>もうIEは無視したいのですが、そうは切り捨てられませんし。。。
>IE、特にIEの6。これは外せないです。
★いえ、IEは無視してください。
ie6 腐った牛乳 - Google 検索 ( http://www.google.co.jp/#hl=ja&gs_is=1&cp=13&gs_ … )
IE6は、マイクロソフト自身も撲滅キャンペーンInternet Explorer 6 Countdown | Death to IE 6 | IE6 Countdown ( http://www.ie6countdown.com/ )を行ってますし、多くのWeb企業も同様( http://www.google.co.jp/#hl=ja&gs_is=1&cp=9&gs_i … )です。
現在のIE6のシェアは、2.33%しかありません。
★日本のバージョン別ブラウザシェアグラフ (StatCounter Global Statsより) ( http://lhsp.s206.xrea.com/misc/browser-share-ver … )
IE6のために費やす時間・労力は無駄です。
なお、もし、期待される動作を考えられるなら、すべて個別にリンクを付けてください。IE6対処ならなおさら・・
[例]
<div class="nav">
<h2><a href="">なんたらかんたら</a></h2>
<p><a href="">ほげほげほげ</a></p>
<p><a href="">画像</a></p>
</div>
デザインはその後です。
この回答への補足
ORUKA1951さん、ご回答ありがとうございます。お世話になります。
とはいうものの、やはりIEは外せませんので。。。6だけでなく、8でも動作確認しましたが、同様でしたし。。
>なお、もし、期待される動作を考えられるなら、すべて個別にリンクを付けてください。IE6対処ならなおさら・・
個別にリンクを付けるとなと、期待した動作は得られない様な機がします。
[例]ですと、たとえば、「ほげほげほげ」の上でマウスオーバーした際、「ほげほげほげ」のhoverしか効かないですよね?
マウスオーバーでnav全体の背景を変えたい訳なのですが、
No.3
- 回答日時:
No.2です。
No.1への補足
>実は<a>の中に他の(ブロック)要素も入ってまして
それは、現在のウェブ標準(HTML4.01strict+CSS2.1)では、誤りです。
12.2 A要素
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
-->http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
まず、画像もスタイルシートもjavascriptも使えないテキストブラウザで理解できるようにきちんとHTMLを書いてください。
【引用】____________ここから
Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://support.google.com/webmasters/bin/answer. … )]より
そのうえで、スタイルシートでデザインするのです。そうすれば期待されるようなデザインは簡単に実現できます。
[例]
<div class="nav">
<h2><a href="">なんたらかんたら</a></h2>
<p><a href="">ほげほげほげ</a></p>
<p><a href="">画像</a></p>
</div>
とか、文字や画像を選択できなくて良いなら、h2,p,imgにリンクは不要。要素の選択が必要なければ、書かない
文書構造に従った、正しいHTMLがあれば、どのようにでもデザインできます。逆にそれがなければ、期待したデザインはできないし、将来デザインを変えることもできない===スタイルシートの最大の利点・・スタイルシートを変えることでデザインを一新できる・・という長所を捨てることになります。文書構造とプレゼンテーションは分離しましょう。
★具体的な内容は不要ですが、その部分の文書構造を示してください。
この回答への補足
ORUKA1951さん、ご回答ありがとうございます。
この質問、http://oshiete.goo.ne.jp/qa/7301665.htmlの質問で、
「A要素中に「Sold Out」を入れておけば、たとえそれが最前面に表示されていても、clickや hoverに影響を与えません。」
って回答があったので、「あ、そうなの」と色々試してたのですが。。。
<a>の要素の中に<div>を入れたらダメって事なんですよね。。。<span>も?
やりたい事は、前の質問の通りなのですが、
ひとつのボックスをクリックするとリンクへ、そしてそのボックスの中を色々とレイアウトしたいんですね。
ご回答で示された[例]ですと、class="nav"全体で所謂ボタン的な動作をさせていんですね。
hoverで背景も変えたいです。
で、IEのhoverが<a>でしか効かないので、困ってます。もうIEは無視したいのですが、そうは切り捨てられませんし。。。
IE、特にIEの6。これは外せないです。
No.2
- 回答日時:
本来HTMLでは、<a>要素内に<div>は入れられません。
他のブラウザで、これが認識されるのは、HTML5では<a>要素に、ブロック要素を含むことが出来るようになったからです。(内部にリンクやボタンなどがないときに限る)
【引用】____________ここから
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.6 Text-level semantics — HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/text … )]より
IEは、HTML5に対応していませんから、<a>要素は、<div>の直前で閉じられていると判断します。
この場合、divが必要とは思われません。
<p class="linkToHoge"><a href='javascript:alert(0);'><img src="hoge.jpg" width="" height="" alt=""></a></p>
とかで良いはずです。
これをご希望のとおりデザインすれば良いです。
p.linkToHoge{
width:300px;
height300px;
position:absolute;
top:;
left:;
}
p.linkToHoge a{
display:block;
width:100%;
height:100%;
background-color:;
padding:50px;
}
No.1
- 回答日時:
これでどうでしょうか?
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta http-equiv='Content-Style-Type' content='text/css'>
<style>
a {
display: block;
background-color: red;
width: 300;
}
</style>
</head>
<body>
<a href='javascript:alert(0);' style="position: relative; height: 300">
<img src="hoge.jpg" style="position: absolute; top: 50; left: 50"'>
</a>
</body>
</html>
この回答への補足
sisyoku_panさん、ご回答ありがとうございます。
確かにご回答の通りで実現できますが、、、実は<a>の中に他の要素も入ってまして。。。
質問をなるべくシンプルにしようと思ったのがよろしく無かったです。すみません。
<a href='javascript:alert(0);'>
<div>aaaa</div>
<div style="position: relative; height: 300">
<img src="shop.cgi?img=1" style="position: absolute; top: 50; left: 50"'>
<div>
上記のような感じなんです。<div>aaaa</div>の次を起点にtop,leftを指定したいのです。
<div>aaaa</div>は可変でサイズが不明です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
改行ほどは行かないけど、若干...
-
質問1.
-
どの印をつけた範囲の何をどう...
-
input type="hidden"で取得した...
-
【 Python range関数とlen関数 】
-
テキストボックスの中にリンク...
-
「にはとって代わることのでき...
-
textareaの幅を画面と合わせたい
-
射出成形機の射出・保圧について
-
【ヒトの神秘】美男美女から何...
-
<object>
-
<div align="center">を使わず...
-
ホームページビルダー16の属...
-
aの中にspan
-
figcaption要素の中にul要素
-
HTML_QUICKFORMのSELECTにデフ...
-
HTMLでTextareaを横に2つ並べ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
質問1.
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
CSS:overflow要素の印刷について
-
タグは大文字と小文字どちらが...
-
NからZへの全単射を具体的に構...
-
HTMLでTextareaを横に2つ並べ...
-
H1タグを画像にしたい
-
figcaption要素の中にul要素
-
imgタグをそのまま使うことは正...
-
textareaの幅を画面と合わせたい
-
ある要素の中身を全部グレーア...
-
テキストボックスの中にリンク...
-
スタイルシートで文字色を指定...
-
HTMLページ上でiframeを最前面...
おすすめ情報