Making a CSS div behave like a link

The requirements were that Javascript shouldn’t be necessary (bad SEO and accessibility) and that the HTML had to validate. For some examples have a look at Facebook advertisements. Here is how it was done:

  • Create the div as normal using HTML and CSS. In the div you will need to place the link you are wanting to be accessible.
  • Inside that link you will need an empty span tag.
  • Make sure that the div is styled in CSS with position:relative
  • Apply the following style to the empty span tag:

{ position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1 }

Any other links you may have inside the div will require position:relative and a suitable z-index (greater than 1)

Leave a Reply

Your email address will not be published. Required fields are marked *