/    Sign up×
Community /Pin to ProfileBookmark

CSS Ordered Lists

Hi,

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

[URL=”http://www.freewebs.com/ticstacs/list.bmp”]http://www.freewebs.com/ticstacs/list.bmp[/URL]

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@scragarFeb 28.2008 — well a numbered list is simple:
[code=html]<ol>
<li>something</li>
<li>something else</li>
</ol>[/code]

you could then add further syling and a simple header+paragraphs:
[code=html]<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>[/code]
Copy linkTweet thisAlerts:
@CentauriFeb 29.2008 — 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.
Copy linkTweet thisAlerts:
@WebJoelMar 01.2008 — <li>[B][U]<h4>P</h4>[/U][/B] [B][U]<p>M</p>[/U][/B]</li>[/QUOTE] How are you going to get two block-level elements to display 'side-by-side' without the 'force new-line' that [I]block-level elements[/I] do? Declaring a width of half-or-less of the "<li>" for each the "h4" and the "p", and 'float:left;' each [I]might[/I] work... but I'm seeing an inherent & unresolvable problem here maybe best solved by using the [I]inline element[/I] "<span>"... ?
Copy linkTweet thisAlerts:
@CentauriMar 01.2008 — The op doesn't want them to display side by side, but one under the other.
Copy linkTweet thisAlerts:
@WebJoelMar 01.2008 — -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?
[COLOR=#000080]<li>[/COLOR]P<br />M[COLOR=#000080]</li>[/COLOR][/quote]
Copy linkTweet thisAlerts:
@scragarMar 01.2008 — and what about the underline and grey text that the image shows Joel?
Copy linkTweet thisAlerts:
@WebJoelMar 01.2008 — and what about the underline and grey text that the image shows Joel?[/quote]
CSS:.line {border-top:1px solid red; color:gray; font-weight:bolder}[/QUOTE]HTML:[COLOR=#000080]<li>[/COLOR]P<br /><span class="line">M</span>[COLOR=#000080]</li>[/COLOR][/QUOTE] works, and you can control the thickness and color too, but I suppose ultimately it's a case of [I]six of one[/I] or [I]a half-dozen[/I] of another.
×

Success!

Help @Dysan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...