0

しばらく前に、楽しみのために予約枠カレンダーを書きました。このページにはライブデモがあります。私の目的は、CSS ポジショニングを使用せずに、テーブル セル内のハイパーリンクされた画像の上にテキストを重ねることです。それは少し口いっぱいです、説明させてください...

カレンダーの緑色またはオレンジ色の各ブロックは予約可能な日付を示し、それぞれに関連する色付きの画像があり、それぞれが関連する日付にハイパーリンクされています。画像の上に日付を重ねるのは簡単ではありませんでした。私が見つけた唯一のクロス ブラウザー ソリューションは、span タグを追加して相対的に配置することでした。これの問題は、数字の下の領域がクリックできないことであり、セル内のすべてがクリック可能であることを期待しているため、人々を混乱させることがあります. サンプルセルは次のとおりです。

<td width='21' valign='top' class='days'>
    <a href='calendar.php?month=05&amp;year=2013&amp;day=06'>
    <img src='images/block_free.gif' title='This day is free' border='0' alt=''></a>
    <span>6</span>
</td>

これを達成するためのより良い方法はありますか？

4

1 に答える 1

2 
<td width='21' valign='top' class='days'>
    <a href='calendar.php?month=05&amp;year=2013&amp;day=06' class="green">6</a>
</td>

<style>
a.green { display: block; width: 64px; height: 50px; background: url( "images/block_free.gif" ) no-repeat; text-align: center; line-height: 49px; }
</style>

// line-height の値について完全にはわからないので、適切な値が得られるまでテストしてください

于 2013-04-28T09:18:48.663 に答える