How to turn CSS block into a clickable link?

Question

Here on my site for the tabs, only the actual text its self is clickable. What I am trying to do is make the entire block clickable.

The class that is being called on my "About Me" tab is "menu-item menu-item-type-custom menu-item-object-custom menu-item-179" and so does the other tabs, they just have a different number for the menu item number.

The CSS that I could find containing the tabs was "current-menu-item".

I've looked at this: how to make the whole block clickable? and looked at: block level clickable area not working correctly

My site: http://travisingram.net/ The CSS code that contained "current-menu-item".

.current-menu-item {
    color: #fff !important;
    background-color: #3e3f3f !important;
    border-radius: 3px;
    border: 3px solid #e4b41b;

}
.sf-menu li:hover , /*.sf-menu li.sfHover,*/ .current-menu-item {
    color: #fff !important;
    background-color: #3e3f3f;
    border-radius: 3px;
    border: 3px solid #e4b41b;
}
.sf-menu li ul, .current-menu-item, .sf-menu li:hover, .sf-menu li.sfHover {
    border: none !important
}

Thanks for trying to help everyone, ut nothing is working..

To make the entire block clickable you must have the size of equal to the size of

score 2 · Answer 1 · answered Nov 01 '13 at 17:54

The reason that the block doesnt act like a link is because it isnt a link. Instead of making the li a rectangle for the user to click on, you should be doing that for the links inside of the li. in your css set your "a" elements to block, and then specify some padding for them. You will be able to click inside their area.

a{ display:block; padding:10px 20px; }

look at this example http://jsfiddle.net/NtPAe/

score 0 · Answer 2 · answered Nov 01 '13 at 17:55

0

remove the 10 px padding from .sf-menu li and put it in .sf-menu a

.sf-menu a {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px 15px;
text-decoration: none;
}
.sf-menu li {
border: 3px solid #FCC71F;
border-radius: 3px;
float: left;
padding: 0;
position: relative;
text-transform: capitalize;
}

answered Nov 01 '13 at 17:55

philthyfool

194
2
5
17

What browser were you using? – Travis Nov 04 '13 at 19:31

score 0 · Answer 3 · answered Nov 01 '13 at 17:56

For this you need to use the property line-height. Use this to set the final height of your li elements instead of padding.

First Step : change the padding in your li
```
.sf-menu li {
  padding:0;
```

Second Step : Add line-height

.sf-menu li {
  padding:0;
  line-height:30px; 
}

score 0 · Answer 4 · answered Nov 01 '13 at 18:11

0

the best solution is to remove a.href this is sample from you site:

< li id="menu-item-196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-196">
< a href="http://travisingram.net/visual-c-sharp-tools">My Tools</a>
</li >

change it with this:

<li id="menu-item-196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-196" onclick="window.location.href = 'http://travisingram.net/visual-c-sharp-tools';" >My Tools</li>

answered Nov 01 '13 at 18:11

mandza

330
9
24

This is just a simple example: http://1zh.us/examples/travis.html to see how it works. You can edit your own site referrer to this code. i hope i could help – mandza Nov 02 '13 at 12:15

How to turn CSS block into a clickable link?

4 Answers4