Home arrow Style Sheets arrow Page 2 - 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 - A consistent look with the padding and background CSS properties
(Page 2 of 2 )

As you’ll see in a moment, decorating the items of a list with a custom image using the “padding” and “background” CSS properties is a two-step process that requires first, the removal of the list’s default bullets; and second, the proper positioning of the image in question next to each item.

The following code sample shows how to perform this process with the previous unordered list:      

ul#sample_list {
    margin: 0 20px;
    padding: 0 20px;
    list-style: none;
}
ul#sample_list li {
   padding: 0 0 0 20px;
   background: url(arrow_right.gif) 5px no-repeat;
}

Even though this method does demand that you write a few more lines of code, it yields consistent results when used with most modern browsers. But in fact, I’m getting ahead of myself; to see the method in action, the earlier CSS styles must be coupled to the structure of the target HTML list.

This will be done in this article's final section, so read the next few lines.

Putting all the pieces together: including the CSS styles into a web page

As I promised in the segment that you just read, below I listed a web page containing the sample HTML list used in previous examples, but this time the page includes the group of CSS styles coded before. Here it is:

<!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 a background image</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 {
    margin: 0 20px;
    padding: 0 20px;
    list-style: none;
}
ul#sample_list li {
   padding: 0 0 0 20px;
   background: url(arrow_right.gif) 5px no-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with a background image</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>

Mission accomplished. At this point, you've learned how to apply another simple –yet effective -- approach that will let you spice up the items of an HTML list with an appealing background image, which will be rendered consistently across different browsers.

But wait a minute! The previous example would be rather incomplete if I don’t complement it with a screen capture that shows how the earlier sample list is displayed on screen. So, here’s the corresponding graphic: 

While this approach is a bit more complex to implement that the one that uses the “list-style-image” property, it definitely produces superior results, which makes it the preferred option when styling HTML lists with proprietary background images. So go ahead and start using it. You’ll be pleased with its functionality, believe me.

Final thoughts

In this fifth installment of the series, I discussed a couple of basic methods that permit you to replace the default bullets of an unordered HTML list with a custom background image. As you just saw, both approaches were very simple to understand, so you certainly won’t have major problems implementing them when building your own web pages.

So far, I've explained how to improve the visual presentation of lists where the corresponding items were displayed vertically. As you know, though, lists can be manipulated with CSS so that they’re rendered horizontally on screen, in most cases during the construction of navigation bars. Given the importance that horizontal lists have to modern web design, in the upcoming tutorial I’m going to explain how to build them from scratch by using two well-differentiated methods.

Here’s my little piece of advice: don’t miss the next part!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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