RSS

CSS – Beautifully Numbered Lists.

22 Feb

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.

Sexy isn't it baby

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.

  1. 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.
  2. 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.
  3. 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.

About these ads
 
Leave a comment

Posted by on February 22, 2006 in Look What I Found, Uncategorized

 

Comments are closed.

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: