標準に準拠した方法でヘッダをリンクするには?
質問
私はこのようになりますHTMLのブロックを持っています:
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
私はすべてそのテキストを隠し、イメージと交換するCSS技術を使用しています。しかし、私はホームページにブロック全体をリンクさせたいです。それは標準準拠ではないので、私は<a>
でそれをラップすることはできません。だから私はそれをどのように行うのですか?
私のソリューション。町の中で新触発され、
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
<a href="index.html">Home</a>
</div>
#header {
text-indent: -9999px;
width: 384px;
height: 76px;
background: transparent url(../images/header.png) no-repeat;
margin: 10px;
position: relative;
}
#header a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
解決
ヘッダのdivの外側リンク要素を入れて、それが絶対位置を使用して、それらをカバーします。また、リンクがユーザ入力を受け取ることを確認するためのzインデックスを追加します。
<style>
a.header
{
position: absolute;
display: block;
width: 100%;
height: 100px;
z-index: 1;
}
</style>
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
<a href="homepage" class="header"></a>
他のヒント
ホームページにリンクされているそれをすべての上に完全に透明な画像をオーバーレイ?
所属していません StackOverflow