Huh, that makes things so much easier. I knew you could stick a good deal into a list-item, but I forgot that you could style them independently also. Thanks! And lovely site! This one’s a keeper :)

Sir, very useful indeed, i liked to use the ’em’ unit insted of the pixel/point, but not so sure how do you measure font size using the ’em’ ?
one more thing, would u write a tutorial about the new DIV/CSS trend, using DIVs instead of Tables ?
And what do you recommend to read about CSS ?
Thanks Alot.

God blesses

Justin, i tested it here (ff), and unfortunately if you use
ol li {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
it will overwrite the “ol” style.

aaahhhhh very good indeed.

Some people will argue about the p being in there but it makes sense to style the actual listing and not font.

@Mohammed – CSS reading I would recommend notepad. If you are after div styling tuts it should not be too hard to do so because it is now the ‘common’ way of coding for websites.

Problem with transparent the close button ( X )

MarkB, an excellent point, but sadly that just proves what I’ve said for years. A CMS should be for content database management, hence Content Management System. A CMS should have nothing to do with how the content is displayed. How content is displayed should be handled by a separate CDS, or Content Display System (a term I kinda made up myself).

I’ve written my own universal CMS that I use for most of my clients, and I write a separate CDS for each client’s website. It’s a quick and speedy process to code a CDS when you’re already familiar with the database structure of the CMS. This way content is truly separated from the design. I don’t feel hindered in the least as to how I design and code my websites, because I never have to put up with the templating garbage that you have to deal with on most content management systems. It also works better for my clients; since my CMS has a client and webmaster mode, my clients don’t get overwhelmed by a bloated WYSIWYG editor and the bloated settings and modules that most systems today, have.

But not everyone is familiar with server-side programming (PHP, ASP, SQL, etc.), hence they couldn’t code their own CDS even if they wanted to; so I guess I’m probably a little over-opinionated in this matter. So don’t take what I just said too seriously.

Oh I’ve been looking for something like this. Thanks.

Great tutorial, Thanks!

I don’t know you can read chinese or not .( My English is poor) Your site is so beautiful and the article is also nice for me ! (hope my word no mistakes)

I’m a bit curious about your CDS, a term I have never heard before. I do like the idea though, and like MarkB points out, a p within a li is not what I expect any other than someone working with web would get. It is hard enough to make systems that makes publishing easy for customers.

A way to go would perhaps be to render a
*list thing
* and another

as a li with a p inn it when it is outputted to the screen (well, actually: swap the star with li p before insert to the db) . But: if you have some CDS that makes it possible to keep markup out of the database, that would be great. I’m not asking you to shear your code, but how to go about starting a project like that would be nice.

I searched your page for CDS, and a lite google search, but nothing that strikes me as the answer.

This is a tip? I fail to see what is so profound about this tip. Its just simple CSS that anybody can do. So you can italicize the numbers and change the font to something else for the text. What was so worthy about writing this as an article?

Why not use ‘span’ to style the list items differently? This would be a bit more semantically correct, would it not?

Very simple and useful tip. I always wanted to style my numbers but never knew how. This is a great approach!

HI Buddy! Thanks a lot for your useful tips. It’s very easy and simple to understand. Good job, thanks again.

Good turorial. Thank you

very useful tips thanks

Thanks. very useful information, all the time i was look for it ;)

hi alert(“hey look, injection attack in your face”);

When I click the “View my demo” link, a popup appears with ol p styling examples. Is the popup java? If not, how was it programed? Can this technique be done with CS3 behaviors?

Great tutorials on this site!
CSS 2.0 is very powerful to customize your html elements.

Nice tip…so simple yet looks great!

Thank you for the great solution. The current design trends are for clean cust minimalist websites In such css driven designs, styling ordered lists and bullet lists presents an excellent opportunity to go that extra mile.Its interesting to see what simple formatting using css can achieve!

Good one actually :)

http://www.pixobel.com

Nice !

thanks

Dear Nick:
Thanks, thanks, thanks. Only a designer could explain “programming jargon” so clear like your posts. I love your site and the spirit on it. By the way, to be a designer you have a great understanding of programming!

Greetings,

Ray

Do you know how to get rid of the period after the number in ordered lists? I want to style the numbers with the number only, and a circle around it, probably by putting a circular image in the background of the li.

Beautiful. But is there any way to control the line height of the paragraphs in the p section to achieve a uniform look within the whole list?

Very good tutorial for beginners. Thanks.

i use the old html first ,now i use css/html ,very useful

Anyway to make the text wrap under the number using the ol?

Great , Style Your Ordered List
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Simple and easy for beginner like me.

tnx. :) love it!

The designs showed here show what simple and tasteful design is all about. Another one to consider

Bob, what planet are you on? how is a span more semantic than a P lol

Love IT!

thank you so much for sharing. nice post. i like it :p

The designs showed here show what simple and tasteful design is all about

I just heard the gossip that since there’s some technic problems on white iphone 4, iphone 4b is going to release. It that true？

I just heard the gossip that since there’s some technic problems on white iphone 4, iphone 4b is going to release. It that true？

tanrim kaderimi baştan yaz

That’s Great! Thanks for the post!

Thank you for this quick tutorial. Very helpful in a pinch!

It works perfectly!!!:) Thanks.

Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical

Another interesting post. Thank you for the information, It is good to see such quality posts. I am subscribing to your blog. Keep them coming.

Thank you for another magnificent article. Where else could anyone get that type of information in such an ideal way of writing? I’ve a presentation next week, and I’m on the look for such information.

Really it was very helpful information! I was looking for this for a long.

Hmm, I wish you could style the list style. Or can you?

Cool, exactly what i was looking for!

I wonder if there’s a way of doing this without the extra ‘p’ markup. Or if you can somehow just traget the number in the ol as a seperate item to the rest of the list.

Great web site! I genuinely love how it truly is simple on my eyes and the data are nicely written. I am wondering how I may well be notified whenever a new post has been made. I’ve subscribed to your RSS which should do the trick! Have a terrific day!

You really make it appear so easy along with your presentation but I to find this topic to be actually one thing that I believe I’d by no means understand. It sort of feels too complex and very vast for me. I am having a look ahead for your next publish, I will attempt to get the cling of it!

Not my code but hope it helps you RAM.
ul {
list-style-type: none;
padding: 0px;
margin: 0px;}

li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; }
You can also use an image to style the list with:
ul
{
list-style-image: url(‘sqpurple.gif’);
}
but it’s not cross browser compatible.

Thanks for the free tips!

You really make it appear so easy along with your presentation but I to find this topic to be actually one thing that I believe I’d by no means understand. It sort of feels too complex and very vast for me. I am having a look ahead for your next publish, I will attempt to get the cling of it!

nice article

I genuinely love how it truly is simple on my eyes and the data are nicely written. I am wondering how I may well be notified whenever a new post has been made. I’ve subscribed to your RSS which should do the trick! Have a terrific day!

Here is a great deal I came to know in terms of discount for SoGoSurvey Yearly Enterprise Account. Goto the home page of SoGoSurvey after you’ve login to your Free Account. Click on Upgrade and select the Enterprise Package. If on the payment page you enter SOGOEN in the Promo Code section and you will see that they offer you a $499 deal instead of $590. I purchased one. Try the code, maybe you get lucky too.

Very good thanks!!

thank you good post..