リンク領域の拡大

質問

リンク領域を拡大したいのですが、横幅はできても高さができません。

例えば、高さ３０ｐｘで、文字が１５ｐｘの場合、どうしても文字の部分にしかカーソルが反応しません。

ボックスいっぱいにリンク領域を拡大する場合どうしたらよいのでしょうか？

.td_navi a{
display:block;
background:#FFFFFF;
width:100%;
padding:4px 0 4px 0;
text-align:center;
}

何を付け加えればよいでしょうか？
height:100%;
とすると文字が中央に表示されなくなり、バランスが悪くなってしまいます。

どなたかご教授を。。

回答No.3

noname#66720 · ベストアンサー

.td_navi a {
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
white-space:pre;
}

こんな感じですかね。
line-heightをheightと同じpxにすると文字が縦方向に中央揃えになります。

お礼

ご丁寧にありがとうございました。
おかげさまで、何とかできました。

感謝申し上げます。

回答No.2

fujillin

ボタンとかタブのようなイメージでクリックしたいということで良いのでしょうか？
ボックスをどのように作成しているか不明ですが、仮に<div>～</div>で作成しているものとします。

＜方法１＞
ボックスに<a>タグでリンクを張る
　<a href="./hoge.html"><div "box1">link</div></a>

＜方法2＞
ボックスのクリック時にjavascriptでリンクさせる
　<div id="box2" onclick="window.location.href='./fuga.html';">link</div>

のどちらかでいかがでしょうか？　なお、ボックスのサイズや表示はCSSなどで設定しておいてください。
方法2の場合、ブラウザ側でスクリプトをOFFにしているとリンクがききません。また、カーソルの変化もありませんので、カーソル形状を変えたい場合は自分で制御する必要があります。

お礼

お力添えありがとうございました。

無事解決することができました。

感謝申し上げます。

回答No.1

noname#66720

ウインドウ全体をリンクにしたいということであれば、height100%をアンカーとhtml、bodyに指定してやればできると思います。

html, body {
height:100%;
}

ですが、operaの一部のバージョンで余分にスクロールできるようになってしまったような気がします。

補足

説明が下手ですみません。
　　＿＿＿＿＿＿＿＿＿＿＿
　｜　　　　　　　　　　　　　　　　 ｜
　｜　　 Ｈ Ｏ Ｍ Ｅ 　 　　　　　｜
　｜　　　　　　　　　　　　　　　　 ｜
　　￣￣￣￣￣￣￣￣￣￣￣
　　　↑高さ30ｐｘ　幅100ｐｘのボックスだと思ってください。

この領域全体にリンクを張りたいのです。

実際には

　｜　　　　　　　　　　｜　　　　　　　　　　
　｜　＜ＨＯＭＥ＞　｜　
　｜　　　　　　　　　　｜　　　　　　　　　　
このような感じのナビゲーションにします。

カーソルが反応するのはリンクを貼った文字と線と線の間の部分だけです。
上と下の余白には反応しません。

まわりくどい説明になりましたが、よろしくお願いします。