UL with image instead of list item

HTML & CSS
1

Is there any easy way to style a simple ul using an image instead of text - and I mean a different height image for each item?

Eg: <ul>
<li><a href=#link to another site><img src=“image height of 20px”></a></li>
<li><a href=#link to another site><img src=“image height of 40px”></a></li>
</ul>

I can make the widths of the images uniform but not the heights, which will be varied and currently the list look very untidy as the images are not a uniform distance apart.

The old way was easier with each image having height and width properties in the html but of course I can’t do that.

Perhaps make each item a different class? Time consuming but perhaps the only way?

Thanks

2

no problem, you’re welcome :slight_smile:

3

Sorry, not sure what the issue is here?

If the images are all different heights, and you do nothing about it, the images will sit at their natural heights, and each bullet point will be the right height to fit each image.

If the images are different heights but you want the bullets to all be the same height, you can set li {line-height:whatever;} with the line-height being right for the biggest image.

If you want equal spacing between the images, you can put a margin or padding on li to create the spacing.

4

I didn’t know that - thanks! That should solve the problem.

The appearance I was aiming for was an equal distance between each image. Setting the height in the CSS meant a fixed height and as each image has a different height I would have had to set it to the maximum.

A picture is worth a thousand words LOL

www.westernwebdesign.com.au/nitemagic/productsandservices.html

5

as i see it, you need to scratch down the height: 60px; for #box2 ul li and put this instead: padding-bottom: 10px;

#box2 ul li {
float: left;
padding: 0 0 10px;
width: 120px;
}

this way you’ll also lose the scrollbar appearing for div id=“main” in ie8.

Off Topic:

now can i have a something for my wife from that site? :wink:

6

you need to set a fixed height. for that you probably need to make a block element somewhere. or not. w/o an actual link or example no one can really help.

i don’t get why can’t you set height and width for each image? what old way you’re talking about?

7

HI noonnope

Yes but the fixed height has to be the height of the tallest image which means the others have differing space height between them. I think I will just have to live with it.

The old way: in the HTML:

<li><a href=“link to other site”><img src=“image” width=“93” height=“29” border=“0” /></a></li>
<pli><a href=link to other site"><img src=“image” width=“86” height=“38” border=“0” /></a></li>
<li><a href=“link to other site”><img src=“image” width=“132” height=“14” border=“0” /></a></li>

Isn’t that considered styling in the HTML?

8

Thank noonnope - just what I wanted! I willhave to remember that!

Thanks for the reply, Stevie D - I did what noonnope sugested and it worked !

And yes, noonnope, I just bet you would love something from that site - wouldn’t we all!!!

Thanks!

9

border=“0” yes. width and height no. like cellspacing=“0” for table. actually it’s recommended you specify them for speeding up the rendering.

as for the appearance you’re aiming at, i’m still not clear. on one hand you complain that using a fixed height is not good, but then you say letting them size is also not good for you.

an example from your part on how it is now and how you would like it to became, would do wonders for keeping the philosophical aspect to a minimum :slight_smile: