0

css テーブルの背後にクリック可能なリンクを配置できるかどうか疑問に思っています。画像が 40px の場合、その背後にあるリンクを選択する方法はありません。

表で作成した理由は、すべてのテキスト ブロックが 248px (744/3) である必要があるためです。

CSS

#tabel{
    position:absolute;
}
table, td, th
{
width:744px;
height:40px;
text-align:center;
}
th
{
background-color:transparent;
color:white;
}

HTML:

<div id="tabel">    
    <table cellspacing="0" cellpadding="0">
    <tr>
        <th>TXT 1</th>
        <th>TXT 2</th>
        <th>TXT 3</th>
    </tr>
    </table>
</div>

私の目標は、3 つのクリック可能なボタン (ナビゲーション付きの jquery 画像スライダー用) とその上にテキストを配置することです。

4

1 に答える 1

0

次のようなテーブルレスアプローチを採用することをお勧めします: http://jsfiddle.net/t4tBt/

CSS

a.mybutton {
    display:block;
    width:248px;
    height:30px;
    float:left;
    text-align:center;
    vertical-align:middle;
    color:#999;
    text-decoration:none;
    padding-top:10px;
}
a.first{
   background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
a.second {
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
a.last {
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}

HTML

<div id="tabel">
<a href="http://www.google.com" class="mybutton first">First Button</a>
<a href="http://www.google.com" class="mybutton second">Second Button</a>
<a href="http://www.google.com" class="mybutton last">Third Button</a>
</div>
于 2013-02-28T18:06:39.297 に答える