Nested list syle images

| Blogs etc. | 0 Comments

Learning Cascading Style Sheets (CSS) is not always that easy, but it can be fun and rewarding at times. For a couple of weeks now, I have been struggling with a problem concerning the use of nested lists together with the list-images. An intellectual problem (kinda) demanding intense concentration and perserverence (yeah sure).

What I wanted to do was have nested lists with a different bulleted image depending on how deep the given list was located. Say a red square, followed by a blue square, followed by a yellow square, and so forth. For the sake of simplicity, and avoiding my never-ending tendency to go into repetitive cycles into nested infinities, stop after three levels deep. Okay. Until now, due mainly to my ignorance of CSS, I had clumsily implemented complicated tables, cells and images with offsets and awkward justifications. If you know what I mean.

Hmmm, there must be a better way, I always thought.

And there was! This could be done by using the so-called child relationships defined in CSS. How? Well look at the following code example which needs to be placed within the style-tags:

OL LI { list-style-image : none; }
UL LI, LI { list-style-image : url(.../image_1.gif); }
UL UL LI { list-style-image : url(.../image_2gif); }
UL UL UL LI { list-style-image : url(.../image_3.gif); }

This results in the given desired effect. At long last. Is this an amazing discovery or what?! The very first line is required in order to retain numbering in ordered lists. And this is the result:

I am pretty pleased with this, and it makes my life as a future famous web designer alot easier. I suggest you have a look at my site map for an example of this nice use of nested lists.

Leave a comment

Random entries

Here are some random entries that you might be interested in:

Recent Assets

  • flitsfoto-B5H3-IoN-b9E4tr9OrFarmWfWrP5pxuN8AgYw45ABAnqqDrmjSqIc-KKoAQ9Bu_k.jpeg
  • flitsfoto-mjuWdZ1wBk6gJbu9rP7Bu6bETxZplWXFUoEJIA_HfMF0i0MQfgF_y5024mEsOBfH.jpeg
  • Kiffin-10th-hole-2017-05-small.jpg
  • Kiffin-10th-hole-2017-05.jpg
  • ember-rails-and-json-api.png
  • screenshot-www.golf.nl-2017-05-04-15-38-01.png
  • putting-mat.png
  • finished-just-in-time.png
  • Tenerife-flight-path.png
  • listen-to-me-marlon.jpg
  • sneeuwval.jpg
  • frozen-crystals.png

Golf Handicap

Information

This personal weblog was started way back on July 21, 2001 which means that it is 7-21-2001 old.

So far this blog contains no less than 2288 entries and as many as 1877 comments.

Important events

Graduated from Stanford 6-5-1979 ago.

Kiffin Rockwell was shot down and killed 9-23-1916 ago.

Believe it or not but I am 10-11-1957 young.

Began well-balanced and healthy life style 1-8-2013 ago.

My father passed away 10-20-2000 ago.

First met Thea in Balestrand, Norway 6-14-1980 ago.