Need to make a clickable div button

Question

Kindly go through this link and notice the solution given by "thepeer": https://stackoverflow.com/a/3494108

I am having trouble understanding his solution. Let me illustrate with the example of a webpage that I am trying to build. I am using HTML5 to build "buttons". Now since these buttons are actually DIV objects, I somehow need to make them "clickable" which would lead the viewer to another page, and that too, without making the "link" visible. The div object should act as a button and I don't intend to "include" a hypertext-ed line of text inside the button.

I think the solution given by "thepeer" does exactly that but i am unable to understand his solution and implement it. Perhaps a very small example would benefit me.

Suppose this is the button that i want to make :

 <div id="music" class="nav">Music I Like <span id="hyperspan"><a href="Music.html"></a></span></div>

And here's the CSS as "thepeer" suggested :

.hyperspan
{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:1;
}

Now, obviously, I misunderstood his solution and hence my above attempt is incorrect. I don't want to resort to javascript so please help me! Sorry for my noobish-ness.

User · Answer

Just use an  lt a gt  by itself  set it to display  block  and set width and height  Get rid of the  lt span gt  and  lt div gt   This is the semantic way to do it  There is no need to wrap things in  lt divs gt   or any element  for layout  That is what CSS is for   Demo  http   jsfiddle net ThinkingStiff 89Enq   HTML    lt a id  music  href  Music html  gt Music I Like lt  a gt    CSS    music       background-color  black      color  white      display  block      height  40px      line-height  40px      text-decoration  none      width  100px      text-align  center      Output

User · Answer

There are two solutions posted on that page  The one with lower votes I would recommend if possible    If you are using HTML5 then it is perfectly valid to put a div inside of a  As long as the div doesn t also contain some other specific elements like other link tags    lt a href  Music html  gt     lt div id  music  class  nav  gt      Music I Like    lt  div gt   lt  a gt    The solution you are confused about actually makes the link as big as its container div  To make it work in your example you just need to add position  relative to your div  You also have a small syntax error which is that you have given the span a class instead of an id  You also need to put your span inside the link because that is what the user is clicking on  I don t think you need the z-index at all from that example   div   position  relative     hyperspan       position absolute      width 100       height 100       left 0      top 0      lt div id  music  class  nav  gt Music I Like       lt a href  http   www google com  gt            lt span class  hyperspan  gt  lt  span gt       lt  a gt      lt  div gt    http   jsfiddle net rBKXM 9  When you give absolute positioning to an element it bases its location and size after the first parent it finds that is relatively positioned  If none  then it uses the document  By adding relative to the parent div you tell the span to only be as big as that

[css] Need to make a clickable <div> button

The answer is

Examples related to css

Examples related to html

Tags