Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Background Bulleted

Problem You want to control the precise placement of a list item’s bullet.^

Solution Since CSS does not provide properties for controlling the position of a bullet, you can use a
background image as the bullet of each list item, and you can use background-position to
position it precisely.
You can assign a positive left padding to a list element (

,
, or

) to make room
for bullets on its list items. You should also remove the default left margin that some
browsers add to lists. In the example, I assigned padding-left:40px and margin-left:0 to
each list.
You can assign a negative left margin to each list item to move it into the padding area of its
parent list. The negative left margin should be the exact inverse of the amount assigned to
the left padding of its parent. In the example, I assigned margin-left:-40px to each list
item.
You can assign the exact amount of left padding to each list item that you assigned to its
parent list. This moves a list item’s content away from the bullet. In the example, I assigned
padding-left:40px to each list item. You should also hide each list item’s built-in marker
using list-style-type:none.
You can assign a nonrepeating background image to each list item and use background-
position to offset its position. In the example, I used a left offset of 10 pixels and a top offset
of 1 pixel. You can use different classes as needed to assign and position different
background images to individual list items.
You can assign the bb-list class to each list. This distinguishes between normal lists and
background-bulleted lists, which is important because they each have different values for
margin and padding. You can combine *.bb-list with the descendant operator and a list-
item element to select background-bulleted list items. Since there are three different types
of list-item elements, you can use the grouping operator to assign multiple selectors to this
pattern’s rules.
Since a list item is a block element, this pattern applies to all block elements. Nonetheless, it
is better to mark up items as a list when they function as a list. In the example, I applied this
pattern to a division and its child paragraphs, but only to show how it can be done—not to
recommend that you do it.




Pattern




HTML




CSS




<LIST class="bb-list">

<LIST_ITEM class="BULLET_STYLE"> list content </LIST_ITEM>

</LIST>




.bb-list { padding-left:+INDENT; margin-left:0; }




.bb-list li, .bb-list dt, .bb-list dd,.bb-list p

{ padding-left:+INDENT; margin-left:-INDENT; list-style-type:none; }




.BULLET_STYLE { background:url("FILE.EXT") LEFT_OFFSET

TOP_OFFSET no-repeat; }




Related to Lists; Block Box (Chapter 4); Margin, Padding, Background (Chapter 6)