Drehen Sie eine Sammlung von Überschriften, Absätzen und Listen in einen Hyperlink

Question

Gibt es eine gültige non js Weg, um eine Sammlung von Überschriften, Absätzen und Listen in eine URL zu verwandeln? (Wie in der Werbung?)

<a href="http://www.example.com" class="allclickable"> 
     <h2>Fresh Bread</h2> 
     <p>Delivered to your door</p> 
     <ul> 
      <li>Daily</li> 
      <li>Fresh</li> 
      <li>Bread</li> 
     </ul> 
</a> 

Dies gilt nicht bestätigen, und ich möchte die href Anzeige als Block-Element sein (so auch den Raum um den Text ist anklickbar).

Prost

Answer 1

Könnte eine weniger hässliche Art und Weise, dies zu tun, aber:

HTML:

<div id="wrapper"> 
<h2>Fresh Bread</h2> 
... 
<a class="allclickable" href="http://www.example.com"></a> 
</div> 

CSS:

#wrapper { position: relative; } 
.allclickable { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

Grundsätzlich Sie den Link über die gerade Pust Sachen. Einziger Nachteil ist, dass der darunter liegende Text nicht auswählbar ist. Aber es ist gültig :).

Natürlich haben Sie ein Problem mit dem IE haben, sehen Lösung hier: problem with z-index of an empty div layer in IE8

Answer 2

Verwendung html5. In HTML5 ist dies erlaubt.

Beachten Sie jedoch, dass einige Browser ein anderes DOM generieren, in dem sie die Verknüpfung entfernen und in jedes Blockelement einfügen. So

<a><h3>header</h3><p>para</p></a> 

wird sich

<h3><a>header</a></h3><p><a>para</a></p>. 

Nicht, dass große Sache, aber es könnte einige CSS-Selektoren vermasseln.