Image Caption CSS

This is short tutorial on how to make images with captions using css without having to resort to using <br> and <div style="clear:both">. I have come across a number of different ways to do this, but each website was only a partial techneque. Putting them all together I wrote this quick tutorial for others and named it something you would search for.

The basic idea is to make the background of the <a> item the image you wish to display and extend the link area to suround the image.

First for my example a small list (taken from my link bar).

<div class="topbar">
 <ul>
  <li><a class="home"     href="/">Home</a></li>
  <li><a class="about"    href="about/">About</a></li>
  <li><a class="programs" href="programs/">Programs</a></li>
 </ul>
</div>

Next the CSS.

div.topbar ul { float: left; padding: 0; }
div.topbar li { float: left; display: inline; }
div.topbar a {
 float: left;
 text-align: center;
 padding-top: 32px;
 min-width: 32px;
 background-position: center top;
 background-repeat: no-repeat;
}

div.topbar a.home { background-image: url(pics/home.png); }
div.topbar a.about { background-image: url(pics/about.png); }
div.topbar a.programs { background-image: url(pics/programs.png); }

When done you end up something like this:

There are two main advantages to using this method rather then using img's inside of a "a" tags combined with "br" between the img and text.

1. First off you don't have to add a clear:both as the final item. This allows for cleaner html and a much easier time modifing the layout of the page just by editing the css file and not having to worry about adding or removing empty div's with a clear in them.


2. As a list (or just items) you present only one item to the user so when scanning the page by text readers they only see one thing (the link).


3. No float wondering


4. It renders in all browsers including MSIE for the Apple.


5. If it isn't generated the images can be changed or removed just by editing the css file.