How to make a whole div clickable in html and css without JavaScript

Question

I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code markup   If I have this which is what I want the result to do -    lt a href     gt   lt div gt This is a link lt  div gt   lt  a gt    The W3C validator says that block elements shouldn t be placed inside an inline element  Is there a better way to do this

User · Answer

Something like this     lt div onclick  alert  test     gt    lt  div gt

User · Answer

Well you could either add  lt a gt  lt  a gt  tags and place the div inside it  adding an href if you want the div to act as a link  Or else just use Javascript and define an  OnClick  function  But from the limited information provided  it s a bit hard to determine what the context of your problem is

User · Answer

AFAIK you will need at least a little bit of JavaScript     I would suggest to use jQuery   You can include this library in one line  And then you can access your div with     div   click function         do stuff here       and respond to the click event

User · Answer

It is possible to make a link fill the entire div which gives the appearance of making the div clickable   CSS    my-div       background-color   f00      width  200px      height  200px    a fill-div       display  block      height  100       width  100       text-decoration  none      HTML    lt div id  my-div  gt       lt a href     class  fill-div  gt  lt  a gt   lt  div gt

User · Answer

My solution without JavaScript images  Only CSS used  It works in all browsers   HTML    lt a class  add to cart  href  https   www redracingparts com  title  Add to Cart   gt    buy now lt br   gt free shipping lt br   gt no further costs  lt  a gt    CSS    add to cart hover     background-color  FF9933    text-decoration none    color  FFFFFF      add to cart     cursor pointer    background-color  EC5500    display block    text-align center    margin-top 8px    width 90px    height 31px    border-radius 5px    border-width 1px    border-style solid    border-color  E70000      There is an example on https   www redracingparts com english motorbikesmotorcycles stackoverflow examples div clickable php

User · Answer

lt div onclick  location href       style  cursor  pointer   gt   lt  div gt

User · Answer

Nesting block level elements in anchors is not invalid anymore in HTML5  See http   html5doctor com block-level-links-in-html-5  and http   www w3 org TR html5 the-a-element html  I m not saying you should use it  but in HTML5 it s fine to use  lt a href     gt  lt div gt  lt  div gt  lt  a gt    The accepted answer is otherwise the best one  Using JavaScript like others suggested is also bad because it would make the  link  inaccessible  to users without JavaScript  which includes search engines and others

User · Answer

clickable     cursor pointer

User · Answer

we are using like this         lt label for  1  gt   lt div class  options  gt   lt input type  radio  name  mem  id  1  value  1  checked  checked   gt option one      lt  div gt   lt  label gt      lt label for  2  gt    lt div class  options  gt    lt input type  radio  name  mem  id  2  value  1  checked  checked   gt option two  lt  div gt  lt  label gt    using      lt label for  1  gt    tag and catching is with   id 1   hope this helps

User · Answer

Without JS  I am doing it like this   My HTML      lt div class  container  gt     lt div class  sometext  gt Some text here lt  div gt     lt div class  someothertext  gt Some other text here lt  div gt     lt a href     class  mylink  gt text of my link lt  a gt   lt  div gt    My CSS      container    position  relative      container a    position  absolute    top  0    left  0    width  100     height  100     text-indent  -9999px    these two lines are to hide my actual link text    overflow  hidden    these two lines are to hide my actual link text

User · Answer

jQuery would allow you to do that   Look up the click   function  http   api jquery com click   Example       yourDIV   click function       alert  You clicked the DIV

User · Answer

a whole div links to another page when clicked without javascript and   with valid code  is this possible    Pedantic answer  No   As you ve already put on another comment  it s invalid to nest a div inside an a tag   However  there s nothing preventing you from making your a tag behave very similarly to a div  with the exception that you cannot nest other block tags inside it  If it suits your markup  set display block on your a tag and size   float it however you like   If you renege on your question s premise that you need to avoid javascript  as others have pointed our you can use the onClick event handler  jQuery is a popular choice for making this easy and maintainable   Update   In HTML5  placing a  lt div gt  inside an  lt a gt  is valid   See http   dev w3 org html5 markup a html a-changes  thanks Damien

[html] How to make a whole 'div' clickable in html and css without JavaScript?

Examples related to html

Examples related to css

Examples related to click