Updating the "what's new" box

The old message box on the from page of www.piscoweb.org was in great need of a makeover. While everything else on the site was "easily" editable in drupal the old dialogue box was an image map.

The problem with this is that if anybody want to modify this they must know how to create image maps and have good photoshoping skills to make the image in the first place. It is also not semantic and so cannot be indexed properly by search engines.

The solution to this is a fairly easy one. All I had to do is create an html list and set a background image to it. Recreating the image in Illustrator I was also able to bring the file size down from 44kb to 4.4kb!

The new html markup is a simple list with an id set to #whats_new:

<ul id="whats_new">
<li><a href="research/community/subtidal/sitemap">Interactive Subtidal Data Products Map</a></li>
<li><a href="conservation/mpa">Marine Reserves and Protected Areas</a></li>
<li><a href="courses">2007 Interdisciplinary Courses</a></li>
<li><a href="research/oceanography/hypoxia">Hypoxia off the Oregon Coast</a></li>
</ul>

The css is also fairly simple. In fact, it worked the first time when I tried it out in Internet Explorer :)

ul#whats_new {
	padding: 0 0 0 0;
	width: 468px;
	height: 111px;
	background-image:url(/images/whats_new.gif);
	list-style-type: none;
}

ul#whats_new li{
	list-style:none;
	line-height:1.2em;
	font-size:12px;
}

ul#whats_new li a {
	position:relative;
	top:25px;
	left:80px;
	text-decoration:none;
	background-color:#9A9833;
	color:white;
}

ul#whats_new li a:hover {
	text-decoration:underline;
}