Center Image Above List Items

I am working on a project and having trouble with my UL>LI style. i am trying to put images all over the list and i want when i hover over the link the image color change so i u

Solution 1:

Made two changes

1. Added a top padding of 25px to li for the image

   #TopMenuulli {
   display: inline;
   list-style-image: none;
   list-style-position: outside;
   list-style-type: none;
   margin: 0px;
   padding: 25px4px06px;
   }
   

2. changed the logos background-position:center; ( Please note that I have used short hand notation )

   #TopMenuulli.home {
   background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat center;
   height:16px; width:16px;
   }
   #TopMenuulli.home:hover {
   background:url('http://cdn1.iconfinder.com/data/icons/cologne/16x16/home.png') no-repeat center;
   }
   

Working Demo : http://jsfiddle.net/naveen/HuTge/1/

P.S: Please note that I am using #TopMenu and markdown is not working properly.

Solution 2:

You need to add css for your anchors:

a {
  padding-top: 20px;
  background: url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat 50%0px;
  height: 16px;
  width: 16px;
}

The 50% centers the background. Of course, you should use a more specific selector for all your anchors, instead of simply a.

To change the image on mouse over, you need to:

a:hover {
 background-image: url('http://icons.iconarchive.com/icons/3xhumed/mega-games-pack-32/16/Team-Fortress-2-new-16-icon.png');
}

see demo here

Solution 3:

HTML:

<ulclass="navigation"><li><aid="nav-myaccount"href="/account.php">My Account</a></li><li><aid="nav-orderstatus"href="/orderstatus.php">Order Status</a></li></ul>

CSS:

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.navigationli {
    display: inline;
    margin: 0px;
    padding: 0px4px06px;
}

ul.navigationlia#nav-myaccount {
    background-image: url(nav-myaccount.png);
    background-repeat: no-repeat;
    background-position: center top;
}

ul.navigationlia#nav-myaccount:hover {
    background-image: url(nav-myaccounthover.png);
    background-repeat: no-repeat;
    background-position: center top;
    color: #333;
}

ul.navigationlia#nav-orderstatus {
    background-image: url(nav-orderstatus.png);
    background-repeat: no-repeat;
    background-position: center top;
}

ul.navigationlia#nav-orderstatus:hover {
    background-image: url(nav-orderstatushover.png);
    background-repeat: no-repeat;
    background-position: center top;
    color: #333;
}

Note that instead of using different pictures for every navigation item, you should put them all in the same picture and use background-position to change the position of the background, that way when you hover your mouse on navigation item, client doesn't have to load the hover image and there won't be a split-second moment when the image blinks because the hover image isn't loaded yet.