a href link for entire div in HTML CSS

Question

Here is what I am trying to accomplish in HTML CSS   I have images in different heights and widths  but they are all under 180x235  So what I want to do is create a div with border and vertical-align  middle them all  I have successfully done that but now I am stuck on how to properly a href link the entire div    Here is my code    lt div id  parentdivimage  style  position relative width 184px height 235px border-width 2px border-color black border-style solid text-align center   gt       lt div id  childdivimage  style  position absolute top 50  height 62px margin-top -31px   gt           lt img src  myimage jpg  height  62  width  180  gt       lt  div gt   lt  div gt      Please note that for the sake of copy pasting here easily  the style code is inline   I read somewhere that I can simply add another parent div on top of the code and then do a href inside that  However  based on some research it won t be valid code    So to sum it up again  I need the entire div   parentdivimage  to be a href link

User · Answer

put display block on the anchor element  and or zoom 1    but you should just really do this    a parentdivimage position relative  width 184px  height 235px                    border 2px solid  000  text-align center                    background-image url  myimage jpg                      background-position  50  50                     background-repeat no-repeat  display block                    text-indent -9999px       lt a id  parentdivimage  gt whatever your alt attribute was lt  a gt

User · Answer

Make the div of id  childdivimag  a span instead  and wrap that in an a element  As the span and img are in-line elements by default this remains valid  whereas a div is a block level element  and therefore invalid mark-up when contained within an a

User · Answer

What I would do is put a span inside the  lt a gt  tag  set the span to block  and add size to the span  or just apply the styling to the  lt a gt  tag  Definitely handle the positioning in the  lt a gt  tag style  Add an onclick event to the a where JavaScript will catch the event  then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click  This works in cases with or without JavaScript enabled  and any AJAX can be handled in the Javascript listener    If you re using jQuery  you can use this as your listener and omit the onclick in the a tag        idofdiv   live  click   function e          add stuff here     e preventDefault    or use return false        this allows you to attach listeners to any changed elements as necessary

User · Answer

A link with  lt div gt  tags    lt div style  cursor  pointer   onclick  window location  http   www google com    gt       Something in the div   lt  div gt    A link with  lt a gt  tags    lt a href  http   www google com  gt       lt div gt          Something in the div       lt  div gt   lt  a gt

User · Answer

UPDATE 06 10 2014  using div s inside a s is semantically correct in HTML5    You ll need to choose between the following scenarios    lt a href  http   google com  gt       lt div gt          Hello world      lt  div gt   lt  a gt    which is semantically incorrect  but it will work    lt div style  cursor  pointer   onclick  window location  http   google com    gt      Hello world  lt  div gt    which is semantically correct but it involves using JS    lt a href  http   google com  gt       lt span style  display  block   gt          Hello world      lt  span gt   lt  a gt    which is semantically correct and works as expected but is not a div any more

User · Answer

This can be done in many ways  a  Using nested  inside a  tag    lt a href  link1 html  gt      lt div gt  Something in the div  lt  div gt    lt  a gt    b  Using the Inline JavaScript Method   lt div onclick  javascript window location href  link1 html    gt     Some Text   lt  div gt    c  Using jQuery inside  tag  HTML    lt div class  demo   gt  Some text here  lt  div gt    jQuery       demo   click  function       window location href  link1 html

User · Answer

Do it like this    Parentdivimage should have specified width and height  and its position should be   position  relative    Just inside the parentdivimage  next to other divs that parent contains you should put    lt a href  linkt to smthn com  gt  lt span class  clickable  gt  lt  span gt  lt  a gt    Then in css file    clickable     height  100     width  100     left  0    top  0    position  absolute         z-index  1      The span tag will fill out its parent block which is parentdiv  because of height and width set to 100   Span will be on the top of all of surrounding elements because of setting z-index higher than other elements  Finally span will be clickable  because it s inside of an  a  tag

User · Answer

Two things you can do    Change  childdivimage to a span element  and change  parentdivimage to an anchor tag   This may require you to add some more styling to get things looking perfect   This is preffered  since it uses semantic markup  and does not rely on javascript  Use Javascript to bind a click event to  parentdivimage   You must redirect the browser window by modifying window location inside this event   This is TheEasyWayTM  but will not degrade gracefully

User · Answer

Going off of what Surreal Dreams said  it s probably best to style the anchor tag in my experience  but it really does depend on what you are doing   Here s an example   Html    lt div class  parent-div  gt     lt a href     gt Test lt  a gt     lt a href     gt Test lt  a gt     lt a href     gt Test lt  a gt   lt  div gt    Then the CSS    parent-div     width  200px    a     display block    background-color   ccc    color   000    text-decoration none    padding 10px    margin-bottom 1px    a hover     background-color   ddd      http   jsbin com zijijuduqo 1 edit html css output

User · Answer

Why don t you strip out the  lt div gt  element and replace it with an  lt a gt  instead   Just because the anchor tag isn t a div doesn t mean you can t style it with display block  a height  width  background  border  etc   You can make it look like a div but still act like a link   Then you re not relying on invalid code or JavaScript that may not be enabled for some users

[html] a href link for entire div in HTML/CSS

Examples related to html

Examples related to css