Page 1 of 1

unordered list replace bullet by image according to level, i

Posted: Sun Jan 31, 2010 10:20 am
by Peuplarchie
Good day to you all,
I was wondering if there is a way to change the the look of wach level of a list.

Ex:

Last level, text = link
1st level, has 1 image instead of bullet and text in bold
2nd level as another image as bullet and text in bold
3rd level, if not last level, as another image as bullet and text in bold\

Here is where I'm now :

Code: Select all

 
 
<html>
<head>
<style type="text/css">
ul {
      list-style-image: url(Icons/open_book_icon.jpg);
}
 
li {
      list-style-image: url(Icons/box_icon.png);
}
 
 
</style>
</head>
<body>
 
 
 
<?PHP
function globDir($dir)
{
   $files = glob("$dir/*", GLOB_ONLYDIR);
   
     if(!empty($files))
   {
      echo "<ul>\n";
 
      foreach($files as $file)
      {
         echo "<li><b>". basename($file)."</b>\n";
         globDir($file);
         echo "</li>\n";
      }
      echo "</ul>\n";
   }
}
globDir('Photos');
?>
 
</body>
</html>
 
Thanks !

Re: unordered list replace bullet by image according to level, i

Posted: Sun Jan 31, 2010 10:46 am
by Eran
http://www.w3.org/TR/css3-selectors/#structural-pseudos
this will not work on older browsers though