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

  • Tenerife-flight-path.png
  • listen-to-me-marlon.jpg
  • sneeuwval.jpg
  • frozen-crystals.png
  • winter-is-coming.png
  • donald-trump.png
  • Rex-indian-headdress.png
  • Liam-future-famous-golfer-2016-10.jpg
  • number-one.png
  • Mom-and-me-2016.png
  • 636101580191153661-Kiffen-0003675-02.jpg
  • the-haskell-road-ro-logic.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 2279 entries and as many as 1881 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.