creating a profile page, need help ( css )
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.
4 answers
solution1
2 2010-11-28 13:18:23
Isn't this is a website for Q&A on specific problems? In my opinion it sounds like you want us to do your work for you...
solution2
2 ACCPTED 2010-11-28 20:35:18
solution3
1 2010-11-29 02:04:27
What you need is something like the following, which will give you two rows of 60px boxes:
<html>
<head>
<style>
#container{
border:1px solid red;
position:absolute;
}
ul{
list-style:none;
width: 180px;
margin:0px;
padding:0px;
}
ul li{
float:left;
width: 52px;
margin:0px;
padding:3px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
</body>
</head>
If your images are all of the same predictable dimensions, you could skip the floating and use display:inline on the li elements.
solution4
0 2010-11-28 20:31:00
Use a single ul or ol element, give each li element a fixed with and float:left within a relatively positioned parent. The total width will be a function of the parent element, so if you do the math and set that appropriately you'll get your two rows.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.