Question

I am creating a profile page, and I would like to create a followers list ( similar to twitter )

Max 18 images across , I think 24px x 24px each icon. With padding as per the image attached.

What would be the best method for reproducing this using css. That is easily propagated using php from a db.

I am looking for cleanest method. Suggestions please.

Perhaps even with a preloader thrown in for good measure, as we will be dealing with 1000’s of different images.

Cheers

Well this is what I had thought of.

<ul class="icons">
  <li><img1></li>
  <li><img2></li>
  <li><img3></li>
  <li><img4></li>

then in the css

ul.icons li {display: inline;}

But would need to add 2 rows, so was thinking two layers of <ul>...</ul>
The issue, is I would like that if 20 are displayed then we show 2 rows of 10, rather than one row of 18 and one of 2.

But thats as clean as I think It could be done, but… I didnt know if there was a programatic way of using php to repeat the <li> ... </li> tags based on a loop

Plus wanted to tweak in image preloader, and I have seen these, just not sure what they are called. Uses js to handle the loading.

Answer 1

like this?
example

or to simplify it even more, you could ditch the ul and li elements and simply use images inside a div:
example