Menu
I've got a problem with some ul and li...
I'd like to create an unordered list with 3 li and each li has got a different list-style-image...
I wrote this code but the image don't appear...
Can you help me? Thanks!
EDIT: Post updated with HTML code ;)
<div id="right_main">
<ul id="mainFeatures">
<li id="wishlist">Some text here...</li>
<li id="sharing">Some text here...</li>
<li id="linking">Some text here...</li>
</ul>
</div>
#right_main ul#mainFeatures {
height:250px;
width:350px;
overflow:hidden;
margin-left:25px;
}
#mainFeatures li {
font-weight:bold;
font-size:22px;
font-family:"Myriad Pro", sans-serif;
padding:5px;
}
#mainFeatures li#wishlist {
list-style-image:url(images/wishListImage.png);
list-style-position:outside;
}
#mainFeatures li#sharing {
list-style-image:url(images/sharingListImage.png);
list-style-position:outside;
}
#mainFeatures li#linking {
list-style-image:url(images/linkingListImage.png);
list-style-position:outside;
}
786
The list-style-image CSS property sets an image to be used as the list item marker. It is often more convenient to use the shorthand list-style .
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman| lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none| inherit; Property values: disc:This is the default value.
Approach 1: First, we will set the list-icon as background-image and we can customize its size using the height and width property. Example: HTML.
Most likely, your images were cut off by overflow: hidden. I've removed that and it works now: http://jsfiddle.net/ahwhj/
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
