• CSS Ordered & Unordered lists

  Date: Sep 27, 2010  |  Categories: Css  |  Written By: Mike Ballan  

Last week I was having a mental block on why my Unordered list which was nested inside a Ordered list wasn’t working and then I had problems with plain ordered lists too so I thought I would sit down in a quiet room and sort out this problem with this little bit of CSS which I thought you guys out there might find helpful.

First of I reset the CSS for lists as below:

ul, ol {
	margin:0;
	padding:0 0 20px 0;
}
li {
	list-style:none;
}

You will also need to download this image called “bullet.gif” for the bullet, ive just made it a default bullet shape but you can change it to anything you want.

Then I have written this code to make all bullets with the class of “bullets” be reset just in case.

.bullets {
	margin:0;
	padding:0;
	list-style:none;
}

CSS for Ordered lists

ol.bullets {
	margin:0 0 20px 0;
}
ol.bullets > li {
	margin:0 0 0 18px;
	list-style-type:decimal;
}
ol.bullets > li > ol {
	margin:0;
}
ol.bullets > li > ol > li {
	margin:0 0 0 20px;
	list-style-type:decimal;
}
ol.bullets > li > ul {
	margin:0;
}
ol.bullets > li > ul > li {
	margin:0;
	padding:0 0 0 10px;
	background:transparent url(bullet.gif) no-repeat 0 5px;
}

CSS forUnordered lists

ul.bullets {
	margin:0 0 20px 0;
}
ul.bullets > li {
	margin:0;
	padding:0 0 0 10px;
	background:transparent url(bullet.gif) no-repeat 0 5px;
}
ul.bullets > li > ul {
	margin:0;
}
ul.bullets > li > ul > li {
	margin:0;
	padding:0 0 0 10px;
	background:transparent url(bullet.gif) no-repeat 0 5px;
}
ul.bullets > li > ol {
	margin:0;
}
ul.bullets > li > ol > li {
	margin:0 0 0 15px;
	list-style-type:decimal;
}

And finally the HTML for all the CSS above..!

<ul class="bullets">
	<li>Unordered list</li>
</ul>

<ol class="bullets">
	<li>Ordered list</li>
</ol>

I’ve also included in the CSS the styling for nested lists too but haven’t included the HTML code for them.

Tags: List Items | Ordered Lists | Unordered Lists