Wie ein Header in einem standardkonformen Weise zu verknüpfen?
Frage
Ich habe einen Block von HTML-Code, der wie folgt aussieht:
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
Ich bin mit einer CSS-Technik alle diesen Text zu verbergen und es mit einem Bild zu ersetzen. Aber ich will den ganzen Block auf die Homepage verknüpfen. Ich kann es nicht in <a>
wickeln, denn das wäre nicht standardkonform sein. Also, wie mache ich das?
Meine Lösung; inspiriert von Neu in der Stadt
<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;
}
Lösung
Setzen Sie einen Link Element außerhalb des Kopfes divs und macht es sie zu decken, indem die absolute Positionierung verwenden. Auch einen Z-Index hinzufügen, um sicherzustellen, dass der Link Benutzereingaben empfängt.
<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>
Andere Tipps
Overlay ein vollständig transparentes Bild auf ihm alles, was auf der Homepage verknüpft ist?
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow