Mam div, który zawiera obraz z tekstem i nad nim umieszczony przycisk. Tekst jest ustawiony bezwzględnie i pokryje cały obraz. Na końcu tekstu będzie także przycisk. Staram się, aby obraz był linkiem, ale mam problemy z tym.

Moje obecne rozwiązanie obejmuje zawijanie zarówno mojego obrazu, jak i tekstu w jednoa etykietka. Nie działa to, gdy użytkownik próbuje kliknąć przycisk, kliknie łącze zamiast przycisku. Próbowałem również zawijać tylko mój tag img wewnątrza tag, ale ponieważ mój tekst jest umieszczony na górze, link nigdy nie zostanie zarejestrowany jako klikalny.

http://jsfiddle.net/NxtWa/

HTML:

<div class="tile">
    <a href="http://www.google.ca">
        <img src="http://www.placehold.it/480x260">
        <div class="text">
            <p>Long long paragraph</p>
            <button>Button</button>
        </div>
    </a>
</div>

CSS:

.tile { position:relative; width:480px; height:260px; }
.tile .text { position:absolute; top:0px; left:0px; width:480px; height:260px; }