#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13

    Whole img a link


    Hi

    I ma using background images in my nav menu and want to make the whole image a link and not just the text

    I tried commenting out the margins and padding and just having display: block in the a styles but that didn't work

    Any ideas

    My html below

    [HTML]
    <div id="navigation">
    <div id="navigation-inner">
    <ul class="sf-menu">
    <li><a href="index.php">HOME</a></li>
    <li><a href="choosevalet.php">CHOOSE<br>YOUR<br>VALET</a></li>
    <li><a href="contact.php">CONTACT</a></li>
    </ul>
    </div>
    </div>
    [/HTML]

    The CSS is below

    Code:
    #navigation {
    position:relative;
    z-index:4;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 2%;
    }
    
    #navigation-inner {
    /*position:absolute;*/
    z-index:4;
    top: 0;
    left:-20px;
    }
    
    .sf-menu {
    margin:0;
    margin-top: -25px;
    margin-left: 120px;
    /*padding-left: 5px;
    padding-right:0;
    padding-bottom:0;*/
    list-style-type:none;
    padding: 0;
    }
    
    /*.sf-menu li {
    width: 92px;
    height: 110px;
    margin-left:0;
    margin-right:0;
    margin-top: 0;
    margin-bottom:8px;
    /*background: #cab077;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    /*background: url(../images/nav-background.png);*/
    /*background-image:url('./images/nav-background.png');*/
    /*background: url(../images/navballoon.png) no-repeat;
    background-position:0 0;
    }*/
    
    .sf-menu li {
    width: 205px;
    height: 155px;
    display: block;
    float: left;
    margin-left: 30px;
    /*margin: 0px 0px 8px 0px;*/
    /*background: #cab077;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    /*background: url(../images/nav-background.png);*/
    /*background-image:url('./images/nav-background.png');*/
    background: url(../images/navbucket.png) no-repeat;
    background-position:0 0;
    }
    
    .sf-menu li:hover {
    /*background: #FFFFFF;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;*/
    background: url(../images/navbuckethover.png) no-repeat;
    background-position:0 0;
    color: #000000;
    }
    
    .sf-menu li a {
    width: 100%;
    margin-top: 65px;
    margin-left: -10px;
    display: block;
    /*padding: 20px;
    padding-left: 2px;
    padding-top: 30px;*/
    font-size: 15px;
    font-weight:bold;
    color: #FFFFFF;
    /*background: #0C3;*/
    text-align: center;
    }
    
    .sf-menu li a:hover {
    	display: block;
    	width: 205px;
    text-decoration:none;
    color: #FFFFFF;
    }
    Kind regards

    Ian
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    The solution is what you said didn't work, because it does. For the whole area to be clickable, the whole area needs to be a link. So the <a> needs to be display: block, and any padding on the li's should be on the <a> instead.

IMN logo majestic logo threadwatch logo seochat tools logo