Hi there

 

 

I'm having a bit of a mental block regarding lists today and so thought I'd post a thread in the hope someonw can help me out...

 

I've got lots of tiny sqaure thumbnails I want to list in the footer of my site and want it to look like this:

 

 

I want it to be a list and can't figure out how to do it.

 

Any ideas?

 

 

E

 

p.s. I know I'm going to kick myself when someone tells me.

it's OK, I think I've figured it out now...

float or inline LI elements?

set the UL to be a block element of width 236px, and each LI to be display block, float left, and the images with a bit of padding/margin.

I did it like this:

 

 

<ul class="imglist">
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
</ul>

 

and the CSS is:

ul.imglist {
margin: 0px 20px 20px 20px;
padding: 0;
}

.imglist li {
display: inline;
list-style-type: none;
}

 

is that the best way to do it?

I'd say so.

Only time you need to float them is if you need to add width, height or padding to the LI elements; as you then need a block element to do so. But floating required you to clear the floats, display: inline; is less hassle.

ah, i figure the margin around the image was added by the CSS, but if it is added in the image creation stage, then inline display is fine.

either, post a linky, that looks well cool.

 

they say the devil is in the detail, and I like that