Make whole
as link with proper HTML

Question

I know this has been up a lot of times before, but I couldn't find any solution in my specific case.

I've got a navigation bar and I want the whole <li>'s to be "linked" or "clickable" if you will. Now only the <a> (and the <div>'s I've fiddled with) is "clickable".

I've tried the li a {display: inner-block; height: 100%; width: 100%} method but the results where just horrible.

The source can be found here: http://jsfiddle.net/prplxr/BrcZK/

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="menu">
                <div id="innermenu">    
                    <ul id="menulist">       
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk2</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk3</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk4</div></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Do anyone have a neat solution to this?

Thank you in advance!

score 52 · Accepted Answer · answered Dec 06 '12 at 14:18

52

Get rid of the <div>s.
Set the <a> tags to have display: block
Move the padding from the <li> to the <a>.
The <li>s will need to be either floated or display: inline-block

Example: http://jsfiddle.net/8yQ57/

answered Dec 06 '12 at 14:18

Steve Pugh

978
9
9

Perfect! This is exactly what I was trying to achieve! Thank you very much, Steve! – Christian Lundahl Dec 06 '12 at 14:32
Saved me hours trying to get a link to apply to an entire slide on a Sharepoint site. Just had to add height:100%. – matt Mar 08 '15 at 00:16

starikovs · Answer 2 · 2012-12-06T14:32:49.187

9

Just use "display block" for link.

ul {
  display: block;
  list-style-type: none;
}

li {
  display: inline-block; /* or block with float left */
  /* margin HERE! */
}

li a {
  display: block;
  /* padding and border HERE! */
}

Here's the example http://jsfiddle.net/TWFwA/ :)

edited Dec 06 '12 at 14:32

answered Dec 06 '12 at 14:23

starikovs

3,240
4
28
33

This won't solve the entire problem. If padding is applied to the `li` (which it is), then there will still be unclickable space around the `a` (which will take up all the horizontal space *up to* the padding. – Ryan Kinal Dec 06 '12 at 14:25
1

Of course, padding should be inside link :) it's inside link in my jsfiddle sample. I think it's obvious. – starikovs Dec 06 '12 at 14:31

score 4 · Answer 3 · edited Dec 06 '12 at 14:24

I myself just had this problem.

The answer couldn't be simpler:

<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
Wrong:
.menuitem {
    list-style-type:        none;
    display:                 inline;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

Correct
.menuitem a {
    list-style-type:        none;
    display:                 block;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

in other words, you want to apply the css that the LI's had to the A element. Making sure that the A is a block line element

+1 for including code sample in your answer, and using actual CSS provided by the OP. — Ryan Kinal, Dec 06 '12 at 14:24

score 1 · Answer 4 · answered Dec 06 '12 at 14:18

1

I think you may have meant inline-block, not inner-block:

li a {display: inline-block; height: 100%; width: 100%; }

Also, inline-block has its own set of problem with older IE browsers, and probably won't react how you'd expect.

answered Dec 06 '12 at 14:18

Sean

626
5
12

Yes, I did. I might be getting too little sleep nowadays. :-) – Christian Lundahl Dec 06 '12 at 14:28

score 0 · Answer 5 · answered Dec 06 '12 at 14:16

0

Just format the a directly instead of the li with your styles.

I have alterd your fiddle http://jsfiddle.net/BrcZK/1/

answered Dec 06 '12 at 14:16

Jona

2,087
15
24

Mitchell · Answer 6 · 2012-12-07T07:27:05.093

0

You should make the a elements display:block or display:inline-block.

edited Dec 07 '12 at 07:27

answered Dec 06 '12 at 14:19

Mitchell

111
2

1

Because *appearing* clickable is not the same thing as *actually being* clickable. And it's even worse UX. – Ryan Kinal Dec 06 '12 at 14:26

score 0 · Answer 7 · answered Dec 06 '12 at 14:21

0

Here's what I do:

a { display: block; }

Then style the anchors as I see fit.

Here's the fiddle: http://jsfiddle.net/erik_lopez/v4P5h/

answered Dec 06 '12 at 14:21

Erik

935
11
28

score -1 · Answer 8 · answered Dec 06 '12 at 14:14

-1

a sir you use jquery ? if yes, you can try it :

$("li").click(function(){
   $(this).find('a').click();
});

or you could use it too as css:

li{
  position:relative;
}
li a {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

Choose one ... Good luck

answered Dec 06 '12 at 14:14

Michael Antonius

942
2
11
20

2

Not terribly good solutions this problem. jQuery is overkill (especially when there hasn't even been a mention of JavaScript). And `position: absolute` will cause the `li` to lose height and width. – Ryan Kinal Dec 06 '12 at 14:22

score -3 · Answer 9 · edited May 23 '17 at 12:02

-3

Move the <a> tags so that they wrap the <li> tags. According to this answer, anchor tags must contain inline elements, and it looks like your <li>'s are inline, so this should be valid.

edited May 23 '17 at 12:02

Community

1
1

answered Dec 06 '12 at 14:13

Scott S

2,696
16
20

Unfortunately, it's invalid for a `
` to be under anything except a `

Sean

Dec 06 '12 at 14:15

1

The inline or block nature of an element is defined in the HTML spec and is not changed by the CSS display property. display: inline just makes something look inline, it doesn't actually make it inline. – Steve Pugh Dec 06 '12 at 14:15

1

Actually, it's more that a `

`'s.

– Ryan Kinal Dec 06 '12 at 14:15

Make whole
as link with proper HTML

HTML

9 Answers9

Linked

Make whole as link with proper HTML

HTML

9 Answers9

Linked

Make whole
as link with proper HTML