Home

CSS Examples Image Marker Lists

Date: 09/26/2004 Image Marker Lists

Author: CSS Drive

CSS makes it possible to use images for a list's markers. And through descendant selectors, different images can be shown depending on the level of the list item in question, as shown below:

  • News
  • Sports
  • Webmaster
    • CSS Drive
    • PHP.net

The HTML:

<ul>
<li>News</li>
<li>Sports</li>
<li>Webmaster<ul>
    <li>CSS Drive</li>
    <li>PHP.net</li>
</ul>
</li>
</ul>

The CSS:

ul li{
list-style-type: square;
list-style-image:url(fold.gif);
padding-left: 3px;
}

ul li ul li{
list-style-image:url(list.gif);
}

Comments (4)

Interesting

#1: BWiz on 04/08 at 11:45 AM

The spacing is off in IE6 and IE7

#3: truegraphix on 10/12 at 06:43 AM

WinPure ListCleaner Lite is a data cleansing, list cleaning and dedupe software for cleaning and correcting your databases, spreadsheets, emails, etc. It's a stand-alone product, containing 6 cleaning modules

#4: outsource sales on 07/04 at 04:20 AM

NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2004-2014 CSS Drive. Contact Info | Back to Top