You are viewing an old revision of this post, from June 6, 2022 @ 17:40:18. See below for differences between this version and the current revision.

Make a link to cover an entire div

If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child: 
<div class="covered-div">
  <a class="cover-link" href="/my-link"></a>
  <!-- other content as usual -->
</div>

div.covered-div {
  position: relative;
}

a.cover-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.

Revisions

  • June 6, 2022 @ 17:40:18 [Current Revision] by Sharing Solution
  • June 6, 2022 @ 17:40:18 by Sharing Solution

Revision Differences

There are no differences between the June 6, 2022 @ 17:40:18 revision and the current revision. (Maybe only post meta information was changed.)

No comments yet.

Leave a Reply