Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Lists

HTML

<h1>Lists</h1>

<section id="section1"><h2>Normal Lists</h2>

<ul><li class="custom">List item with custom bullet</li>

<li class="circle">List item with circle bullet</li>

<li class="decimal">List item with numbered bullet</li>

<li class="inside">List item with disc bullet displayed inside the margin</li>

<li class="none"><span class="marker">-</span>faux marker</li>

<li class="none"><span class="marker">–</span>&ndash;</li>

<li class="none"><span class="marker">—</span>&mdash;</li></ul></section>

<section id="section2"><h2>Faux Lists</h2>

<span class="listed">display:list-item</span>

<p class="list"><span class="marker">1:8-5</span>faux marker</p>

<p class="list"><span class="marker">·</span>&middot;</p>

<p class="list"><span class="marker">•</span>&bull;</p>

<p class="list"><span class="marker">◊</span>&loz;</p>

<p class="list"><span class="marker">›</span>&rsaquo;</p>

<p class="list"><span class="marker">»</span>&raquo;</p></section>

CSS

ul { margin-left:0; padding-left:0; } /* Normalized list */

ul li { margin-left:60px; }

.listed { margin-left:60px; display:list-item; list-style:square; }

.list { margin-left:60px; }

.marker { float:left; margin-left:-60px; width:60px; text-align:center; }

.custom { list-style-image:url("check.gif"); }

.circle { list-style-type:circle; }

.decimal { list-style-type:decimal; }

.inside { list-style-position:inside; }

.none { list-style-type:none; }

/* Nonessential rules are not shown. */