Картинки-ссылки + надписи на картинках

[Sober]

Здравствуйте все. Нужна ваша помощь. Есть такой код:

		<div id="navi">
			<a href="#"><img src="images/head_navi01.jpg" title="about company"></a>
			<a href="#"><img src="images/head_navi02.jpg" title="our product"></a>
			<a href="#"><img src="images/head_navi03.jpg" title="our partnes"></a>
			<a href="#"><img src="images/head_navi04.jpg" title="our clients"></a>
			<a href="#"><img src="images/head_navi05.jpg" title="best company offers"></a>
			<a href="#"><img src="images/head_navi06.jpg" title="contact us"></a>
		</div>

CSS:

img {

border: 0;

float: left;

}

Выглядит это так:

http://i081.radikal.ru/1010/e9/52dfd1b7a55f.jpg - верхние 6 блоков.

Нужно теперь сделать надписи на этих блоках, по соответствующим разделам. Если писать в теге <a> то надписи появляются сбоку этих блоков.

z-index - не помогает.

Возможно я пошёл по ложному пути, и картинки надо делать как фон, для названия раздела, но как тогда сделать, что бы вся область этой картинки являлась ссылкой?

Прошу помощи у опытных людей. Если нужна ещё дополнительная информация, спрашивайте. Заранее благодарен.

[psywalker]

1) Использовать вместо див - UL

2) В LI поместить картинку, и спан. Допустим Li наначить релатив. span-у назначить absolute; в нём текст. Координатами отнести его, куда нужно.

[MC WEST]

Сделай проще: картинку фоном, а ссылку на всю картинку либо с помощью padding либо укажи точные размеры и добавь display: block;

Edited October 18, 2010 by MC WEST