Topic: how to put images after each list? Pages that link to <a href="https://ozoneasylum.com/backlink?for=11087" title="Pages that link to Topic: how to put images after each list?" rel="nofollow" >Topic: how to put images after each list?\

 
Author Thread
Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

IP logged posted posted 10-28-2003 01:52 Edit Quote

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

krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 10-28-2003 01:56 Edit Quote

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:::

Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

IP logged posted posted 10-28-2003 02:14 Edit Quote

Hi, Thanks for the link.
Cheers.

Hiroki Kozai

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-28-2003 02:39 Edit Quote

Not sure I follow you.

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

Or after the whole list...?

Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

IP logged posted posted 10-28-2003 03:24 Edit Quote

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

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-28-2003 03:42 Edit Quote

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

Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

IP logged posted posted 10-28-2003 03:56 Edit Quote

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

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 10-28-2003 03:59 Edit Quote
code:
<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

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-28-2003 04:18 Edit Quote

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:

code:
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).]

Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

IP logged posted posted 10-28-2003 04:28 Edit Quote

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

Hiroki Kozai

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-28-2003 16:23 Edit Quote

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 =)


poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-28-2003 17:18 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-28-2003 17:58 Edit Quote

"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....

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-28-2003 18:50 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-28-2003 19:44 Edit Quote
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...



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu