CSS – Beautifully Numbered Lists.

update: dugg. CSS version not placed here because wordpress editor doesn’t allow all that stuff. I think. This doesn’t validate, but it works, I will clean it up, thanks for suggestions! Take it if it works, needs improvement, no need to credit/ask permission of course.

I just made some beautifully numbered lists using dl, dt and dd tags inside a ol li structure. Some snappy CSS later, plus some IE 5/5.5/6.0 hackz and you have a beautiful css list.

Here is the code:

ol dl li {
list-style-type:decimal;
list-style-position: outside;
font-size:60pt;
position: relative;
top: 70px;
left: 65px;
line-height:normal;
color:#DDD;
_color:#FFF;; /* show to IE */
}
ol dl li dt {
_margin-top: -70px;
}
ol dl li dd {
width: 400px;
}
ol dl li dt, ol dl li dd {
_list-style-type:decimal;
_list-style-position: outside;
color:#111;
font-size:0px;
line-height:normal;
font-size:small;
position: relative;
top: -70px;
left: -70px;
}

You can play with different list-style-type: the one with 0’s padding is nice, the greek is beautiful and alpha-beta-gammaish.

dt {
font-weight:bold;
margin-top: 10px;
margin-bottom: 5px;
}

dd {
background-color: #eeeee7;
padding: 7px;
}

Now the markup:

<h1>Lorem Ipsum</h1>
<h2>Dolor sit amet, consectetuer adipiscing elit.</h2>
<ol>
<dl>
<li><dt>Ut auctor libero vel justo.</dt>
<dd>Cras vel ipsum a magna luctus laoreet. Nullam et arcu. Phasellus pede enim, fringilla non, egestas et, vulputate sit amet, nisi. Vivamus dapibus tristique eros. Donec facilisis varius nulla. Morbi non turpis.</dd></li>
<li><dt>Duis quam leo, dapibus vel, pulvinar vitae, tristique pretium, metus.</dt>
<dd>Morbi lorem dolor, tincidunt a, ultricies non, pharetra aliquet, ante. Nulla ut mauris vel tellus porttitor ultricies. Morbi scelerisque. Nullam viverra. Phasellus sollicitudin diam ac enim. Nulla quam est, congue nec, pharetra in, laoreet vulputate, sem. Nullam sed orci. Morbi rutrum, mi facilisis hendrerit semper, magna diam porttitor dolor, in auctor nisi ipsum eget dolor. Praesent sodales aliquet magna. Nulla dapibus ligula et diam. Fusce et arcu. Quisque non enim.</dd></li>
<li><dt>Pellentesque eros urna, suscipit vitae, fringilla sed, gravida in, eros.</dt>
<dd>Aliquam erat volutpat. Nunc hendrerit, ante malesuada ornare imperdiet, ipsum lectus vestibulum mi, vitae congue erat enim sit amet pede. Nulla facilisi. Vestibulum nonummy pede a magna. Praesent mollis nulla tincidunt metus. Proin metus magna, lacinia in, lobortis at, auctor quis, urna. Donec commodo nisi in pede. In hac habitasse platea dictumst.</dd></li>
</dl>
</ol>

And here is what it would have looked like without all that happiness of css involved.:

Lorem Ipsum

Dolor sit amet, consectetuer adipiscing elit.

Ut auctor libero vel justo.

Cras vel ipsum a magna luctus laoreet. Nullam et arcu. Phasellus pede enim, fringilla non, egestas et, vulputate sit amet, nisi. Vivamus dapibus tristique eros. Donec facilisis varius nulla. Morbi non turpis.

Duis quam leo, dapibus vel, pulvinar vitae, tristique pretium, metus.

Morbi lorem dolor, tincidunt a, ultricies non, pharetra aliquet, ante. Nulla ut mauris vel tellus porttitor ultricies. Morbi scelerisque. Nullam viverra. Phasellus sollicitudin diam ac enim. Nulla quam est, congue nec, pharetra in, laoreet vulputate, sem. Nullam sed orci. Morbi rutrum, mi facilisis hendrerit semper, magna diam porttitor dolor, in auctor nisi ipsum eget dolor. Praesent sodales aliquet magna. Nulla dapibus ligula et diam. Fusce et arcu. Quisque non enim.

Pellentesque eros urna, suscipit vitae, fringilla sed, gravida in, eros.

Aliquam erat volutpat. Nunc hendrerit, ante malesuada ornare imperdiet, ipsum lectus vestibulum mi, vitae congue erat enim sit amet pede. Nulla facilisi. Vestibulum nonummy pede a magna. Praesent mollis nulla tincidunt metus. Proin metus magna, lacinia in, lobortis at, auctor quis, urna. Donec commodo nisi in pede. In hac habitasse platea dictumst.

Yikes that was scary. Have fun with your sexy css numbery listy things; maybe I will find another even sexier way of doing this.

---

Possibly related posts: (automatically generated)

• Style up your Lists