lists with background images

[Animesh K]

Hello All:

I wanted to know any web resources for inline lists with background
images for each <li> component.

I want it for providing thumbnails of images on a picture page.

Best regards,
Animesh

 

[Adrienne]

Hello All:

I wanted to know any web resources for inline lists with background
images for each <li> component.

I want it for providing thumbnails of images on a picture page.

Best regards,
Animesh

I don't know if I would use background images for the LI element (LI is
an element, not a component). You could of course style it that way:

<li style="background-image:url(image1.png);background-repeat:norepeat;
width:100px; height:100px;">Item One</li>
<li style="background-image:url(image2.png);background-repeat:norepeat;
width:100px; height:100px;">
Item Two</li>

However, I think you would be better off using:
<li><img src="image1.png" height="100" width="100"><br>Item One</li>
<li><img src="image2.png" height="100" width="100"><br>Item Two</li>

 

[Alexander Plavinski]

However, I think you would be better off using:
<li><img src="image1.png" height="100" width="100"><br>Item One</li>
<li><img src="image2.png" height="100" width="100"><br>Item Two</li>

Well, I would use definition lists for this:
<dl>
<dt><img src="image1.png" alt="alternative text" height="100"
width="100"></dt>
<dd>Item One</dd>
<dt><img src="image2.png" alt="alternative text" height="100"
width="100"></dt>
<dd>Item Two</dd>
</dl>

 

[Andy Dingley]

I wanted to know any web resources for inline lists with background
images for each <li> component.

I'd use a <table> Controlling width of an inlined <li> is an exercise
in futility.

 

[Animesh K]

I'd use a <table> Controlling width of an inlined <li> is an exercise
in futility.

I want to avoid tables. That's why I started with div elements. I didn't
have much success so i was trying inline lists.

Best
A

 

[Animesh K]

Gazing into my crystal ball I observed Animesh K <[email protected]>
writing in



I don't know if I would use background images for the LI element (LI is
an element, not a component). You could of course style it that way:

<li style="background-image:url(image1.png);background-repeat:norepeat;
width:100px; height:100px;">Item One</li>
<li style="background-image:url(image2.png);background-repeat:norepeat;
width:100px; height:100px;">
Item Two</li>

However, I think you would be better off using:
<li><img src="image1.png" height="100" width="100"><br>Item One</li>
<li><img src="image2.png" height="100" width="100"><br>Item Two</li>

Hi Adrienne

I will try your second suggestion. I already tried (more than) what you
suggested in your first suggestion. There was some alignment and display
problems amidst different browsers in different situations.

Best
A

 

[Andy Dingley]

I want to avoid tables. That's why I started with div elements. I didn't
have much success so i was trying inline lists.

Laudable.

But I'd still use a <table>

(I don't say this lightly)

 

[kchayka]

I wanted to know any web resources for inline lists with background
images for each <li> component.

I want it for providing thumbnails of images on a picture page.

Once you declare a list element inline, you lose the ability to set
height/width dimensions (except for line-height and padding), so your
images may well be clipped. Also note that some browsers do poorly
styling inline lists, MacIE for one.

If you're going to use list elements arranged horizontally, consider
floating them instead.