Как связать заголовок в соответствии со стандартами?
Вопрос
У меня есть блок 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;
}
Решение
Поместите элемент ссылки за пределы разделов заголовка и закройте его, используя абсолютное позиционирование.Также добавьте 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