How to do like this list using <li> and CSS?

Question

Hi, i want to make an stylized unordered list like the following, but i don't want it to be completely divs, i want to use the <li> & <ul> tags and maybe a div if it's necessary.

Any sample code to make like this ?

Thanks

Answer 1

To me, this looks like:

<ul class="rated-list">
    <li>
        <span class="rating">1086</span>
        <a href="/foo.html">Why Don't …</a>
    </li>
</ul>

You can then use CSS to give the span and a fixed widths and float them left.

Alternatively, you could make only the span fixed-and-floated and give the link a margin-left equal to the span's width, plus whatever padding you want. Come to think of it, that's probably a better solution! :-)

Answer 2

Ben's markup for the list looks similiar to what i would put together. I've used his markup and provided a some CSS file to get something similiar to your screenshot:

Markup:

<ul class="rated-list">
        <li>
            <span class="rating">1086</span>
            <a href="/foo.html">Why Don't…</a>
        </li>
        <li>
            <span class="rating">1087</span>
            <a href="/foo.html">We try...</a>
        </li>
        <li>
            <span class="rating">1088</span>
            <a href="/foo.html">A little...</a>
        </li>
        <li>
            <span class="rating">1089</span>
            <a href="/foo.html">CSS?</a>
        </li>
    </ul>

CSS:

body
{
    color:#958C51;
    font-family:arial,helvetica,sans-serif;
    font-size:83%;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
ul.rated-list
{
    list-style:none;
    width:300px;
    border-top:solid 1px #DDD;
    margin:0;
    padding:0;
}
ul.rated-list li 
{
    list-style:none;
    padding:5px 0px;
    border-bottom:solid 1px #DDD;
    vertical-align:top;
}
span.rating
{
    background:Transparent url('http://cotnet.diggstatic.com/img/shade-news.gif') no-repeat top left;
    display:inline-block;
    padding:15px 10px;
    width:32px;
    height:22px;
    font-weight:bold;
}
ul.rated-list li a
{
    width:240px;
    text-decoration:none;
    display:inline-block;
    color:#517197;
}

I've also set a little initial body style and decided to draw the DIGG span background image for simplicity. You'd obviously just reference a local web site file in production.

Hope it helps some people out. :-)