Spring.Into.HTML.and.CSS [Electronic resources]

Barry J. Rosenberg

نسخه متنی -صفحه : 171/ 129

Styling Unordered Lists

As with ordered lists, you can change the marker, replace it with an image, and modify the list marker's position in relation to the text.

Unordered list markers can be styled using one of three keywords: disc, circle, or square (see Example 10-7).

Example 10-7. Inline styles demonstrating the three marker keywords for unordered lists

<h2>What to Bring:</h2>
<ul>
<li style="list-style-type: disc;">A beverage of choice.</li>
<li style="list-style-type: circle;">Munchies.</li>
<li style="list-style-type: square;">Music and movies.</li>
</ul>

Figure 10-12 shows the shapely results.

Figure 10-12. Showing off the `disc`, `circle`, and `square` optionsnote that some browsers will use slightly different markers, but the general features are retained.

If you'd like to replace the marker with a custom image, create the image and add it using the list-style-image property (see Example 10-8).

Example 10-8. Viewing the complete document along with the image-based bullet

[View full width]

<!DOCTYPEl PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/l1/DTD/l1-transitional.dtd">
<l xmlns="http://www.w3.org/1999/l">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif);
 background-position: right top; background-repeat: no-repeat;}
h1 {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;}
ul {list-style-image: url(bullet.gif);}
</style>
</head>
<body>
<h1>What to Bring:</h1>
<ul>
<li>A beverage of choice.</li>
<li>Munchies.</li>
<li>Music and movies.</li>
</ul>
</body>
<l>

No need for classes; there's only one image needed. This image will now replace the marker (see Figure 10-13).

Figure 10-13. Using images instead of text-based markers to customize your bullets.

Another list property you can use is the list-style-position property, with a value of either outside or inside. The outside value positions the marker outside the block, so when the line wraps, it indentstypical list behavior. Placing the marker inside results in no indent (see Figure 10-14).