how to achieve this css display?

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

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">
        <a href="#">App title</a>
    </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 2

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%;
}

Answer 3

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 4

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?