ITauthor

/***********************************************************************************/ /* Styling a list using CSS */ /* ------------------------------------------------------------- */ /* The design for this list was taken from the article "CSS Design: Taming Lists" */ /* by Mark Newhouse, published in A List Apart, September 27, 2002 */ /* http://www.alistapart.com/articles/taminglists/ */ /***********************************************************************************/ #NewhouseList { display: none; width: 20em; padding: 0; margin: 0; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; } #NewhouseList ul { list-style: none; margin: 0; padding: 0; border: none; } #NewhouseList li { border-bottom: 1px solid #90bade; margin: 0; } #NewhouseList li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #NewhouseList li a { width: auto; } #NewhouseList li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

I came across this handy technique of using pure CSS to design nice looking lists. It's from an article on A List Apart by Mark Newhouse, written back in 2002. There's a link to this article in the list below.

I was going to use this for a show/hide list of related topics (hence the link below). In the end I decided not to because it didn't fit with the rest of the page design.

Click the following link to show/hide the list.

Related topics

The source that produced this:

<STYLE type="text/css">
/***********************************************************************************/
/* Styling a list using CSS                                                        */
/* -------------------------------------------------------------                   */
/* The design for this list was taken from the article "CSS Design: Taming Lists"  */
/* by Mark Newhouse, published in A List Apart, September 27, 2002                 */
/* http://www.alistapart.com/articles/taminglists/                                 */
/***********************************************************************************/

#NewhouseList {
	display: none;
	width: 20em;
	padding: 0;
	margin: 0;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #90bade;
	color: #333;
}		
#NewhouseList ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}	
#NewhouseList li {
	border-bottom: 1px solid #90bade;
	margin: 0;
}		
#NewhouseList li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #1958b7;
	border-right: 10px solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	width: 100%;
}
html>body #NewhouseList li a {
	width: auto;
}
#NewhouseList li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
}
</STYLE>


<script>
  <!--

function fExpandCollapseRelatedTopics()
{
    //Get the element with the id "NewhouseList" (note: this is a div below the "Related topics" link:
    var oRTsection = document.getElementById("NewhouseList");
    
    //OnClick, toggle the div between displayed and not displayed:
    oRTsection.style.display = (oRTsection.style.display=='block') ? 'none': 'block';
    
    return false;
}
    -->
</script>    

<p>
<br>
<a class="expandRelatedToggle" id="expandRelated" title="Click to show/hide" href="javascript:void(0)" 
name="relatedTopics" onclick="fExpandCollapseRelatedTopics(); return false">Related topics</a>
</p>

<div id="NewhouseList">
<ul>
    <li><a href="http://www.alistapart.com/articles/taminglists/" title="Click to move to this topic">CSS Design: Taming Lists</a></li>
    <li><a href="http://www.alistapart.com/" title="Click to move to this topic">A List Apart - home page</a></li>
    <li><a href="http://www.w3.org/TR/REC-html40/present/styles.html" title="Click to move to this topic">W3C Style Sheets reference</a></li>
    <li><a href="http://feeds.feedburner.com/itauthor" title="Click to move to this topic">ITauthor podcasts</a></li>    
    </ul>
</div>