Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Background Bulleted

HTML

<h1>Background Bulleted</h1>

<ul class="bb-list">

<li class="bb1">Unordered list item with a background bullet</li></ul>

<ol class="bb-list">

<li class="bb2">Ordered list item with a background bullet</li></ol>

<dl class="bb-list">

<dt class="bb1">Definition term with a background bullet</dt>

<dd class="bb2">Definition data with a background bullet</dd></dl>

<div class="bb-list">

<p class="bb1">Faux list with a background bullet</p>

<p class="bb2">Faux list with a background bullet</p></div>

CSS

.bb-list { padding-left:40px; margin-left:0; margin-top:20px; }

.bb-list li,

.bb-list dt,

.bb-list dd,

.bb-list p { padding-left:40px; margin-left:-40px; list-style-type:none;

margin-top:0; margin-bottom:0; }

.bb1 { background:url("check.gif") no-repeat 10px 1px; }

.bb2 { background:url("star.gif") no-repeat 10px 1px; }