Printer-friendly page
Screen-friendly pageDecorative Images Examples: List Bullets
Accessibility Features of Example
- Images for bullets for
lielements of thisulelement are inserted through CSS.
Example
Unordered list bullet using CSS background image
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Code
<h3>Unordered list bullet using CSS background image</h3>
<ul class="bullet" title="unordered list-background image">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
<ul class="bullet" title="unordered list-background image">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
CSS Code
#content ul.bullet li {
list-style-type: none;
text-align: center left;
background-image: url(../images/ex-list-bullet.PNG);
background-position: center left;
background-repeat: no-repeat;
padding: .3em 0 .2em 1.1em;
}
#content ul.bullet {
margin: 0 0 .3em -.5em;
}
list-style-type: none;
text-align: center left;
background-image: url(../images/ex-list-bullet.PNG);
background-position: center left;
background-repeat: no-repeat;
padding: .3em 0 .2em 1.1em;
}
#content ul.bullet {
margin: 0 0 .3em -.5em;
}