Karolina Ticha Karolina Ticha - 7 months ago 19
HTML Question

Link inside link

If I have code like this, how can I make link from .layer or .layer-info? I prefer solution without JavaScript but I will be happy for any kind of solution.

<div class="layer">
<img src="http://besttours.com/media/catalog/category/NYC_2-compressor.jpg" alt="">
<div class="layer-info">
<h5>NYC</h5>
<p class="small">USA</p>
<ul class="absolute-bottom">
<li><a href="">Hotels</a></li>
<li><a href="">What to do</a></li>
<li><a href="">Tickets</a></li>
</ul>
</div>
</div>


Working example is here : http://codepen.io/anon/pen/VaEPdy

Answer

You can use positioning to achieve it. There are side-effects as well. Add an absolutely positioned <a> inside the layer, which is already relative.

This way, there are few things:

  • You have the whole layer in a clickable link.
  • The inner links, the textual links are still functional.
  • No JavaScript.
  • Kind of links, inside a link is achieved.
  • Semantically valid.

img {
  width: 100%;
}
.layer {
  position: relative;
}
.layer-info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.biglink {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  display: block;
  z-index: 999;
}
.absolute-bottom a {
  position: relative;
  z-index: 1000;
}
<div class="layer">
  <a href="http://google.com" class="biglink"></a>
  <img src="http://besttours.com/media/catalog/category/NYC_2-compressor.jpg" alt="">
  <div class="layer-info">
    <h5>NYC</h5>
    <p class="small">USA</p>
    <ul class="absolute-bottom">
      <li><a href="">Hotels</a></li>
      <li><a href="">What to do</a></li>
      <li><a href="">Tickets</a></li>
    </ul>
  </div>
</div>

The <a> (big link) is positioned with z-index of 999, while the three links, inside the content are positioned relative with z-index of 1000 making both working and semantically correct as well.