• 締切済み

HP作成html/<div>,<a>,<img>

こんばんは 僕はホームページを作っています 画像と文字のリンクにマウスを乗せたときに、そこの周りの色が長方形の形で反転ようにしたいのですが、 スタイルシートに div.aaa {width:100;height:100%} a.bbb:hover {color:white;backgrund-color:black} と入れて、 HTMLに、 <table><tr><td><a href="リンク先" class="bbb"><div class="aaa"><img src="画像の場所">文字</div></a></table></tr></td> って入力してIEで開くと、色の反転はちゃんとなるんですが、 リンクを開こうとして画像の上をクリックしても反応がありません。 周りの字や、画像の周りの隙間などをクリックしたら、ちゃんとリンク先が開けました。しかし、画像の上でも、[右クリック→リンクを開く]とすれば、リンク先が出てきました。どうしてなのでしょうか？？？ 説明下手で長くてすいませんがアドバイスよろしくお願いします

noname#112634
noname#112634

みんなの回答

noname#100277
noname#100277
回答No.2

文法上で指摘しましたが、画像LINKなのに、何故文字も挿入するのかが解らない。 普通なら以下です。 <a href="" title=""><img src="" alt="" title="" width="" height="" /></a> アンカーに何かセレクタ付けるならaに指定するのは云う迄も在りません。 文字でアンカーさせたいなら別途SCCを適応させれば良いのでは？ <a href="" title="" classやid="">文字列</a> 文字の周囲にアンカーの範囲を広げるのは迷惑なだけですが理解してますか？

noname#100277
noname#100277
回答No.1

divはaの外。

noname#112634
質問者

お礼

回答ありがとうございます やっぱりそうですよね でも、そうするとリンク範囲が長方形になりません ポインタを載せたときに長方形の範囲で色が反転になるようにしたいのです よろしくお願いします

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • CSSで<td>の背景色を変えたい。

    下のようにTable aaa と bbbがあります。それぞれの<td>要素に マウスがHoverしたときに別々の色に変えたいのですが、これを CSS行うことは可能でしょうか？ <table class"aaa"> 　　<tr> 　　　　<td> </td> 　　　　<td> </td> 　　　　<td> </td> 　　</tr> </table> <table class"bbb"> 　　<tr> 　　　　<td> </td> 　　　　<td> </td> 　　　　<td> </td> 　　</tr> </table> <td>中には <a hrer="・・・が入っているのですが、 次のように行った場合、リンクアドレスが長くなるとうまく機能 しないようなのです。 table.aaa a:hover{ 　　color: #FFFFFF; 　　background-color: #FF0000; 　　text-decoration: none; 　　padding: 5px; } table.bbb a:hover{ 　　color: #FFFFFF; 　　background-color: #0000FF; 　　text-decoration: none; 　　padding: 5px; } よろしくお願いします。

  • HP作成中なのですが、画像だけ表示されません。

    こんばんは。 モバステでＨＰ作成を始めました。 一昨日からずっと同じ所で悪戦苦闘しております。 読み辛いと思いますが、此方にタグを書かせて頂きました。 下のタグの画像コードの所ですが、実際は画像挿入に登録してある画像の画像コードを入力しましたが、×になり表示が出来ません。 色やリンクもきちんと実際は入力しております。 間違えている所や何かアドバイス頂けたら幸いです。 <table><tr><td colspan="2" align="center"></td></tr><tr><td bgcolor="#ffffbb"><font color="#808080"><a href="リンク先のURL">(*゜艸゜)</a><br><a href="リンク先のURL">(´∀｀)</a><br><a href="リンク先のURL">( ´艸｀)</a><br><a href="リンク先のURL">(*゜ェ゜*)</a><br><a href="リンク先のURL">(艸-_・*)</a><br><a href="リンク先のURL">(ノω｀)</a><br><a href="リンク先のURL">ピュー ミヽ( 'з')ノ</a><br><a href="リンク先のURL">Rule</a><br><a href="リンク先のURL">PROFILE</a><br><a href="リンク先のURL">(´＾ω＾｀)</a><br><a href="リンク先のURL">(。´pq｀)</a><br><a href="リンク先のURL">HP編集</a></font></td><td bgcolor="色"><img src=画像コード></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>

  • CSS:a imgのリンクの枠を消したい

    http://okwave.jp/qa/q3061773.html ↑この質問と同じなのですが、解決方法が分からなかったので質問させてください。 a,a hover　で指定してある枠の色が a imgにも出来てしまい困っています。 a img{ border:none; } と設定していますが、だめです。 それと、この箇所は <div class="thumb"> <table border="0"> <tr> <td class="v3"> <a onclick="btp01.src='img/001.jpg'" ondblclick="btp01.src='img/001.jpg'" style="cursor:pointer"> <img src="img/bt_1-s.jpg" class="photo_s" alt="" width="85" height="85" /></a> </td> </tr> </table> </div> というHTMLの記述なのですが、画像の右側に設定していない余白が出来てしまいます。 どうしたら良いでしょうか。

    • 締切済み
    • CSS
  • (;´Д`A ```間隔を詰めるには...?

    今スクリプト勉強しているのですが、↓のようにやってみると、まのびした感じになってしまいます。 それぞれの間隔をくっつけたいのですが、どうしたらいいのでしょうか？ どうか教えてください(m。_。)m オネガイシマス <html> <head> <title></title> <style type="text/css"> <!-- A.link2 { font-size:8pt; color: #ff0000; font-family:Impact,Chicago; padding: 0.1em 0.6em 0.1em 0.6em; background-color:#000000; border-top:1px solid #eeeeee; border-left:1px solid #eeeeee; border-bottom:1px solid #666666; border-right:1px solid #666666; text-decoration:none; } a:hover.link2{ color:#ff0000; background-color:#ffffff; border-top:1px solid #eeeeee; border-left:1px solid #eeeeee; border-bottom:1px solid #666666; border-right:1px solid #666666; text-decoration:none; } --> </style> </head> <body> <center> <TABLE BORDER="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR> <TD width="20%" nowrap><a href="aaa.html" class="link2"> AAA </a></TD> <TD width="20%" nowrap><a href="bbb.html" class="link2"> BBB </a></TD> <TD width="20%" nowrap><a href="ccc.html" class="link2"> CCC </a></TD> <TD width="20%" nowrap><a href="ddd.html" class="link2"> DDD </a></TD> <TD width="20%" nowrap><a href="eee.html" class="link2"> EEE </a></TD> </TR> </table> </center> </body> </html>

    • 締切済み
    • CSS
  • ＤＩＶが二つ続いた後の下にテーブルを表示したいので

    添付はエクセルの画像ですが ＨＴＭＬでＤＩＶが二つ続いた後の下にテーブルを表示したいのですが <html> <head> <title>test</title> <style type="text/css"> <!-- div.migi, div.hidari{ float : left ; text-align:center; width:100px; background-color: #ffff00; border: 1px #BDBDBD solid; padding: 10px 6px; } div.migi{ float: right; } --> </style> </head> <body> <div class="hidari"> hidari </div> <div class="migi"> migi </div> <table border=1 cellspacing=0> <tr><td>1</td><td>2</td></tr> </table> </body> </html> このコードだとDIVの中にテーブルが入ってしまいます。 理想は添付画像です。 どうすれば良いでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • テンプレートを使ったHP作成☆リンクタグについて

    nanosという無料のHP作成サイトでHPを作成中です。 テンプレートを使ってtopページを作ろうと思った所、リンクを貼った文字が薄いグレーになり、点線の下線までついてしまいます。カーソルをあてるとそれがピンクになります。 多分そういう設定になっているとは思うのですが、タグを見てもピンクの色指定の場所も無く、どう直したらいいのかわかりません。 ちなみに、カーソルをあてても、文字を変化させずに文字にリンクを貼りたいです。 タグのに何か設定があるのでしょうか？ <br><center><pc><table width="550"><tr><td><div style=margin:10px;padding:5px;line-height:16px;></pc><nopc><table width="550"><tr><td><div style=margine:10px;padding:5px;line-height:15px;></nopc><div align="left"><font size="4" color="#000000" face="HGep021">タイトル</font> <a href="ページのurl">コチラ</a>より御入室ください。</font> </span></div></td></tr></table></center> <center><table width="550"><tr><td><div style=line-height:16px;><font size="1"> という感じです。 どこの部分がどんな表現をするのか教えていただけたらありがたいです。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。

    ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> 　　<div class="B"> 　　　<h3>テキスト</h3> 　　　<p>タイトル</p> 　　　<table> 　　　　<tr> 　　　　　<th scope="col">テキスト</th> 　　　　　<td>テキスト </td> 　　　　</tr> 　　　　<tr> 　　　　　<th scope="col">テキスト</th> 　　　　　<td>テキスト</td> 　　　　</tr> 　　　</table> 　　</div> 　　<div class="C" > 　　　<h3>テキスト</h3> 　　　<p>タイトル</p> 　　　<table> 　　　　<tr> 　　　　　<th scope="col">テキスト</th> 　　　　　<td>テキスト </td> 　　　　</tr> 　　　　<tr> 　　　　　<th scope="col">テキスト</th> 　　　　　<td>テキスト</td> 　　　　</tr> 　　　</table> 　　</div> </div> 【CSS】--------------------------------- #A { 　　　　margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }

    • ベストアンサー
    • HTML
  • ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボ

    ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボタンをクリックしてね」の文字と画像の間に何行かの空白が出来てしまいます。これを詰めるにはどうしたらよいでしょうか？ ※ボタンをクリックしてね <TABLE><TR> <TD><a href="リンク先"><img src="images/1103fukunoki.jpg" width="134" height="86" alt="" class="pict" /></a></TD><TD> <a href="リンク先"><img src="images/1123yabusati.jpg" width="134" height="86" alt="" class="pict" /></a></TD> </TR> </TABLE>

  • テーブル内でdivを使った時に改行しないようにする

    テーブル内でdivを使った時に改行しないようにするには？ <table border=1 cellspacing=1 cellpadding=1> <tr><td>a<DIV style="font-size:50%;">50%です</DIV></td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table> このような事をすると、「a」と「50%です」の間が開業されてしまいます。 文字を小さくしつつ改行しないようにする方法を教えてください。

    • ベストアンサー
    • HTML
  • div配置のことで質問です。

    div配置のことで質問です。 こんにちは。タイトル通りなのですが、divタグがうまく使えません。 いろいろなサイトを参照しましたが、解決できないのでこちらで質問させてください。 お聞きしたい事は3点あります。 （下の方に画像をつけているので参照しながらお願いします。） 1.画像上の黄色のdivくくりを水色の隣に持っていきたいということ 2.赤からオレンジまでの固まりをセンターに持っていきたいということ（横です） 3.紫のdivくくりをpadding:40;に指定すると上下左右に40pxずつ幅が広がってしまうのですが、サイズはwidth900×height500のまま内側に40px余白を作りたいということ もしおわかりになる方がいらっしゃいましたら、教えていただけると幸いです。 どうぞよろしくお願いいたします。 ■スタイルシート /*------------------------------------------------------------------ */ * { margin: 0; padding: 0; } body { text-align: center; background-color: #ffffff; } body div { margin: 0 auto; border : 0 ; } /*------------------------------------------------------------------ブロック要素 */ div.all { width: 900px; margin:0; padding: 0px; } div.aka { text-align: left; width: 900px; margin:0; padding: 0px; background-color: #ff0000; } div.murasaki { font-size:10pt ; text-align: left; width: 900px; height:300px; margin:0; padding:40px; background-color: #aaaaff; } div.mizu { font-size:10pt ; text-align: left; width: 500px; margin:0; padding:0px; background-color: #00ffff; } div.kiiro { font-size:10pt ; text-align: left; width: 400px; margin:0; padding:0px; background-color: #ffff00; } div.orange { font-size:10pt ; text-align: right; width: 900px; margin:0; padding: 0px; background-color: #ff6600; } ■ボディ内 <div class="all"> <!--ーーーーーーーー赤色--> <div class="aka"> テスト </div> <!--ーーーーーーーー紫色--> <div class="murasaki"> テスト </div> <!--ーーーーーーーー水色--> <div class="mizu"> news<br /> <table cellspacing="0" cellpadding="0" width="500"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーー黄色--> <div class="kiiro"> topics<br /> <table cellspacing="0" cellpadding="0" width="400"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーーフッター--> <div class="orange">テスト</div> </div> 長々とすみません。よろしくお願い致します。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する