Make a div into a link

Question

I have a  lt div gt  block with some fancy visual content that I don t want to change  I want to make it a clickable link   I m looking for something like  lt a href       gt  lt div gt       lt  div gt  lt  a gt   but that is valid XHTML 1 1

User · Answer

lt a href       style  cursor  pointer   gt  lt div gt       lt  div gt  lt  a gt

User · Answer

While I don t recommend doing this under any circumstance  here is some code that makes a DIV into a link  note  this example uses jQuery and certain markup is removed for simplicity     lt script type  text javascript  src  jquery-1 3 2 min js  gt  lt  script gt   lt script type  text javascript  gt     document  ready function            div href    click function              window location     this  attr  href                  lt  script gt   lt div href  http   www google com  gt       My Div Link  lt  div gt

User · Answer

Just have the link in the block and enhance it with jquery  It degrades 100  gracefully for anyone without javascript  Doing this with html isn t really the best solution imho  For example    lt div id  div link  gt   lt h2 gt  lt a href  mylink htm  gt The Link and Headline lt  a gt  lt  h2 gt   lt p gt Some more stuff and maybe another  lt a href  mylink htm  gt link lt  a gt   lt  p gt   lt  div gt    Then use jquery to make the block clickable  via web designer wall      document  ready function             div link   click function          window location   this  find  a   attr  href    return false                 Then all you have to do is add cursor styles to the div       div link hover  cursor  pointer     For bonus points only apply these styles if javascript is enabled by adding a  js enabled  class to the div  or the body  or whatever

User · Answer

This post is Old I know but I just had to fix the same issue because simply writing  a normal link tag with the display set to block does not make the whole div clickable in IE  so to fix this issue far simpler than having to use JQuery    Firstly let us understand why this happens  IE wont make an empty div clickable it only make the text image within that div a tag clickable   Solution  Fill the div with a bakground image and hide it from the viewer   How  You ask good questions  now listen up  add this backround style to the a tag    gt   background url  some small image path    gt  -2000px -2000px no-repeat     And there you have it the whole div is now clickable  This was the best way for me cause Im using it for my Photo Gallery to let the user clik on one half of the image to move left right and then place a small image as well just for visual effects  so for me I used the left and right images as background images anyway

User · Answer

This example worked for me    lt div style  position  relative  width 191px  height 83px   gt       lt a href  link php  style  display block  width 100   height 100    gt  lt  a gt   lt  div gt

User · Answer

I pulled in  a variable because some values in my link will change depending on what record the user is coming from   This worked for testing        lt div onclick  location href  page html     style  cursor pointer   gt     lt  div gt     and this works too        lt div onclick  location href   lt   Webpage  gt      style  cursor pointer   gt     lt  div gt

User · Answer

You can give a link to your div by following method    lt div class  boxdiv  onClick  window location href  https   www google co in    gt google lt  div gt   lt style type  text css  gt   boxdiv       cursor pointer      width 200px      height 200px      background-color  FF0000      color  fff      text-align center      font 13px 17px Arial  Helvetica  sans-serif         lt  style gt

User · Answer

you could also try by wrapping an anchor  then turning its height and width to be the same with its parent  This works for me perfectly    lt div id  css ID  gt       lt a href  http   www your link com  style  display block  height 100   width 100    gt  lt  a gt   lt  div gt

User · Answer

You can t make the div a link itself  but you can make an  lt a gt  tag act as a block  the same behaviour a  lt div gt  has   a       display  block      You can then set the width and height on it

User · Answer

This option doesn   t require an empty gif as in the most upvoted answer   HTML     lt div class  feature  gt          lt a href  http   www example com  gt  lt  a gt    lt  div gt    CSS    div feature           position  relative             div feature a           position  absolute          width  100           height  100           top  0          left  0          text-decoration  none     No underlines on the link            z-index  10     Places the link above everything else in the div            background-color   FFF     Fix to make div clickable in IE            opacity  0     Fix to make div clickable in IE            filter  alpha opacity 1      Fix to make div clickable in IE            As proposed at http   www digitalskydesign com how-to-make-an-entire-div-a-link-using-css

User · Answer

This work for me    lt div onclick  location href  page html     style  cursor pointer   gt     lt  div gt

User · Answer

This worked for me   HTML    lt div gt     WHATEVER YOU WANT     lt a href  YOUR LINK HERE  gt       lt span class  span-link  gt  lt  span gt     lt  a gt    lt  div gt    CSS    span-link     position absolute    width 100     height 100     top 0    left  0    z-index  9999      This adds an invisible element  the span   which covers your entire div  and is above your whole div on the z-index  so when someone clicks on that div  the click is essentially intercepted by your invisible  span  layer  which is linked   Note  If you re already using z-indexes for other elements  just make sure the value of this z-index is higher than anything you want it to rest  on top  of

User · Answer

The cleanest way would be to use jQuery with the data-tags introduced in HTML  With this solution you can create a link on every tag you want  First define the tag  e g  div  with a data-link tag    lt div data-link  http   www google at   gt Some content in the div which is arbitrary lt  div gt    Now you can style the div however you want  And you have to create also the style for the  link -alike behavior    data-link      cursor  pointer      And at last put this jQuery call to the page     document  ready function           data-link    click function         window location href     this  attr  data-link        return false              With this code jQuery applys a click listener to every tag on the page which has a  data-link  attribute and redirects to the URL which is in the data-link attribute

User · Answer

This is an ancient question  but I thought I d answer it since everyone here has some crazy solutions  It s actually very very simple     An anchor tag works like this -    lt a href  whatever you want  gt  EVERYTHING IN HERE TURNS INTO A LINK  lt  a gt    Sooo      lt a href  whatever you want  gt   lt div id  thediv    gt   lt  a gt    Although I m not sure if this is valid  If that s the reasoning behind spoken solutions  then I apologise

User · Answer

This is the simplest way   Say  this is the div block I want to make clickable    lt div class  inner headL  gt  lt  div gt    So put a href as follows    lt a href     gt    lt div class  inner headL  gt  lt  div gt   lt  a gt    Just consider the div block as a normal html element and enable the usual a href tag   It works on FF at least

User · Answer

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   lt span gt  lt  span gt   not  lt span   gt  - 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  lt A gt  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

User · Answer

To make thepeer s answer work in IE 7 and forward  it needs a few tweaks    IE will not honour z-index if the element is has no background-color  so the link will not overlap parts of the containig div that has content  only the blank parts  To fix this a background is added with opacity 0  For some reason IE7 and various compatibility modes completely fail when using the span in a link approach  However if the link itself is given the style it works just fine     blockLink           position absolute        top 0        left  0        width 100         height 100         z-index  1        background-color  ffffff         -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 0          filter  alpha opacity 0         opacity 0         lt div style  position relative  gt         lt some content gt         lt a href  somepage  class  blockLink    gt     lt div gt

User · Answer

This is a  valid  solution to achieving what you want    lt style type  text css  gt   myspan       display  block     lt  style gt   lt a href     gt  lt span class  myspan  gt text lt  span gt  lt  a gt    But most-likely what you really want is to have an  lt a  tag displayed as a block level element   I would not advise using JavaScript to simulate a hyperlink as that defeats the purpose of markup validation  which is ultimately to promote accessibility  publishing well-formed documents following proper semantic rules minimizes the possibility the same document will be interpreted differently by different browsers    It would be preferable to publish a web page that does not validate  but renders and functions properly on all browsers  including ones with JavaScript disabled  Furthermore  using onclick does not provide the semantic information for a screen reader to determine that the div is functioning as a link

User · Answer

Actually you need to include the JavaScript code at the moment  check this tutorial to do so   but there is a tricky way to achieve this using a CSS code you must nest an anchor tag inside your div tag and you must apply this property to it   display block    when you ve done that it will make the whole width area clickable  but within the height of the anchor tag  if you want to cover the whole div area you must set the height of the anchor tag exactly to the height of the div tag for example   height 60px    this is gonna make the whole area clickable then you can apply text-indent -9999px to anchor tag to achieve the goal   this is really tricky and simple and it s just created using CSS code   here is an example  http   jsfiddle net hbirjand RG8wW

User · Answer

You can make surround the element with a href tags or you can use jquery and use        click function e   e preventDefault      DO SOMETHING

User · Answer

why not  use  lt a href  bla  gt   lt div gt  lt  div gt   lt  a gt  works fine in HTML5

User · Answer

if just everything could be this simple      logo  background url    global images csg-4b15a4b83d966 png  no-repeat top left background-position 0 -825px float left height 48px position relative width 112px    logo a  padding-top 48px  display block       lt div id  logo  gt  lt a href        index html  gt  lt  a gt  lt  div gt    just think a little outside the box  -

User · Answer

Requires a little javascript  But  your div would be clickable    lt div onclick  location href  http   www example com    style  cursor pointer   gt  lt  div gt

User · Answer

My smarty pants answer    Evasive answer to   How to make block level element a hyperlink and validate in XHTML 1 1   Just use HTML5 DOCTYPE DTD    Didn t actually hold true for ie7  onclick  location href  page html     Works IE7-9  Chrome  Safari  Firefox

User · Answer

This is the best way to do it as used on the BBC website and the Guardian   I found the technique here  http   codepen io IschaGast pen Qjxpxo  heres the html   lt div class  highlight block-link  gt         lt h2 gt I am an example header lt  h2 gt         lt p gt  lt a href  pageone  class  block-link  overlay-link  gt This entire box lt  a gt  links somewhere  thanks to faux block links  I am some example text with a  lt a href  pagetwo  gt custom link lt  a gt  that sits within the block lt  p gt    lt  div gt    heres the CSS         Block Link       A Faux block-level link  Used for when you need a block-level link with    clickable areas within it as directly nesting a tags breaks things         block-link       position  relative      block-link a     position  relative    z-index  1      block-link  block-link  overlay-link       position  static       amp  before         bottom  0        content            left  0        overflow  hidden        position  absolute        right  0        top  0        white-space  nowrap        z-index  0             amp  hover       amp  focus          amp  before           background  rgba 255 255 0   2

User · Answer

Not sure if this is valid but it worked for me   The code     x000D   x000D   lt div style  position relative background-color  000000 width 600px height 30px border solid   gt  x000D     lt p style  display inline color  ffffff float left   gt  Whatever  lt  p gt       x000D     lt a style  position absolute top 0px left 0px width 100  height 100  display inline   href      gt  lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

An option that hasn t been mentioned is using flex  By applying flex  1 to the a tag  it expands to fit the container    x000D   x000D  div   x000D    height  100px  x000D    width  100px  x000D    display  flex  x000D    border  1px solid  x000D    x000D   x000D  a   x000D    flex  1  x000D    x000D   lt div gt  x000D     lt a href  http   google co uk  gt Link lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Make a div into a link

Examples related to css

Examples related to html

Examples related to xhtml

Examples related to anchor