Skip to content Skip to sidebar Skip to footer

Make Whole
  • As Link With Proper Html
  • 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
  • 's to be 'linked' or '
  • Solution 1:

    • 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/

    Solution 2:

    Just use "display block" for link.

    ul {
      display: block;
      list-style-type: none;
    }
    
    li {
      display: inline-block; /* or block with float left *//* margin HERE! */
    }
    
    lia {
      display: block;
      /* padding and border HERE! */
    }
    

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

    Solution 3:

    I myself just had this problem.

    The answer couldn't be simpler:

    <liclass="menuitem"><ahref="index.php"><divclass="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:1pxsolidblack;padding:10px20px10px20px;
    }
    
    Correct.menuitema {
        list-style-type:none;display:block;margin-left:5px;margin-right:5px;font-family:Georgia;font-size:11px;background-color:#c0dbf1;border:1pxsolidblack;padding:10px20px10px20px;
    }
    

    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

    Solution 4:

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

    lia {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.

    Solution 5:

    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;
    }
    lia {
      position:absolute;top:0px;left:0px;width:100%;height:100%;
    }
    

    Choose one ... Good luck

    Post a Comment for "Make Whole
  • As Link With Proper Html"