how to achieve this css display? - html

Question

I found this image while searching the web and I tried to implement this display on my own. This is what I have so far:
My HTML code is here:
<ul>
<li>
<span style="display:block;"><a href="">
<span><img src="../creation/images/samps/unnamed4.png" width="48" align="absmiddle"/></span>
<span class="price" >Freeep</span>
<span class="appname">Name of the apps that is so long</span>
<span class="developer">by scamexdotexe</span>
</a>
</span>
</li>
</ul>
This is my CSS style:
<style type="text/css">
li{
list-style: none;
width:200px;
border:1px solid #00CCFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 0px;
}
li:hover{
border:1px solid red;
}
li a{
margin: 0px;
display: block;
width: 100%;
height: 100%;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
text-decoration:none;
padding:2px;
}
li a span img{
padding: 5px;
}
.price{
position:absolute;
margin-top:4px;
margin-bottom:4px;
color:#0099FF;
font-size:12px;
}
.appname{
}
.developer{
font-size:12px;
color:#666666;
margin:0;
position:inherit;
display:inline;
white-space:nowrap;
}
</style>
I spent hours on cloning the display on the first image but it seems that I have no luck. Can you point what I am doing wrong here? What I really want to do is align the app name and the price horizontally and also align the app name, rating, total downloads vertically.

Answer 1

For starters, I'd change the border radius to 5px, and add a drop shadow:
li {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #333;
-webkit-box-shadow: 0px 0px 5px #333;
box-shadow: 0px 0px 5px #333;
}
Do you want to use the same colors as well?

Answer 2

Here's a start for you: http://jsfiddle.net/k8ejp/4/
Notes:
the "avatar" div could of course be an image
absolute positioning can be used instead of floating if you want a more complex layout (or find it easier to work with position)
my example uses a few newer features of CSS (like text-overflow) but they should degrade without changing the layout.
HTML
<div class="box">
<div class="avatar">foo</div>
<div class="price">Free!</div>
<div class="name">A long app name A long app name A long app name A long app name</div>
<div class="info">Other info about the app goes here.</div>
</div>​
CSS
.box{
font: 11px/1.5 sans-serif;
padding: 8px;
background-color: #ccddcc;
width: 400px;
border-radius: 4px;
border: 1px solid silver;
box-shadow: 2px 2px 2px #ddd;
}
.avatar {
width: 32px;
height: 32px;
background-color: #555;
float: left;
margin-right: 12px;
}
.price {
float: right;
color: green;
}
.name {
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

Answer 3

I have created an example here: http://jsfiddle.net/D26Hj/1/.
It just needs an app logo and star sprite image.
I have drawn up a star sprite image and quickly made a fake logo in Paint.NET.
Info about the sprite:
Each star is 9px wide.
There are 5 stars in a rating, so therefore each rating is 45px wide.
Therefore, to change the rating change the background-position as per below.
Here are the background-positions to use for different star ratings:
-0px 0 Stars
-45px 1 Star
-90px 2 Stars
-135px 3 Stars
-180px 4 Stars
-225px 5 Stars
I have added classes to make it easier, use rating-0 to rating-5 for 0 stars to 5 stars.
HTML:
<div class="app">
<div class="image"></div>
<div class="title">
App title
</div>
<div class="price">$0.00</div>
<div class="rating rating-3">3 stars</div>
<div class="info">1024 downloads</div>
</div>
CSS:
body {
padding: 20px;
}
.app {
position: relative;
width: 225px;
height: 50px;
padding: 5px;
background: #8f8;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
border: 1px solid #484;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 0 2px #484;
-moz-box-shadow: 0 0 3px #888;
-webkit-box-shadow: 0 0 3px #888;
}
.app a {
text-decoration: none
}
.app .image, .app .title, .app .price, .app .rating, .app .info {
position: absolute;
}
.app .image {
left: 5px;
top: 5px;
width: 48px;
height: 48px;
background-image: url('http://i.imgur.com/JAgto.png');
}
.app .title {
left: 60px;
top: 7px;
}
.app .price {
right: 5px;
top: 7px;
color: #262;
}
.app .rating {
left: 65px;
top: 25px;
width: 45px;
height: 10px;
text-indent: -999px;
background-image: url('http://i.imgur.com/giWyQ.png');
background-position: -135px 0;
}
.app .info {
left: 60px;
top: 40px;
font-size: 11px;
color: #666;
}
.rating-0 {
background-position: 0 0;
}
.rating-1 {
background-position: -45px 0;
}
.rating-2 {
background-position: -90px 0;
}
.rating-3 {
background-position: -135px 0;
}
.rating-4 {
background-position: -180px 0;
}
.rating-5 {
background-position: -225px 0;
}

Answer 4

I'm not so sure you should use span, personally I would use div instead since it's default display style is already block, which I see is what you try to achieve on the description block.
And about the Price and AppName, I would suggest that you wrap them inside a Div container on the same level with rating and downloads count and make that container display style inline-block then adjust the width for both Price and AppName.
It would be like this
<div class="main-container">
<div class="image"> Image Goes Here </div>
<div class="description">
<div class="description-top">
<div class"description-top-title"> Title Goes Here</div>
<div class"description-top-price"> Price Goes Here</div>
</div>
<div class="description-middle"> Rating Goes Here</div>
<div class="description-bottom"> Download Count Goes Here</div>
</div>
</div>
.main-container{
display: inline-block;
}
.image{
width: 30%;
}
.description{
display: block;
width: 70%;
}
.description-top{
display: inline-block;
}
.description-top-title{
width: 60%;
}
.description-top-price{
width: 40%;
}