lists with background images

A

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
 
A

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

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

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

Animesh K

Andy said:
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
 
A

Animesh K

Adrienne said:
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
 
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)
 
K

kchayka

Animesh said:
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,431
Messages
2,571,677
Members
48,796
Latest member
Greg L.

Latest Threads

Top