Styling your Lists: 20+ Brilliant How to’s and Best Practices

When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many design blocks in a stylish and elegant manner. In this article, we’ll have a look at how such lists can create a whole new look, feel, and effect of a site.

Style Your Ordered List

By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

Elastic Calendar Styling with CSS

You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.

Three Column CSS

A Three Column CSS Layout Using Just an Unordered List

Simulating a Table Using an Unordered List

With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. Here is how to simulate a table using an unordered list.

How to Create a Block Hover Effect for a List of Links

Learn how to create this “block hover” effect. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of <em> and <span> tags.

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
  </div>

The Amazing LI

Using CSS and Unordered List Items to Do Just About Anything.

Centering List Items Horizontally

Slightly Trickier Than You Might Think, by wrapping the list inside a table div and using display: table; trick.

Turning a list into a navigation bar

Learn how to create a navigation bar using unordered lists.

FORM elements design using CSS and list (ul and dl)

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. In this post you will see another way to design FORM using list elements <ul> and <li>.

<fieldset>
<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<ul>
<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li>
<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>
</fieldset>

5 Ways to Set Your Unordered Lists Apart

Here are five different ways to style your unordered lists with CSS.

Taming Lists

In this article, Mark Newhouse demonstrates how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page.

<div id="bread">
<ul>
	<li class="first">Home
	<ul>
		<li>&#187; Products
		<ul>
			<li>&#187; Computers
			<ul>
				<li>&#187; Software</li>
			</ul></li>
		</ul></li>
	</ul></li>
</ul>
</div>

Nested lists used to create a simple folder metaphore

Here’s a rough and ready example showing how to make a folder analalogy using a nested list.

<ul id="sitemap">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#" class="open">item 4</a>
<ul>
<li><a href="#">sub-item 1</a></li>
<li><a href="#">sub-item 2</a></li>
<li><a href="#" class="open">sub-item 3</a>
<ul>
<li><a href="#">sub-sub-item 1</a></li>
<li><a href="#">sub-sub-item 2</a></li>
<li><a href="#" class="open">sub-sub-item 3</a>
<ul>
<li><a href="#">sub-sub-sub-item 1</a></li>
<li><a href="#">sub-sub-sub-item 2</a></li>
<li><a href="#">sub-sub-sub-item 3</a></li>
<li><a href="#">sub-sub-sub-item 4</a></li>
</ul>
</li>
<li><a href="#">sub-sub-item 4</a></li>
</ul>
</li>
<li><a href="#">sub-item 4</a></li>
</ul>
</li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
</ul>

Handcrafted CSS + HTML Grid Calendar 2009

Some experiments with css and grids in order to make CSS Grid Calendar for 2009.

Best Practices

Mixx’s Popular Stories

The markup is not simple, since they are using child <ul> along with a voting form and <span> tags.

<ul>
    <li>
      <h4><a href="#"></a><span><a target="_blank" href="#"></a></span></h4>
      <div>
	<div><span></span></div>
	<div>
             <form>
		    <input/>
		    <button type="submit"><span></span></button>
		    <input/>
             </form>
	 </div>
      </div>
      <ul>
	  <li><a href="#"></a></li>
	  <li></li>
	  <li></li>
      </ul>
      <blockquote>
	  <p></p>
      </blockquote>
      <ul>
	  <li><a href="#"></a></li>
	  <li><a href="#"></a></li>
	  <li><a href="#"></a></li>
      </ul>

    </li>
</ul>

Thecosmicmachine

Thecosmicmachine’s Supported social networks, uses unordered list. Clean and simple.

<ul id="web2List">
					<li>
						<img src="images/twitter_32.png"/>
						<strong>Twitter</strong><br/>
						What are you doing?
					</li>
					<li>
						<img src="images/facebook_32.png"/>
						<strong>Facebook</strong><br/>
						Connect with the people around you.
					</li>
</ul>

Viget- Inspire

Viget- Inspire uses a pretty nice calender in their footer using unordered list.

<ul class="clearfix">
       <li><a href="http://www.viget.com/inspire/2009/05/">May 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/04/">Apr 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/03/">Mar 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/02/">Feb 09</a></li>
       ......
</ul>

Product Planner

Product Planner uses ordered list to show the user the steps of using their service. Each item (#how_to_use li.step_1) uses a different image.

<ol>
		<li class="step_1">Find a flow from the gallery.</li>
		<li class="step_2">Use that flow to create your own.</li>
		<li class="step_3">Share it with your colleagues.</li>
</ol>

Onwired Code block

Onwired uses ordered list to create their code block.

Jobs on the wall

Nick La uses unordered lists to display all available jobs.

<ul class="joblist">
   <li class="">
        <img class="employerlogo" alt="" src="http://jobs.webdesignerwall.com/images/logos/small_1390806013"/>
        <img class="category" alt="" src="http://jobs.webdesignerwall.com/images/cat-design.gif"/>
        <h3><a href="http://jobs.webdesignerwall.com/job.php?id=310">Web/Graphic Designer</a></h3>
        <p class="jobinfo"><span class="type">Full-Time</span>   <em>at</em> Hallmark Channel <em>(Studio City, Ca)</em></p>
   </li>
</ul>