アプリ版:「スタンプのみでお礼する」機能のリリースについて

セルごとリンクにしたくて、以下の記述をしました。
【CSS】
------------------------------------------------------------------
a.widelink{
vertical-align:middle;
display:block;
//display:inline-block;
width: 100%;
height:100%;
//line-height:100%;
color: #000000;
text-decoration:none
}

a.widelink:hover{
vertical-align: middle;
color: #000000;
background-color: #9999FF;
text-decoration:none
}

td.bgchng{
align: center;
vertical-align: middle;
color: #000000;
margin: 0px;
padding: 0px;
}

td.bgchng:hover{
vertical-align: middle;
color: #000000;
background-color: #9999FF;
margin: 0px;
padding: 0px;
}
------------------------------------------------------------------

【HTML】
------------------------------------------------------------------
<TABLE border="1" bordercolor="#6666CC" cellspacing="0">
<TR>
<TD width="150" height="60" valign="middle" align="center" CLASS="bgchng">
<A href="test01.html" CLASS="widelink">
テスト<BR>(その1)
</A>
</TD>
<TD width="450" bgcolor="">
テスト(その1)の説明文<BR>
二行目
</TD>
</TR>

<TR>
<TD width="150" height="60" valign="middle" align="center" CLASS="bgchng">
<A href="test02.html" CLASS="widelink">
テスト(その2)
</A>
</TD>
<TD width="450" bgcolor="">
テスト(その2)の説明文<BR>
二行目<BR>
三行目
</TD>
</TR>

<TR>
<TD width="150" height="60" valign="middle" align="center" CLASS="bgchng">
<A href="test03.html" CLASS="widelink">
テスト(その3)
</A>
</TD>
<TD width="450" bgcolor="">
テスト(その3)の説明文<BR>
二行目
</TD>
</TR>
</TABLE>
------------------------------------------------------------------

この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。
思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。
line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。

セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。

A 回答 (2件)

あーなるほどー、やりたいことはわかりましたが方法が…


aをpで囲んでpにaのスタイルを入れて~で出来た!と思ったら
Firefoxしかokじゃなかったです笑

何か方法見つかることをお祈りし、私は断念します…スミマセン
    • good
    • 0

a に色々入れすぎな感じがします


a.widelink{
display:block;
color: #000000;
text-decoration:none
}

a.widelink:hover{
color: #000000;
text-decoration:none
}

これだけで希望の表示にならないっすかね?

この回答への補足

回答ありがとうございます。
>a に色々入れすぎな感じがします
…すみません、色々テストした残骸を残しています。

せっかくですが、教えていただいたやり方は試し終わっておりまして(すみません)…。
このやり方ですと、TD内のリンク文字の横一行全てリンクになりますが、リンク文字以外の部分がリンクにならないのです。
そのため、a内にheight:100%;としたのですが、そうするとリンク文字位置が上下中央ではなく、TD内TOPにきてしまうのです。

希望はTD内のどこをクリックしてもリンク先に飛べる&リンク文字は上下左右中央寄せです。

せっかく回答頂いたのに、生意気なことを書いて申し訳ありません m(-_-)m。

補足日時:2009/01/17 15:20
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!