テーブルセルをリンクするには？

-3

マスターページファイルにリンクを設定する必要があります。だから私はテーブルの列（<td>）の背景画像を設定し、いくつかのフォントを "家"として別に与えます。今、私は "onclick"イベントをセットアップし、<td>からページにリダイレクトします。しかし、それはブラウザの画像の下にいくつかのスペースを与えます。したがって、リンク（手の記号）は、下の空白からボタン画像まで始まります。私はすべてのマージン設定、パディングなどをチェックしたが、それは動作しません。だから私は背景画像のhrefを設定することにしました。それは可能か、この問題を解決するための他の方法ですか？私はインターネットでいくつかの助けを見つけました。しかし、私はこのコードの使い方を知らない。私はこの記事でヘルプコードを添付しました。テーブルセルをリンクするには？

マイコード：

<tr style="height:44px;"> 
      <td id="Homebutton" runat="server" style="height: 44px; width: 101px; cursor: pointer;" 
       class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'" 
       onmouseout="this.className= 'menubuttonhome'"> 
       Home 
      </td> 
</tr>

CSSファイル

.menubuttonhomefocus 
     { 
      background-image: url('Images/homebuttonfocus.png'); 
      background-repeat: no-repeat; 
      vertical-align: top; 
      color: White; 
      padding-top: 11px; 
      font-family: Arial; 
      font-size: 10pt; 
      font-weight: 500; 
     }

インターネットからのヘルプコードユッカとして

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */ 
        background: #fff url(path/to/image.gif) top left no-repeat; 
        text-align: center; 
        line-height: 50px; }

出典

2012-05-02 Arun Kumar

説明は非常に混乱しており、何かを不可能と仮定しているようです（バックグラウンドイメージをリンクに割り当てることはできますが、バックグラウンドイメージリンクを作成することはできません）。再調整し、単純なリンク '...'を使用できない理由を説明してください。 –

私はそれを単純なhrefリンクにすると、画像の下にいくつかのスペースを残します。つまり、空のスペースをクリックすると、別のページにリダイレクトされます。だからこそ私はそれが背景イメージにしたい。 –

HTML

<tr> 
    <td id="Homebutton" runat="server" class="menubutton"> 
    <a href="home.html">Home</a> 
    </td> 
</tr>

CSS

td { 
    padding: 0; 
} 

.menubutton > a { 
    display: block; 
    width: 101px; 
    height: 44px; 
    background-repeat: no-repeat; 
    vertical-align: top; 
    padding-top: 11px; 
    color: white; 
    text-align: center; 
    font-family: Arial; 
    font-size: 10pt; 
    font-weight: 500; 
    cursor: pointer; 
} 

#Homebutton { 
    background-image: url(Images/homebutton.png); 
} 

#Homebutton:hover { 
    background-image: url(Images/homebuttonfocus.png); 
}

注意。

Btw。画像の下部にあるスペースはテキスト用に予約されています。私。テキストを書いた場合、画像の下に表示されます。

出典

2012-05-02 10:28:04

ありがとうございました。次に別の問題。テーブルの全高は86ピクセルです。私はそれを2行に分け、最初の行は42pxです。 2行目は44ピクセルです。私のホームボタンの画像は2番目の行にあります。画像サイズも44ピクセルです。しかし、それは私が直面した問題である2行目（ホームボタンの画像の下）にいくらかのスペースを残す。しかし今、私は高さを44から35に減らしました。今はうまくいきます。それはどうしたの？それはテキストやその他の問題のためのスペースですか？ –

画像の下のスペースを避ける方法はありますか？ –

これはテキスト用に予約されたスペースです。例えば。 'font-size'を 'line-height'に0に設定すると、それもなくなります。 –

すでにメートルCSSを介して適用される背景画像へのリンクを設定することはできません。

実際には<a>タグを使用する必要があります。そのトリックは、リンクの高さを画像の高さに強制することです。

例：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Image link</title> 
    <style type="text/css"> 
     td { 
     padding: 0; 
     } 
     a { 
     display: block; 
     height: 89px; 
     } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td style="background-color: blue;"><a href="#asdf"><img src="http://getfirebug.com/img/firebug-logo.png" style="background-color: yellow;"/></a></td> 
     </tr> 
    </table> 
    </body> 
</html>

私はまた、あなたがレイアウト機能のために決して使用テーブルがすべきことに注意したいけど。 several good reasonsテーブルレイアウトを使用しないでください。代わりに、たとえば<div>s、<header>sおよび<section>sである。あなただけの:hover擬似クラスを使用する必要がホバー効果の

出典

2012-05-02 09:51:19

私はお互いを理解しています。しかし、どのように私はそのイメージにテキスト "家"を入力することができますか？あなたはそれについていくつかの考えを持っていますか？ plz help me –

上記のコードを参考にしてください。これは、背景画像から分離された家庭の言葉です。だから私は背景画像としてボタン画像を設定した。何か別のアイデアはありますか？ –

貴重な時間をお越しいただきありがとうございます。 –

テーブルセルをリンクするには？

答えて

関連する問題