Topic: how to put images after each list? (Page 1 of 1)

Hi, guys. How are you?
I have been just thining of how to put an image after each list.
I have a menu, which it is basically list.
Do you have any ideas?
Cheers.

Hiroki Kozai

http://css.maxdesign.com.au/listutorial/introduction.htm

What you can do is specify a background image for your "li" tags using CSS. That tutorial above is very good at taking you step by step through the process.

:::11oh1:::

Hi, Thanks for the link.
Cheers.

Hiroki Kozai

Not sure I follow you.

Do you mean an icon like graphic followinf each list-item?

Or after the whole list...?

I mean an icon like graphic following each list-item. But each graphic is going to be different. I want graphic which represents each menu,. You know what I mean?
Hmm......Is there any way to put different images after each list?

Hiroki Kozai

Hiroki: Do you have a given number of images or any rule that tells you which image to give to which li ? If so, you could use a CSS with a set of class for each image/type of li, and voilà.

Mathieu "POÏ" HENRI

yeah, Rule is:

Menu list called *shop* has image *dollar.gif*
And Menu list called *basket* has image *basket.gif*
And so on and on.

Could you explain more about your way, please?

Hiroki Kozai

<li>shop <img src="dollar.gif" width="9" height="6" alt="dollar" /></li>

<li>basket <img src="basket.gif" width="9" height="6" alt="basket" /></li>

Jason

Hiroki: Well, I hadn't re-read the Listutorial, but the 11th step does what I said ... which almost what you want.

Anyway, I had already written the following, minimalist, CSS:

ul#basket li

{

    list-style-type:none;

    background-image: url(basket.gif);

    background-repeat: no-repeat;

    padding-left: 16px;

}

ul#shop li

{

    list-style-type:none;

    background-image: url(dollar.gif);

    background-repeat: no-repeat;

    padding-left: 16px;

}

 

<ul id="shop">

    <li>lorem</li>

    <li>lipsum</li>

    <li>norem</li>

</ul>

<ul id="basket">

    <li>lorem</li>

    <li>lipsum</li>

    <li>norem</li>

</ul>

Mathieu "POÏ" HENRI

[This message has been edited by poi (edited 10-28-2003).]

Hi, Thanks for your help!
It works!
Cheers.

Hiroki Kozai

Actually Poi, that CSS seems rather overdone, considering that what JK did would more than suffice.

In this case, using CSS to achieve the effect seems rather ineffective and pointless. Straightup HTML would be the way to go.

If you wanted one graphic to use for all list bullets, or a couple of classes for different uses, then CSS all the way.

But with a different icon for each item, just use HTML the HTML was meant to be used =)

DL-44: Your point makes sense with small lists and if you're not on the XHTML+CSS bandwagon. But if you have many items in the lists, and the images are not linked to a page or a script, then the CSS way seems quite appropriate, and it'd save a lot of bytes.

In one of the previous extranet I did, the client wanted to see the complete tree list of his site and documents. The resulting HTML page reached the gigantic size of 1.6Mb ( which dropped to only 80 Kb once Gzipped but on client side the low-end computers were crawling ), due to the repeating img tags, events, metadatas ... after some optimization including using a little bit of CSS, the page was ~400Kb. BTW, there was 8-10 images in that tree list.

Mathieu "POÏ" HENRI

"and if you're not on the XHTML+CSS bandwagon"

That's pretty much irrelevent.

I don't see how you can save bytes if you are simply substituting CSS bytes for HTML bytes...

It would be better to simply put the list in an included file and do it that way. It seems from what Hiroki has said that he is talking about a small list with a specific image for each item, in which case you would make seperate specs for each list-item in the CSS, and that would add up bytes awful quickly....

DL-44: My XHTML+CSS bandwagon remarks makes sense in the case that the images are just decoratives and a simple class can categorize the type of a li.

If Hiroki have really few items and wish to put a different image for each one, obviously, using CSS will be bigger.
However, if you simply take my example with 2 lists of 3 items and compare the CSS way to JKMabry's one, the CSS is already ~70 bytes smaller. Ok, that's few but it shows that with only 6 items and 2 images the CSS is lighter, and provide a cleaner HTML code.

In fact, it mainly depends of the Hiroki's requirements and inputs.

Best regards,

Mathieu "POÏ" HENRI

quote:

---

and a simple class can categorize the type of a li.

---

Obviously.

But he specifically mentioned having a different image for each li.
Not a class to cover them all.

Big difference...