Krioma.net

Earlier today I was asked to add an image with floating text to the [FAS] website. It's been a while since I had todo any proper CSS and so quite eager to give it ago. It turns out that what I needed to do is fairly simple. The basic CSS does the work:
<style type="text/css"> <!-- #map { margin:0; padding:0; width:500px; height:500px; background:url(http://fedastro.org.uk/images/map.jpg) top left no-repeat #fff; font-family:arial, helvetica, sans-serif; font-size:8pt; text-decoration:none; auto 2em auto; position:relative; display:block; } #map li { margin:0; padding:0; list-style:none; text-decoration:none; } #map li a { position:absolute; display:block; text-decoration:none; /* Specifying a background image (a 1px by 1px transparent gif) fixes a bug in older versions of IE that causeses the block to not render at its full dimensions. */ background:url(http://fedastro.org.uk/images/blank.gif); } #map li a span { display:none; text-decoration:none;} #map li a:hover span { font-size:8pt; position:absolute; display:block; width:200px; left:20px; top:20px; padding:5px; border:1px solid #000; background:#fff; text-decoration:none; color:#000; filter:alpha(opacity=80); opacity:0.8; } #map a.president { top:50px; left:250px; width:80px; height:90px; } #map a.vice { top:75px; left:360px; width:80px; height:90px; } -->

and so on until you have all the elements you want. Then just create a list in html:

<ul id="map"> <li><a href="#" class="president"><span> Chairs FAS Council meetings <br /> </span></a><br /> </li> <li><a href="#" class="vice" title="Vice President"><span> Supports the work </span></a><br /> </li> </ul>

and job done! See [for an example], well this is what I produced for the FAS site. The main bulk of this was inspired from: [CSS How to]... so a big thanks to that excellent page.