a要素を利用したリンクボックスを作るときの注意 [インターネット]
企業などのサイトを作っていると、よく写真と文字がセットになっていて、そのエリア全体がリンクになっているバナーなどを作ることが多い。
例えば下記みたいなの。
とくに何もしていない状態
sandman
Flash歴10年ですが、それ以外は1年程度です
もう年なのでのんびりしたいと思います。
趣味／海外旅行（アジア・中東方面）、読書、原付で行くFUJI ROCK
- 上記のソース
-
<a href="#" style="display:block;width:300px;background:#FFFF99"> <img src="t/blog/_images/blog/_5f8/sand_man/6382906.jpg" alt="オレ" width="97" height="128" style="float:left;display:block" /> <span> sandman<br /> Flash歴10年ですが、それ以外は1年程度です<br /> もう年なのでのんびりしたいと思います。<br /> 趣味／海外旅行（アジア・中東方面）、読書、原付で行くFUJI ROCK </span> <br style="clear:both" /> </a>
左右に余白が欲しいので、ブロック要素にして、marginをとる（paddingでも可）。
ただ、現在はフロートしてる画像の下にあるので、marginが意味をなしていない。
sandman
Flash歴10年ですが、それ以外は1年程度です
もう年なのでのんびりしたいと思います。
趣味／海外旅行（アジア・中東方面）、読書、原付で行くFUJI ROCK
- 上記のソース
-
<a href="#" style="display:block;width:300px;background:#FFFF99"> <img src="/blog/_images/blog/_5f8/sand_man/6382906.jpg" alt="オレ" width="97" height="128" style="float:left;display:block" /> <span style="display:block;margin: 0 10px;"> sandman<br /> Flash歴10年ですが、それ以外は1年程度です<br /> もう年なのでのんびりしたいと思います。<br /> 趣味／海外旅行（アジア・中東方面）、読書、原付で行くFUJI ROCK </span> <br style="clear:both" /> </a>
そこで、span属性もフロートさせて&横幅の設定して、画像の右につける
sandman
Flash歴10年ですが、それ以外は1年程度です
もう年なのでのんびりしたいと思います。
趣味／海外旅行（アジア・中東方面）、読書、原付で行くFUJI ROCK
- 上記のソース
-
<a href="#" style="display:block;width:300px;background:#FFFF99"> <img src="/blog/_images/blog/_5f8/sand_man/6382906.jpg" alt="オレ" width="97" height="128" style="float:left;display:block" /> <span style="display:block;padding: 0 10px;float:left;width:170px"> sandman<br /> Flash歴10年ですが、それ以外は1年程度です<br /> もう年なのでのんびりしたいと思います。<br /> 趣味／海外旅行（アジア・中東方面）、読書、原付で行くFUJI ROCK </span> <br style="clear:both" /> </a>
これで、目的は果たしたのだがここで問題が。
実はこれ、一見問題なさそうだし、FirefoxやSafariなどで見ている人は気づかないが、WinIEでは文字の上にカーソルが載っても、指マークにならないんだよね。（a:hoverは反応してる）
span要素に対し、blockさせるのは問題ないようだけど、widthやfloatを設定すると、このバグがおこる模様。
まあ、a要素やimg要素をうまく使って回避できるけど、それに気づかずにハマったので、残しとく。
2007-12-13 20:03
nice!(0)
コメント(0)
トラックバック(0)
コメント 0