Our CSS Style topics:
CSS Code Tutorial Chapters:
|
Cascading Style Sheets: an Interactive Tutorial
CSS: CSS Lists, < ul > and < li >Chapter 7 part 2 (of 2)
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.
Our Hosting Partners (Sponsored Ads):
iPage Hosting 1&1 Hosting $6.99/mo Free Domain Name If you Order Today! |
Copyright © Dave Kristula. All Rights reserved.