CSS- Make Entire Div Clickable by putting the div in is not working

Question

I have to make entire div with another elements inside it clickable. I do it by writing the dive inside <a href="#"> </a> like this:

<a href="#">
     <div class="detail padding-lg full-width like-on-post">
        <div class="avtar round  pull-left">
            <span class="user-personal-pic default-user-avtar border circle             avtar user-image you-menu ">
               <g:if test="${usrHeader?.avatarUrl?.indexOf('no-avatar')    ==-1 || usrHeader?.avatarUrl?.length() == 0 || usrHeader?.avatarUrl == null}">
              <img src="${usrHeader?.avatarUrl}" width="34" height="34" alt="Avatar" />
                 </g:if>

             </span>
            </div>
         <div class="detail-container">
                <p class="name">${usrHeader?.fullName()}</p>
               <p class="footer mouse-over"><g:link controller="connection" action="details">View profile</g:link></p>
                                </div>
                        </div>
                </a>

For some reason instead putting the entire div to <a href="#"> </a> it put each element to different <a href="#"> </a>.

How I can I entire to aall div to <a href="#"> </a>?

I think `` will produce an anchor tag, so you cannot nest anchor inside an anchor hence it doen't work for you — Mr. Alien, Mar 11 '15 at 08:16
In addition to the point made by Mr. Alien, `div` are block level elements and are not valid within `a` tags. For more info please take a look at http://stackoverflow.com/questions/3379392/what-elements-can-be-contained-within-a-a-tag. A way round this may be to use `span` tags instead and change them to `display: block;` in css. — Hidden Hobbes, Mar 11 '15 at 09:07

score 1 · Answer 1 · answered Mar 11 '15 at 09:20

By default a <a> tag is displayed inline, any inline element is not really affected by padding, so if you want to make a button that is clickable everywhere inside it, make an empty div put the <a> in it and give it display:block; or display:inline-block; then you can add padding to it to expend it, or use width, depends what u need to do, here is a small Example

<div class="btn"><a href="#">Button</a></div>

a{
  display:inline-block;
  padding:20px;
  text-decoration:none;
  color:white;
  background:#262626;
  font-family:Arial;
  transition:all 0.5s;
}
a:hover{
  background:#000;
}

Ram kumar · Answer 2 · 2015-03-11T08:54:39.757

0

Did you tried to add display:block on a tag on css. Pleas try this one hope it will work

edited Mar 11 '15 at 08:54

answered Mar 11 '15 at 08:19

Ram kumar

3,152
6
32
49

Don't you mean like this? – Ram kumar Mar 11 '15 at 12:22

score 0 · Answer 3 · answered Mar 11 '15 at 08:21

Following is an example having a tag inside div and a made to display:block and width and height 100% so whole div is now clickable.

Whole div is clickable

div{
background:green;
  height:100px;
  border:1px solid blue;

}
a{
  background:yellow;
  display:block;
  width:100%;
  height:100%;
  }

<div>
  <a href="http://google.co.in">google</a>
  </div>

score 0 · Answer 4 · answered Mar 11 '15 at 08:23

0

To make the div clickable, do

<div onclick="/*Your JavaScript Code*/" style="cursor:pointer;">

This should work for most purposes.

answered Mar 11 '15 at 08:23

Charly

160
11

score 0 · Answer 5 · answered Mar 11 '15 at 08:55

0

Try like this: Demo

CSS:

a {
    display:block;
    background-color:yellow;
    text-decoration:none;
}
a span {
    display:block;
    background-color:red;
    color:#fff;
}

Set target for <a>

<a href="http://google.com" target="_blank">...</a>

answered Mar 11 '15 at 08:55

G.L.P

7,119
5
25
41

score 0 · Answer 6 · answered Mar 14 '15 at 22:09

0

Make the parent div relative positioned, and put in it an anchor tag with position:absolute, setting top:0,right:0,bottom:0 and left:0.

answered Mar 14 '15 at 22:09

Giacomo Paita

1,411
2
12
21

CSS- Make Entire Div Clickable by putting the div in is not working

6 Answers6