いまさら聞けないサイト製作コミュのテキストだけをつかってリンクボタンを

テキストだけをつかってリンクボタンをつくるテクニックが
本に載っていたのですが、　本のとおりになりません。
リンクがブロックかされないので中央までカーソルを持っていかないとリンクに飛ばないし、リンクの下の下線がついてままの状態なのです。
原因はなんなのでしょうか？
htmlに
<body>
<div class="buttom">
<a href="#">リンクテキスト</a>
</body>
</html>
cssに
a.buttom{
display:block;
width:130px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
text-decoration:none;
background-color:#FF9999;
background-color:#990000;
border:4px outset #990000;
}
と書いています。

コメント(7)

最初
全て
最新の40件

[1] mixiユーザー 12月04日 20:37

.buttomとに書いたときの画像ものせました。

[2] mixiユーザー 12月04日 20:49

htmlの方を
<a href="#" class="buttom">リンクテキスト
</a>
このようにしていしたらうまくいったのですが
なぜいけないのかわかりません。

[3] mixiユーザー 12月04日 21:41

過去に別のコミュですが、同じような質問が出ていました。
参考になれば幸いです。

Win IEでのナビゲーションのロールオーバーに関して
http://mixi.jp/view_bbs.pl?id=2967073&comm_id=15544

ロールオーバーするメニューの作り方
http://mixi.jp/view_bbs.pl?id=1687748&comm_id=283

[4] mixiユーザー 12月05日 02:14

＞やっちゃんさん
回答有難うございます参考になりますね。

今回は本に
cssの記述が
a.buttom{
display:block;
width:130px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
text-decoration:none;
color:#333333;
background-color:#ff9999;
border:4px outset #990000;
}

のようにかかれていて
htmlの記述が詳しくったので
<body>
<a href="#">リンクテキスト</a>
程度だったので
htmlにどう書いたらよいかわからなくて困っています。

[5] mixiユーザー 12月05日 02:32

話をまとめると
<a href="#" class="buttom">リンクテキスト
</a>
がよくて
<body>
<div class="buttom">
<a href="#">リンクテキスト</a>
</body>
</html>
これが何故いけないのかという事が知りたいです。

[6] mixiユーザー 12月05日 09:08

<div class="buttom"><a href="#">リンクテキスト</a></div>

この場合は、スタイルシートの部分の１行目を変えて、

div.buttom a{
width:130px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
text-decoration:none;
color:#333333;
background-color:#ff9999;
border:4px outset #990000;
}

どのタグに対して、スタイルシートを適用させたいかと考えてみるといいのかな。

[7] mixiユーザー 12月05日 09:21

＞やっちゃんさん
回答有難うございます
やっちゃんさんの言うとおりにしたら
適用されました。
スタイルシートはいろいろな記述で
あらわす事ができるという事をもっと勉強しなければいけないという事がわかりました。
みなさん本当に有難うございました。

ログインすると、みんなのコメントがもっと見れるよ