|
|
|
Cascading Style Sheets: an Interactive Tutorial
Listspart 2
advertisement advertisement There is one more individual property to the list that should be noted: it's called list-style-position. It's merely inside or outside, and sets whether the second, third, etc., lines of text should start under the list marker, or immediately right beneath the marker.
<ul style="list-style-position: inside;">
<li>This list has position set<br>
to inside.
<li>You can see how the text falls<br>
on the second line.
</ul>
<ul style="list-style-position: outside;">
<li>This list has position set<br>
to outside.
<li>You can see how the text falls<br>
on the second line.
</ul>
Finally, there is a combination list style property, called list-style. Its first value is the type of marker, the second value is either inside or outside, and the third marker is the url() of the image. If you want a list that defaults to a disc, shows text inside the marker, and uses an image marker.gif if available, it could look like this: ul { list-style: disc inside url(marker.gif); } Ready to test your skills? Make an unordered list with first a square marker, with a sub-list using a circle marker.
Click here if you get stuck or want to see how I did it. advertisement
|
|
Copyright © 2002 Dave Kristula. All Rights Reserved.
