Home arrow Style Sheets arrow Styling HTML Lists with CSS: Replacing Bullets with Background Images
STYLE SHEETS

Styling HTML Lists with CSS: Replacing Bullets with Background Images


In this fifth part of a series, I discuss a couple of basic methods that permit you to replace the default bullets of an unordered HTML list with a custom background image. These simple-to-understand approaches should cause you no major problems when you implement them while building your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
September 08, 2010
TABLE OF CONTENTS:
  1. · Styling HTML Lists with CSS: Replacing Bullets with Background Images
  2. · A consistent look with the padding and background CSS properties

print this article
SEARCH DEVARTICLES

Styling HTML Lists with CSS: Replacing Bullets with Background Images
(Page 1 of 2 )

Unquestionably, the “multipurpose” nature of HTML lists makes these elements one of the most important pillars in the structural markup of a web page. If you think about it carefully, lists are so versatile that they can be used in a huge variety of situations, ranging from the creation of generic containers and sets of linked items, to the definition of forms layouts, while helping to preserve the page’s semantic meaning.

In this case, though, the term “versatile” is not synonymous with “approachable.” In reality, lists are wild creatures that are pretty hard to tame, especially when it comes to giving them a consistent visual presentation via CSS.

This doesn’t imply, however, that styling HTML lists is a process doomed to fail from the very beginning. That's not at all true, trust me. To demonstrate this, in previous installments of this series I coded a number of basic examples that showed how to control certain properties of a sample list through CSS. These included the assignment of absolute values to its padding and margins, and decorating its items with square and ring-like bullets.

It’s worth stressing, nonetheless, that CSS offer a plethora of options for improving the look of HTML lists, which must be covered in depth. Therefore, in this fifth part of the series I’m going to illustrate how to replace the default bullets assigned to the items of a list with a custom background image. This will be a two-step process, where the image in question will first be displayed via the “list-style-image” property, and then by using a simple “background” shorthand.

Ready to learn how to spice up your web page lists with engaging background pictures? Then begin reading right now!

Replacing item bullets with a single background image

As I mentioned in the introduction, there are two primary methods that can be used for replacing the default bullets assigned to the items of a list with a custom background image. The first one uses the “list-style-image” CSS property, and its implementation is a breeze. However, the best way to understand how this method works is by example, so below I coded one for you that demonstrates its functionality:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample list with using the "list-style-image" property</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
p {
    margin: 0 0 10px 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
ul#sample_list {
    list-style-image: url(arrow_right.gif);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with using the "list-style-image" property</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <ul id="sample_list">
            <li><a href="#">List Item 1</a></li>
            <li><a href="#">List Item 2</a></li>
            <li><a href="#">List Item 3</a></li>
            <li><a href="#">List Item 4</a></li>
            <li><a href="#">List Item 5</a></li>
            <li><a href="#">List Item 6</a></li>
            <li><a href="#">List Item 7</a></li>
            <li><a href="#">List Item 8</a></li>
        </ul>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>   

As shown above, the value assigned to the “list-style-image” property is the URL pointing to the background image that will be displayed next to each list item. In this particular case, the image is a mini arrow icon courtesy of FAMFAMFAM (http://www.famfamfam.com/lab/icons/mini/), but naturally it’s possible to utilize any other picture and obtain similar results.

And speaking of results, check out the screen shot below for what you'll see when the HTML list coded above is displayed on the browser:

The sample list looks much better, doesn’t it? However, using the previous “list-style-image” property is in fact a quick and dirty way to decorate a list with a custom image, since most browsers will display the graphic in a different position with reference to its associated item. The good news is that this issue can be easily addressed by using the second approach referenced in the introduction, which requires using the “padding” and “background” CSS properties together.

Assuming that you’re interested in seeing a concrete implementation of this method, in the next segment I’m going to recreate the previous example, this time by using the aforementioned properties.

Now, click on the link below and keep reading.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials