CSS List Boxes Improved

I came across a slick CSS List Box widget the other day and wanted to share it. The original page was done by Mike Cherim, CSS: List Boxes. I liked how relatively simple the HTML and CSS was, plus the design was very visually appealing.

Example 1: Modified HTML

<div class="clb-shell">
	
	<h3>Web Services (List Boxes Example)</h3>
	<p>We offer a variety of web services for our customers. Our services include:</p>
	
	<ul>
		<li>
			<h5><a href="#">Web Hosting</a></h5> 
			<p>We have professional web hosting services suited to your needs. Read more about our <a href="#">Web Hosting</a> services.</p>
		</li>
		<li>
			<h5><a href="#">Web Design</a></h5> 
			<p>Need a web site? We can help you build your place on the web. Read more about our <a href="#">Web Design</a> services.</p>
		</li>
		<li>
			<h5><a href="#">Web Master</a></h5> 
			<p>Need the works? Our Web master services take care of every need. Read more about our <a href="#">Web Master</a> services.</p>
		</li>
	</ul>
	
	<p>To learn more about these services, check out the links above or <a href="#">contact us</a> today!</p>
	
</div>

I have changed very little of the HTML, as it was already well design and minimalist. One notable change is that the sectional heading tag are now H3 tags instead of H2 tags, and the H3 tags are now H5 tags. This follows the conventions I mentioned in last Fridays article, When to Use Heading Tags. Another change is that I removed the ID from the UL tag, because it is simply not necessary due to specificity (you may want to keep it in if you are using JavaScript to interact with the UL tag). The last change, is that I changed the "clb-shell" ID attribute into a CLASS attribute, this way you can use multiple instances of this widget on the same page.

You may be wondering why we use an anchor tag inside of the H5 tags. Ideally, this wouldnt be necessary, but in IE 6 and lower you can only apply the pseudo class ":hover" to anchor tags. So if you like the hover style on the heading of the box, then this is necessary.

Assuming then, that you adopt my recommendations, you will need the following CSS:

Example 2: Modified CSS (assumes you are using Reset.css

/*
  First define a content are width and position, if needed. This centers (in most browsers) and applies a width
*/
div.clb-shell {
  margin : auto;
  width : 62.3em;
}

/* 
  Default color, border of the heading
*/
div.clb-shell h3 {
  color : #669900;
}

/*
  P tags should pad and clear floats
*/
div.clb-shell p {
  padding : 1em;
  clear : both;
}

/*
  Always use EMs for the height, so that the boxes scale well. 
  List-style-type: none should already be applied, but just in case
  Should be 4px thinner than the main container
*/
div.clb-shell ul {
  width : 61.9em;
  height : 9em;
  text-align : center;
  list-style-type : none;
}

/*
  Now I style the individual boxes (li)
*/
div.clb-shell ul li {
  margin : 0 0.2em;
  border : 1px solid #666;
  width : 20em;
  height : auto;
  background : #ffffea url(images/clb_li_back.jpg); /* Main background image */
  float : left; 
  display : inline;
}

/*
  Style the li links
*/
div.clb-shell a {
  color : #669900;
}
div.clb-shell a:hover, div.clb-shell a:focus, div.clb-shell a:active {
  color : #000;
  text-decoration : none;
}
div.clb-shell a:focus, div.clb-shell a:active {
  background-color : #fff;
}

/*
  Style the h5 links
*/
div.clb-shell ul h5 a {
  color : #ffffaa;
  display : block;
  width : 19.4em;
  padding : 0.2em 0.3em;
  background : #333 url(images/clb_h5_back.jpg) repeat-x; /* header background image */
  border-bottom : 1px solid #666;
  text-decoration : none;
}
div.clb-shell ul h5 a:hover, div.clb-shell ul h5 a:focus, div.clb-shell ul h5 a:active {
  background : #957412 url(images/clb_h5_back_over.jpg) repeat-x; /* header hover image */
  color : #fff;
}

/*
  This styles the text p content within the li separately. The most important 
  thing here is to re-kill the padding and add the margin to create good gutters
*/
div.clb-shell ul p {
  font-size : 0.9em;
  padding : 0;
  margin : 1em;
}

The only major change, beside the previously mentioned updates, is that I made to the styles was to rename the background images to clb_h5… instead of clb_h3. The other change is that since I assume you are using "reset.css", we can safely use EMs instead of PXs. This allows your widgets to scale.

One other great benefit from using CLASS attributes instead of ID attributes is that you can easily override the styles here for different looks on the same page. For example, lets assume you use the overload&rsquot; class to override the second CSS List Box:

Example 3: Override Colors

<ul class="overload">

div.clb-shell ul.overload li {
  background : #ffffea url(images/clb_li_back_2.jpg); /* Main background image */
}
div.clb-shell ul.overload h5 a {
  background : #333 url(images/clb_h5_back_2.jpg) repeat-x; /* header background image */
}
div.clb-shell ul.overload h5 a:hover, div.clb-shell ul h5 a:focus, div.clb-shell ul h5 a:active {
  background : #957412 url(images/clb_h5_back_over_2.jpg) repeat-x; /* header hover image */
}