Menu
Neither googling nor browsing in SO helped me - hope someone here can solve this :
I have the following html :
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
and css
ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}
the "hook.png" image is 32x35 px - but whenever I create list items, text (e.g. ABC...) will always be shown below the image. Tried line-height and those 100% thingies - but neither worked out.
Any quick help :/ ?
702
Try some variation of
ul{
background-image: url(../img/hook.png);
background-repeat: no-repeat;
background-position: 95% 50%;
}
Obviously the position is unlikely to fit your needs, but fiddling around with this method would be your best bet I'd say.
182
<html>
<head>
<style>
ul
{
list-style-image:none;
}
li
{
color:#FFFFFF;
font-size:16px;
text-shadow: 0em 0.13em 0.13em #2A2A2A;
font-family:Helvetica,Arial,Sans-Serif;
font-weight:normal;
line-height:35px;
margin-bottom:5px;
padding-left: 36px;
background-image: url('../img/hook.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>
Never seen any of our designers try to use the list-style-image when implementing custom icons for list, I guess this is why :)
38
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
