Contents

Better image placement

As a next step we will replace the inline images which serve as markers for the list items. (Note: We will only work with a snippet of the original code for clarity reasons.)

All images removed

Here's the screenshot. The red color indicates that we are viewing the browser's default rendering of a list. Note that this would suffice as a menu but we will put the images back in place in a next step anyhow.

Images reinstated

Now we can put the images back in place, but this time using the CSS property "list-style-image". That way we can change the images centrally with just one line of code without having to touch any markup.

To get each of the different images at the right place we added class attributes to the LI tags with the name of the respective image.

We set some padding and margins to come closer to the original layout.

item.gif removed

As item.gif only reproduces the standard "square" marker we can get rid of the image and use the marker instead: list-style-type: square; That not only makes the code leaner but also gives the added advantage of being able to style the marker, for example coloring it red as in the screenshot to show that we indeed don't use item.gif anymore.

Note that we had to set list-style-image: none; as default for LI tags. Otherwise our settings for items would be overridden due to inheritance.