Horizontal Menu only with Image Css - html

Question

Am New to Asp.net and CSS.
I Need to Show Horizontal Menu only image like this
image 1 image 2 image 3 image 4
So I tried like this
CSS
#UlIcon
{
height: 100%;
list-style:list-style-image;
text-align:center;
padding-left: 5px;
}
#UlIcon li { display:inline; width : 100px; height:100%;}
#LiNew
{
list-style-image:url(/IMG/New.png);
}
#LiSave
{
list-style-image:url(/IMG/Save.png);
}
#LiDelete
{
list-style-image:url(/IMG/Delete.png);
}
#LiLog
{
list-style-image:url(/IMG/New.png);
}
#Padding-right {padding-right:15px;}
ASP.NET CODE
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew"></li>
<li id="LiSave"></li>
<li id="LiDelete"></li>
<li id="LiLog"></li>
</ul>
</div>
But it shows empty. If I Remove display: inline in li css, the image shows vertically in center of the div. What am doing wrong here?
How do I get the solution?
Am using Visual Studio 2008 and CSS2.1

Answer 1

the css list-style-image will place an image next to each point or listed text. it act as an image bullet
I am of the opinion you would like to have this
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew">
<img src="link1">
</li>
<li id="LiSave">
<img src="link2">
</li>
<li id="LiDelete">
<img src="link3">
</li>
<li id="LiLog">
<img src="link4">
</li>
</ul>
</div>
then you can use css to display all list elements inline-block
example display:inline-block
here is a snippet
img {
display:inline-block;
width:50px;
height:50px;
}
li {
display:inline-block;
}
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
</li>
<li id="LiSave">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqyRrA_-5TM0vpRU8BcTPFpGubyzgHGtvE9FQzpnVMPnKnoZwkmQ">
</li>
<li id="LiDelete">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShZ_bYswgHlQLrUn8egsNTTZn5nCmSz1NcFmvtUzujpZhrBflUiQ">
</li>
<li id="LiLog">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
</li>
</ul>
</div>