Placing icons and text below using CSS - Please Help

[me_myself]

Hi,

I am trying to have icons and display text below them using <li> and CSS. Something like this website - http://i.roanoke.edu/ (see the icons - home, news, et). Can you please give me a head start on how to go about doing this - any sample code or tutorial will be very helpful.

Thanks a lot.

[Beverleyh]

If you view the source of the web page, the markup for the square icons is this;


<ul class="block">
<li><a href="about.cfm" class="transition"><img src="images/icon-about.png" width="57" height="57" alt="Icon About"/>About RC</a></li>
<li><a href="news.cfm" class="transition"><img src="images/icon-news.png" width="57" height="57" alt="Icon News"/>News</a></li>
<li><a href="http://maroons.roanoke.edu/mobile/"><img src="images/icon-sports.png" width="57" height="57" alt="Icon Sports"/>Sports</a></li>
<li><a href="calendar.cfm" class="transition"><img src="images/icon-cal.png" width="57" height="57" alt="Icon Cal"/>Calendar</a></li>
<li><a href="directory.cfm" class="transition"><img src="images/icon-dir.png" width="57" height="57" alt="Icon Dir"/>Directory</a></li>
<li><a href="dining.cfm" class="transition"><img src="images/icon-menu.png" width="57" height="57" alt="Icon Menu"/>Dining</a></li>
<li><a href="directions.cfm" class="transition"><img src="images/icon-directions.png" width="57" height="57" alt="Icon Directions"/>Directions</a></li>
<li><a href="contact.cfm" class="transition"><img src="images/icon-contact.png" width="57" height="57" alt="Icon Contact"/>Contact</a></li>
</ul>
You should be able to download their stylesheets (2 in this page) and look for either the .block or .transition classes on the ul or li a and img to see how they've done it.

[me_myself]

Thanks for your reply.

I downloaded their css and had a look. They have a bg image and a foreground image for all their icons. I need to have separate image for all icons - 1.png, 2.png and so on (just 1 solid icons without foreground/background images). I tried changing few styles, but it breaks entire list. Can you please check and let me know.

Thanks again.

[me_myself]

I changed the image inside the <li> and it worked. Thanks a lot.