CSS -Menu work as <a href> with background not just text

Question

my code of menu work fine, but only text is a href, how ever i try to make it a bit more user friendly so make even background in

to work as href but its not working, can somebody help me to fix it? My HTML:

 <div id="menu">
    <ul>
     <li><a href="#">GAMESITES</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">HRY<span class="arrow"></a></span></li>
      <li class="spacer"> </li>
      <li><a href="#">SERVERY</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">CLANKY</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">FORUM</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">DOWNLOADS</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">BLOGY</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li>FLASHOVKY<span class="arrow"></span></li>                                                
    </ul> 
  </div>

My CSS:

    #menu{
        background-image: url("images/menubg.png");
        background-repeat: repeat-x;
        height: 44px;
        width: 983px;
        margin: 0 22px;          
    }

    .spacer{
        background-image: url("images/menu_spacer.png");
        background-repeat: no-repeat;
        width: 1px;
        height: 25px;
        margin: 0px 12px;
    }
#menu ul{
    list-style-position: inside;    /* Bodka v novom riadku vo vnutry */
    list-style-type: none;          /* bez bodky */
}

#menu ul li{   
    padding: 0px 5px 0px 0px;
    display: inline-block;
    color: #f7f7f7;
}

.arrow{
    background-image: url("images/sipka.png");
    background-repeat: no-repeat;
    width: 10px;
    height: 8px;
    margin-left: 8px;
    display: inline-block; 
}

Live preview: http://funedit.com/andurit/try4/

Upvotes: 0

Views: 148

Answer 1

Your markup can be heavily simplified into this:

<div id="menu">
    <ul>
        <li><a href="#">GAMESITES</a></li>
        <li><a href="#">HRY</a></li>
        <li><a href="#">SERVERY</a></li>
        <li><a href="#">CLANKY</a></li>
        <li><a href="#">FORUM</a></li>
        <li><a href="#">DOWNLOADS</a></li>
        <li><a href="#">BLOGY</a></li>
        <li><a href="#">FLASHOVKY</a></li>                                                
    </ul> 
</div>

Flexbox solution

If you're willing to explore modern CSS specifications, you can always use flexbox instead of relying on inline-block to position your elements — check out the demo fiddle here: http://jsfiddle.net/teddyrised/9FZS8/

#menu {
    background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
    background-repeat: repeat-x;
    height: 44px;
    width: 983px;
    font-family: Arial;
}
#menu ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu ul li {
    color: #f7f7f7;
    flex: 1 1 auto;
}
#menu ul li a {
    background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
    background-repeat: no-repeat;
    background-position: top right;
    color: #f7f7f7;
    display: block;
    padding: 14px 0;
    text-decoration: none;
    text-align: center;
}
#menu ul li:last-child a {
    background: none;
}
#menu ul li a:after {
    background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
    content: '';
    width: 10px;
    height: 8px;
    margin-left: 8px;
    display: inline-block;
}

---

Non-Flexbox solution

Otherwise, you can always fallback to floating your individual <a> elements, but that requires you to calculate the padding for each of them carefully so the menu does not overflow: http://jsfiddle.net/teddyrised/9FZS8/2/

#menu {
    background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
    background-repeat: repeat-x;
    height: 44px;
    width: 983px;
    font-family: Arial;
}
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#menu ul li {
    color: #f7f7f7;
}
#menu ul li a {
    background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
    background-repeat: no-repeat;
    background-position: top right;
    color: #f7f7f7;
    float: left;
    padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
    text-decoration: none;
    text-align: center;
}
#menu ul li:last-child a {
    background: none;
}
#menu ul li a:after {
    background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
    content: '';
    width: 10px;
    height: 8px;
    margin-left: 8px;
    display: inline-block;
}

Answer 2

Add to your links a padding of x and a margin of -x, for example:

#menu a {
    padding: 20px;
    margin: -20px;
}

Answer 3

Make link to take full space:

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