CSS Ordered Lists

[Dysan]

Hi,

Using CSS & HTML, whats the best way to create the Numbered list as found in the following image?

http://www.freewebs.com/ticstacs/list.bmp

[scragar]

well a numbered list is simple:
<ol>
<li>something</li>
<li>something else</li>
</ol>
you could then add further syling and a simple header+paragraphs:
<style type='text/css'>
ol h7{
font-weight: bold;
text-decoration: underline;
}
ol p{
margin: 0;
color: grey; /* you want it grey right? */
}
</style>
<ol>
<li><h7>P</h7><p>M</p></li>
<li><h7>A</h7><p>W</p></li>
<li><h7>J</h7><p>T</p></li>
</ol>

[Centauri]

Actually, that second example won't work in IE6, as it doesn't like <h7>s or the spelling of "grey". If the <h7>s are changed to <h4>s and margin:0 added to their style, and the color changed to "gray" IE6 is happy.

[WebJoel]

<li><h4>P</h4> <p>M</p></li> How are you going to get two block-level elements to display 'side-by-side' without the 'force new-line' that block-level elements do? Declaring a width of half-or-less of the "<li>" for each the "h4" and the "p", and 'float:left;' each might work... but I'm seeing an inherent & unresolvable problem here maybe best solved by using the inline element "<span>"... :confused:

[Centauri]

The op doesn't want them to display side by side, but one under the other.

[WebJoel]

-I'm trying to imagine why something like this would be needed. But then yeah, -it is what was requested. :) Wouldn't a "<br />" do just as well?
<li>P<br />M</li>

[scragar]

and what about the underline and grey text that the image shows Joel?

[WebJoel]

and what about the underline and grey text that the image shows Joel?
CSS:.line {border-top:1px solid red; color:gray; font-weight:bolder}HTML:<li>P<br /><span class="line">M</span></li> works, and you can control the thickness and color too, but I suppose ultimately it's a case of six of one or a half-dozen of another.