Background image as list bullet

| Web Design | 0 Comments

If you're like me then you've probably spent many a frustrating time trying to get those darn list-style-image: url(/images/bullet.gif) bullets aligned properly with the text. They are either too high or too far to the left and the inside list-style only messes things up even more.

The trick is to disable the css list-style attribute and use background images instead. I tag the ul-element with an id #list-images-background and put the following in my css file:

ul#list-images-background li {
    list-style: none; 
    background-repeat: no-repeat;
    background-position: 0 2px;
    padding-left: 24px;
}

An example is the list of my social media links on the right of my blog index page. Each list bullet image can be defined separately by using the background-image:url(/images/facebook.png) style. The markup code looks something like this:

<ul id="list-background-images">
    <li style="background-image:url(/images/facebook.png)"><a href="http://www.facebook.com/kiffin.gish" target="_top">Facebook</a></li>
    <li style="background-image:url(/images/twitter.png)"><a href="http://twitter.com/kiffin" target="_top">Twitter</a></li>
    <li style="background-image:url(/images/googleplus.png)"><a href="http://www.google.com/+KiffinGish" target="_top">Google+</a></li>
    <li style="background-image:url(/images/linkedin.png)"><a href="http://www.linkedin.com/in/kiffin" target="_top">LinkedIn</a></li>
    <li style="background-image:url(/images/github.png)"><a href="http://github.com/kgish" target="_top">GitHub</a></li>
</ul>

The exact position of the image bullet can now be tweaked easily by adjusting the values of padding-left and background-position. After some minimal fine-tuning, here's what the list finally looks like:

social-network-icons.png

The final result looks pretty professional, at least for someone like me. I invite all you so-called expert web designers out there to come up with something better.

Leave a comment

Random entries

Here are some random entries that you might be interested in:

Recent Assets

  • flitsfoto-B5H3-IoN-b9E4tr9OrFarmWfWrP5pxuN8AgYw45ABAnqqDrmjSqIc-KKoAQ9Bu_k.jpeg
  • flitsfoto-mjuWdZ1wBk6gJbu9rP7Bu6bETxZplWXFUoEJIA_HfMF0i0MQfgF_y5024mEsOBfH.jpeg
  • Kiffin-10th-hole-2017-05-small.jpg
  • Kiffin-10th-hole-2017-05.jpg
  • ember-rails-and-json-api.png
  • screenshot-www.golf.nl-2017-05-04-15-38-01.png
  • putting-mat.png
  • finished-just-in-time.png
  • Tenerife-flight-path.png
  • listen-to-me-marlon.jpg
  • sneeuwval.jpg
  • frozen-crystals.png

Golf Handicap

Information

This personal weblog was started way back on July 21, 2001 which means that it is 7-21-2001 old.

So far this blog contains no less than 2288 entries and as many as 1877 comments.

Important events

Graduated from Stanford 6-5-1979 ago.

Kiffin Rockwell was shot down and killed 9-23-1916 ago.

Believe it or not but I am 10-11-1957 young.

Began well-balanced and healthy life style 1-8-2013 ago.

My father passed away 10-20-2000 ago.

First met Thea in Balestrand, Norway 6-14-1980 ago.