creating a profile page, need help ( css )
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 t开发者_如何学Gohis 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.
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
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...
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.
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.
加载中,请稍侯......
精彩评论