Make a div into a link

by

Came here in the hope of finding a better solution that mine, but I don’t like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads – if you look, they’re actually proper markup.

For me the no-nos are: javascript (shouldn’t be needed just for a link, and very bad SEO/accessibility); invalid HTML.

In essence it’s this:

  • Build your panel using normal CSS techniques and valid HTML.
  • Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
  • Inside that link, put an empty span tag (<span></span>, not <span /> – thanks @Campey)
  • give the panel position:relative

  • apply the following CSS to the empty span:

    { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

    It will now cover the panel, and as it’s inside an <A> tag, it’s a clickable link

  • give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link

More Related Contents:

  1. xHTML/CSS: How to make inner div get 100% width minus another div width
  2. For div to extend full height
  3. html5 vertical spacing issue with
  4. How would I achieve a shadow that won’t show through transparent text?
  5. Fill in text in HTML5
  6. Why does height 100% work when DOCTYPE is removed?
  7. iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
  8. Does height and width not apply to span?
  9. Is there a way to apply a CSS style on HTML5 datalist options?
  10. Show Child Div within Hidden Parent Div
  11. Changing three.js background to transparent or other color
  12. Failed to decode downloaded font
  13. Pure CSS scroll animation
  14. How can I ensure that text is inside rounded div?
  15. Which HTML5 reset CSS do you use and why? [closed]
  16. CSS Justify text, fill space with dots [duplicate]
  17. Div height 100% and expands to fit content [duplicate]
  18. CSS Parent/Ancestor Selector [duplicate]
  19. How to position a div in the middle of the screen when the page is bigger than the screen
  20. Nested rows with bootstrap grid system?
  21. How do I line up 3 divs on the same row?
  22. Stretching tag to fill entire
  23. Div side by side without float
  24. Full background image with fade effect
  25. Why box-sizing is not working with width/height attribute on canvas element?
  26. How do I make text bold in HTML?
  27. Center fixed div with dynamic width (CSS)
  28. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  29. Table vertical header?
  30. Stacking DIVs on top of each other?

Leave a Comment