Creating a card as a complete link - html

Question

I'm using materialize cards for my webpage, the idea is to use the cards as menus so when a person click in any part of the card the link should open. But it is only working by clicking in the image and/or in the text but no in any other part of the card.
This is the code:
<div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>
The code above I know is going to work only with the image and the text. But I tried to make all the card as a link like
<a href=""> <div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>
But it didn't work.

Answer 1

try making an href tag absolute on every card try this :
div.col{position:relative}
.fullcard{position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:inline-block;
z-index: 99999;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://pixdaus.com/files/items/pics/6/20/107620_cb8da068c718b9e6aa7aa0bcbc68d18f_large.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>

Answer 2

If you set the a to be style display:block and then wrap everything in it - you should be able to click anywhere in the card and navigate to the new link. The reason why you currently have to click on the elements is that a's are inline level elements and only respond to direct interaction on them - you need to set it to become a block level element and to therefore respond to any interaction within that block.
I added a couple of style rules to highlight this (such as border and padding) and doing it this way means that you only need to have a single a in each card. Note that I don't have your image - so the alt text shows up here.
.display-card {
border: solid 1px #333;
}
.nav-link {
display:block;
padding:15px
}
<div class="col l6 m12 s12 display-card">
<a href="signup.html" target="_blank" class="nav-link">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg" alt="image">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4"> RoboTico <i class="material-icons right">build</i></span>
</div>
</div>